准备工作
已经写好的代码,有团队的需要拉取最新的代码(今天重点分享团队前端项目的发布过程)

软件:(包括但不限于)——如果工具都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 * )存档,发到生产服务器。

回滚

一旦当前版本发生问题,就要回滚到上一个版本的构建结果。简单的做法就是修改一下符号链接,指 向上一个版本的目录。

持续集成流程(看完这个图你会明白点什么)


项目本地Tomcat打包发布
发布前先进行了本地发布的原因:在于这样可以检验自己项目打包后是否存在问题,如果在本地能够发布成功,那么在远程服务器上发布也一定没有什么问题。

第一步:用前端开发工具打包(我是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步:下载到服务器中的指定位置

[admin@itoo4 src]$ tar -zxvf nginx-1.9.9.tar.gz


第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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐