手动/自动化部署前端项目(React + Nginx + Jenkins)

手动部署

打包文件

• 在打包前端项目时，对于 js 文件需要进行拆分打包
  • 不同的子路由对应不用的组件 > 不同的 js 文件
  • 如果将所有的 js 内容打包到一个 js 文件中，在刚进入页面时，直接加载所有的 js 文件，导致渲染速率变慢
  • 如果将不同路由下的 js 内容进行分开打包，那么只需要在进入该路由下请求 js 文件，解析 js 内容
• React 和 Vue 都提供了路由懒加载的方案来实现拆分打包
• 将构建生成的 build 文件夹放在服务器中：/data/project/cloud-music

项目配置文件

• 在 /usr/local/nginx 文件夹下新建一个文件夹：project-conf

• 在该文件夹下新建 cloud-music.conf 文件：用来进行相应的 nginx 配置

  server {
      listen       9001;
      server_name  www.xdhonline.cn;
  
      location / {
          root   /data/projects/cloud-music/build;
          index  index.html index.htm;
      }
  }
  

• 这么做的好处：每一个项目都有自己独立的配置文件，方便进行管理

• 项目的配置文件存放的位置也可以是项目本身存储文件，不必放在该文件夹下

配置 nginx

• 编辑 nginx 的配置文件：/usr/local/nginx/conf/nginx.conf
• 设置Nginx的权限为root：user = root
• 引入项目的配置文件：include /usr/local/nginx/project-conf/*.conf

  #user  nobody;
  worker_processes  1;
  
  #error_log  logs/error.log;
  #error_log  logs/error.log  notice;
  #error_log  logs/error.log  info;
  
  #pid        logs/nginx.pid;
  
  
  events {
      worker_connections  1024;
  }
  
  user root;
  
  
  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"';
  
      #access_log  logs/access.log  main;
  
      sendfile        on;
      #tcp_nopush     on;
  
      #keepalive_timeout  0;
      keepalive_timeout  65;
  
      #gzip  on;
  
  
      #server {
      #    listen       80;
      #    server_name  49.232.83.17;
  
          #charset koi8-r;
  
          #access_log  logs/host.access.log  main;
  
         # location / {
         #    root   html;
         #     index  index.html index.htm;
         # }
  
          #location /www/ {
          #    root   /data/test/;
          #    index  index.html index.htm;
          #}
  
          #location /images/ {
          #    root   /data/test/;
          #    autoindex   on;
          #}
  
          #error_page  404              /404.html;
  
          # redirect server error pages to the static page /50x.html
          #
          #error_page   500 502 503 504  /50x.html;
          #location = /50x.html {
          #    root   html;
          #}
  
  
  
  # proxy the PHP scripts to Apache listening on 127.0.0.1:80
          #
          #location ~ \.php$ {
          #    proxy_pass   http://127.0.0.1;
          #}
  
          # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
          #
          #location ~ \.php$ {
          #    root           html;
          #    fastcgi_pass   127.0.0.1:9000;
          #    fastcgi_index  index.php;
          #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
          #    include        fastcgi_params;
          #}
  
          # deny access to .htaccess files, if Apache's document root
          # concurs with nginx's one
          #
          #location ~ /\.ht {
          #    deny  all;
          #}
    #  }
  
  
      # another virtual host using mix of IP-, name-, and port-based configuration
  
      upstream django{
                  server  127.0.0.1:8080;
      }
  
      # HTTPS server
      #
      # 将网易云项目配置添加进来 
      include /usr/local/nginx/project-conf/*.conf;
  
      server {
          listen       443 ssl;
          server_name  www.xdhonline.cn;
  
          ssl_certificate      /data/ssl/1_xdhonline.cn_bundle.crt;
          ssl_certificate_key  /data/ssl/2_xdhonline.cn.key;
  
          ssl_session_cache    shared:SSL:1m;
          ssl_session_timeout  5m;
  
          ssl_ciphers  HIGH:!aNULL:!MD5;
          ssl_prefer_server_ciphers  on;
  
          location / {
              uwsgi_pass   django;
              include /usr/local/nginx/conf/uwsgi_params;
              root   html;
              index  index.html index.htm;
          }
          location /static {
              alias   /data/projects/auction/auction_server/collect_static/;
          }
  
  
      server {
          listen   80;
          server_name    www.xdhonline.cn;
          rewrite  ^(.*)$ https://$host$1 permanent;
      }
  
  }
  

重启 nginx

• nginx -s stop && nginx
• 或者 nginx -s reload
• 说明：之前都是需要进入 nginx 的 sbin 文件夹中执行命令，现在建立软连接直接执行即可

  // 1. 编辑 /etc/profile 文件
  vim /etc/profile
  
  // 2. 添加配置
  PATH=$PATH:/usr/local/nginx/sbin
  export PATH
  
  // 3. 使配置生效
  source /etc/profile
  

测试访问

• www.xdhonline.cn:9001

自动化部署

整体流程

安装java环境

• 查看本地是否自带 java 环境

  yum list installed | grep java
  

• 卸载自带的 java，使用 root 用户进行卸载

  yum -y remove java-1.8.0-openjdk* 
  yum -y remove tzdata-java*
  

• 查看 yum 仓库中的 java 安装包

  yum -y list java*
  

• 安装 java

  yum -y install java-1.8.0-openjdk*
  

• 查找 java 安装路径

  which java
  
  ls -lrt /usr/bin/java（也就是上一步查询出来的路径），然后回车
  
  输入ls -lrt /etc/alternatives/java（也就是上一步查询出来的路径），然后回车
  
  从路径中可以看到在jvm目录下，输入cd /usr/lib/jvm，跳转到jvm的目录
  
  输入ls 列出当前目录下的文件和文件夹
  

• 配置 java 环境变量

  # 进入配置文件
  vim /etc/profile
  
  # 添加如下命令
  export JAVA_HOME=/usr/lib/jvm/java-1.8.0
  export JRE_HOME=$JAVA_HOME/jre  
  export PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin
  export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib
  
  # 保存退出并使得配置生效
  source /etc/profile
  

安装Jenkins

• 安装

  # 方式1
  sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
  sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
  yum install jenkins
  

• 修改配置

  vim /etc/sysconfig/jenkins
  
  # 修改用户为root
  JENKINS_USER="root"
  
  # 配置一个没有使用的端口
  JENKINS_PORT="8088"
  
  # 查看 java 的路径是否和安装的路径一致
  candidates="
  /opt/bin/java
  "
  

• 重启 Jenkins

  service jenkins restart
  

• 启动

  systemctl start jenkins
  

• 查看状态

  systemctl status jenkins
  
  # 出现 active running 表示成功
  

• 访问地址

  •   http://www.xdhonline.cn:8088
      htp://49.232.83.17:8088
    

• 安装插件，注册用户

• 使用admin登录

  • 获取登录密码

    vim /var/lib/jenkins/secrets/initialAdminPassword
    

  • 修改 admin 用户的密码
    • 系统管理 > 管理用户 > admin > 设置

配置Jenkins

• 安装自动化部署需要的插件

  • NodeJS Plugin
  • Publish Over SSH

• 配置 SSH

  • 系统管理 > 系统配置 > Publish Over SSH

  

• 配置 NodeJS

  • 系统管理 > 全局工具配置 > NodeJS

  

部署项目

• 新建任务：cloud-music
• 任务配置：
  • General：勾选丢弃旧的构建，保持构建天数 7，保持最大构建数量 5
  • 源码管理：github 上项目地址，输入用户名和密码
  • 构建触发器：勾选轮询 SCM：H 2 * * *
  • 构建环境：勾选 Provide Node & npm bin/ folder to PATH
  • 构建：勾选 执行 shell

    pwd
    ls
    
    node -v
    npm -v
    git --version
    java -version
    echo '构建的版本号:'${BUILD_NUMBER}
    npm install
    npm run build
    
    pwd
    echo '构建完成'
    
    nginx -s reload
    

  • 构建后操作
    • 勾选 Send build artifacts over SSH
    
  • 保存

后续操作

• 后面修改了代码，只需要提交到 github 上，然后到 Jenkins 中进入对应的任务中选择立即构建即可

Bug 解决

• 问题：在项目部署成功后发现在子路由中刷新页面会出现 404 错误
• 方案：在项目的配置文件 cloud-music.conf 中添加配置：try_files $uri$uri/ /index.html

  server {
      listen       9002;
      server_name  www.xdhonline.cn;
  
      location / {
          root   /data/projects/cloud-music-jenkins/build;
          index  index.html index.htm;
          try_files $uri $uri/ /index.html;
      }
  }
  

其他内容

• SEO 优化：是指用户在搜索引擎进行搜索的时候尽可能的使自己的网站排名靠前