手把手教你VUE前端项目发布上线 |
您所在的位置:网站首页 › 网页部署上线什么意思呀 › 手把手教你VUE前端项目发布上线 |
准备工作
已经写好的代码,有团队的需要拉取最新的代码(今天重点分享团队前端项目的发布过程) 软件:(包括但不限于)——如果工具都OK,将大大降低发布难度Nginx:轻量级web服务器 Jenkins:持续集成开发工具 Tomcat:轻量级的应用服务器 Xshell:安全终端模拟软件 VSCode:前端开发工具 当然还有Maven、Gitlib、JDK,这些都是团队开发的必备工具 基础知识:敏捷开发(Agile Development) 的核心是迭代开发(Iterative Development) 与 增量开发 (Incremental Development) 。这里具体什么是迭代开发,什么是增量开发我就不详细说了,但是这里说一点,虽然敏捷开发将软件开发分成多个迭代,但是也要求,每次迭代都是一个完整的软件开发周期,必须按 照软件工程的方法论,进行正规的流程管理。 什么是持续集成 持续集成( Continuous integration , 简称 CI )指的是,频繁地(一天多次)将代码集成到主干。 持续集成的目的,就是让产品可以快速迭代,同时还能保持高质量。它的核心措施是,代码集成到主干 之前,必须通过自动化测试。只要有一个测试用例失败,就不能集成。 通过持续集成, 团队可以快速的从一个功能到另一个功能,简而言之,敏捷软件开发很大一部分都要归 功于持续集成。 根据持续集成的设计,代码从提交到生产,整个过程有以下几步。 提交 流程的第一步,是开发者向代码仓库提交代码。所有后面的步骤都始于本地代码的一次提交 (commit)。 测试(第一轮) 代码仓库对commit操作配置了钩子(hook),只要提交代码或者合并进主干,就会跑自动化测试。
构建 通过第一轮测试,代码就可以合并进主干,就算可以交付了。 交付后,就先进行构建(build),再进入第二轮测试。所谓构建,指的是将源码转换为可以运行的实 际代码,比如安装依赖,配置各种资源(样式表、JS脚本、图片)等等。 测试(第二轮) 构建完成,就要进行第二轮测试。如果第一轮已经涵盖了所有测试内容,第二轮可以省略,当然,这时 构建步骤也要移到第一轮测试前面。
部署 过了第二轮测试,当前代码就是一个可以直接部署的版本(artifact)。将这个版本的所有文件打包( tar filename.tar * )存档,发到生产服务器。
回滚 一旦当前版本发生问题,就要回滚到上一个版本的构建结果。简单的做法就是修改一下符号链接,指 向上一个版本的目录。 持续集成流程(看完这个图你会明白点什么)发布前先进行了本地发布的原因:在于这样可以检验自己项目打包后是否存在问题,如果在本地能够发布成功,那么在远程服务器上发布也一定没有什么问题。 第一步:用前端开发工具打包(我是vscode) npm run bulid 第二步:启动Tomcat 1.启动tomcat,直接双击startup就可以 2.将打包好的应用程序放在tomcat的webapps目录下 3.启动tomcat,进入Tomcat Web应用程序管理者,就可以看到放到tomcat目录下打包好的程序 4.在Tomcat Web应用程序管理者页面直接点击刚刚的那个程序,如果页面加载出来,说明程序打包没有问题 5.将自己的IP地址加上,这样其他人就可以访问到该程序了 点击项目名称:/itoo-front-dev弹出下面的页面,代表本地发布成功 小结:通过上面将打包好的代码部署到Tomcat本地服务器上的过程,可以很好的理解将代码打包到远程服务器,其实他们都是一个用途,就是将打包好的程序发布到服务器让其他用户都可以访问到 远程发布第一步:用Jenkins软件对项目进行部署——打包、部署(这个相当于Tomcat本地部署中的打包和部署) 1)登录Jenkins,创建新任务 2)输入任务名称,选择自由风格软件项目 3)项目配置 4)添加构建命令:先下载依赖:npm install,打包:npm run build 5)将打包好的程序部署到对应的服务器 第二步:启动Xshell,并且连接到需要部署的服务器上去 1)Xshell连接服务器 2)选择要部署的服务器 第三步:在Linux上下载安装Nginx 可以参考相关教程:https://www.runoob.com/linux/nginx-install-setup.html 第1步:下载Nginx, 下载地址:wget http://nginx.org/download/nginx-1.9.9.tar.gz 第2步:下载到服务器中的指定位置 第4步:进入到安装目录 [admin@itoo4 src]$ cd nginx-1.9.9第5步:编译安装 [admin@itoo4 nginx-1.9.9]$ ./configure [admin@itoo4 nginx-1.9.9]$ make [admin@itoo4 nginx-1.9.9]$ make install第6步:查看版本 [admin@itoo4 nginx-1.9.9]$ nginx -v第四步:修改Nginx的配置文件 配置文件详解:https://blog.csdn.net/weixin_42167759/article/details/85049546 [root@bogon conf]# cat /usr/local/webserver/nginx/conf/nginx.conf user root; worker_processes 2; #设置值和CPU核心数一致 error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志级别 pid /usr/local/webserver/nginx/nginx.pid; #Specifies the value for maximum file descriptors that can be opened by this process. worker_rlimit_nofile 65535; events { use epoll; worker_connections 65535; } http { include mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" $http_x_forwarded_for'; #charset gb2312; #limit_zone crawler $binary_remote_addr 10m; #下面是server虚拟主机的配置 server { listen 80;#监听端口 server_name localhost;#域名 index index.html index.htm index.php; root /usr/local/webserver/nginx/html;#站点目录 location ~ .*\.(php|php5)?$ { #fastcgi_pass unix:/tmp/php-cgi.sock; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; include fastcgi.conf; } location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$ { expires 30d; # access_log off; } location ~ .*\.(js|css)?$ { expires 15d; # access_log off; } access_log off; } }第五步:可能需要检查你是否有安装vim 查看是否安装:rpm -qa|grep vim 安装vim:yum -y install vim-enhanced第六步:Jenkins构建 第七步:重启Nginx 验证nginx配置文件是否正确 方法一:进入nginx安装目录sbin下,输入命令./nginx -t 看到如下显示nginx.conf syntax is ok nginx.conf test is successful 说明配置文件正确! 方法二:在启动命令-c前加-t
重启Nginx服务 方法一:进入nginx可执行目录sbin下,输入命令./nginx -s reload 即可 方法二:查找当前nginx进程号,然后输入命令:kill -HUP 进程号 实现重启nginx服务
其他命令: /usr/local/nginx/sbin/nginx -s reload # 重新载入配置文件 /usr/local/nginx/sbin/nginx -s reopen # 重启 Nginx /usr/local/nginx/sbin/nginx -s stop # 停止 Nginx |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |