阅读 306

手动/自动化部署前端项目(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
    复制代码
测试访问

自动化部署

整体流程

image-20201024144433422.png

安装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
  • 安装自动化部署需要的插件

  • 配置 SSH

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

    image-20201024144049666.png

  • 配置 NodeJS

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

    image-20201024144321106.png

部署项目
  • 新建任务: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
      image-20201024145413011.png
    • 保存
后续操作
  • 后面修改了代码,只需要提交到 github 上,然后到 Jenkins 中进入对应的任务中选择立即构建即可
Bug 解决
  • 问题:在项目部署成功后发现在子路由中刷新页面会出现 404 错误
  • 方案:在项目的配置文件 cloud-music.conf 中添加配置:try_files uriuri 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 优化:是指用户在搜索引擎进行搜索的时候尽可能的使自己的网站排名靠前
文章分类
前端
文章标签