前端项目自动化部署

CharHua大约 8 分钟

jenkins+nginx自动化部署前端Vue项目

一、前言

本教程由charhua编写，其内容均为自身实践所得。本次部署采用设备和应用情况：

腾讯云Centos 8.2系统
jenkins 2.5+
nginx服务器
Github
Gitee

为什么没有Docker？

其实本文一开始是以docker实践的，后面因为性能原因，选择原生运行。其实使用docker运行的方法与此方法很相似，无非安装docker和配置docker工作目录，之后执行时在docker执行。若你想要以docker运行，建议您：

安装云服务商的linux系统的docker版镜像。
尽量购买高一点的配置。

其他关于docker的安装配置信息，可以查看网络其他技术文章，当然本文章也可以参考。

二、目录配置

一、新建目录

进入home目录，当然也可以选择别的目录。
```
cd /home
```
新建工作目录：
```
mkdir vue
cd vue
mkdir web
cd web
mkdir cms
```
- 这里的cms项目部署在cms目录，其他项目部署在web目录下其他文件夹，自行创建。
赋予权限：
```
cd /home
chmod 777 vue/web
chmod 777 vue/web/*
```
这里赋予权限是防止写入文件时因权限不足而被拒绝。当然前面更改jenkins_user为root后，一般不会出现这种情况。也可以不执行次操作。

三、JDK安装

由于jdk1.8即将不被jenkins支持，所以JDK最好安装jdk11版本。

终端输入：

dnf install java-11-openjdk.x86_64

其他安装命令自行百度。

四、nginx安装与配置

一、安装

终端输入：

dnf install nginx

二、修改配置文件

nginx的配置文件在：/etc/nginx/nginx.conf，nginx.conf即为配置文件，修改该文件即可。

在etc/nginx目录下：
```
vim nginx.conf
```
- 注意，若使用ubuntu系统，nginx配置文件路径可能不在这，而且使用vim命令需要安装vim工具，并且使用vim命令时要加sudo，例如：
```
sudo vim nginx.conf
```
  这样才能修改保存nginx.conf文件。

具体修改：

user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    include /etc/nginx/conf.d/*.conf;
    #cms部署，监听默认80端口
    server {
        #端口监听
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _; 
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        #默认访问80端口时：
        location / {
                    root   /home/vue/web/cms/;                    
                    index  index.html index.htm;
                }
        #反向代理设置（示例）：
        location /api/ {
                    proxy_pass   http://127.0.0.1;
                }
        #错误code重定向
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
    #sph部署，监听9001端口
    server {
        #端口监听
        listen       9001;
        server_name  localhost;
        
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        #访问9001端口时：
        location / {
                    root   /home/vue/web/sph/;                 
                    index  index.html index.htm;
                }
        #反向代理设置（示例）：
        location /api/ {
                    proxy_pass   http://127.0.0.1;
                }
        #错误code重定向
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

}

以上文件仅供参考。
#为注释。
多个项目时，可以设置监听不同端口方式部署，也可以监听同一个端口，但定向不同项目目录去部署。
注意：user最好改为root。
反向代理注意定向路径和完整的地址。
配置文件极为敏感，注意格式。
修改配置文件建议使用webstorm或者VScode的SFTP远程工具进行编辑，这样更加友好。

三、启动

终端输入：

systemctl start nginx
systemctl enable nginx

若要关闭：
```
systemctl stop nginx
```

五、jenkins安装与配置

一、安装

此方法非用dnf安装，因为dnf没有相应jenkins安装包。故采用一下，其他方法也可以自行百度。

1、终端输入：

wget –O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat-stable/jenkins.repo

# 导入GPG密钥以确保您的软件合法
rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key

2、编辑文件：

vim /etc/yum.repos.d/jenkins.repo

此处注意可能需要sudo或安装vim工具。

在此文件添加：

[jenkins]

name=Jenkins-stable

baseurl=http://pkg.jenkins.io/redhat

gpgcheck=1

3、安装

dnf install jenkins

4、启动

systemctl start jenkins
systemctl enable jenkins

关闭命令：
```
systemctl stop jenkins
```
状态查看：
```
systemctl status jenkins
```

二、基本配置

访问主机IP:8080端口

进入jenkins面板，复制路径，在终端输入以下，获取密钥：
```
cat /var/lib/jenkins/secrets/initialAdminPassword
```
复制密钥，粘贴后，选择推荐安装，自动安装推荐的插件。
安装完成后，设置用户名，密码等信息。妥善保存用户名密码等信息，以后通过此信息登录jenkins管理面板。
进入面板后，选择系统管理>插件管理,搜索安装以下插件：
- Publish Over SSH
- Generic Webhook Trigger Plugin
- NodeJs
安装且重启后，进入系统管理>系统配置，找到SSH配置：
- Name：自定义，配置名
- hostName：服务器公网IP地址
- userName：主机名，如root，或ubuntu
- password：服务器登陆密码，（选择高级选项才跳出来）
之后点击test configuration 测试，如果显示success则成功。点击保存。
配置NodeJs
在系统管理>全局工具配置中：
选择合适版本后，点击保存。
新建任务，选择构建一个“自由风格”项目。

六、jenkins持续集成配置

1、新建任务

一般选择自由风格的项目：

2、源码管理

填写项目描述后，在源码管理中，选择：Git，并且

填写github仓库地址，如HTTPS地址
在Credentials选项，点击添加，选择jenkins，这一步是选择github账户信息，没有时，选择添加新建账户信息。
- 填写github用户名，和密码
- 当然密码也可以以token令牌形式填写。申请github令牌方法如下：
令牌显示一次性，注意保存和使用。
Branches to build，填写main，因为github默认分支由master改为了main，当然可以根据实际情况填写。

3、构建触发器

构建触发器设置。选择Generic Webhook Trigger，勾选即可，不用其他操作。

4、构建环境

选择Provide Node & npm bin/ folder to PATH，即NodeJs环境。并选择相应node版本：

5、构建

选择执行Shell，此步骤即为构建，并且需要编写相应执行命令。

编写执行命令：

pwd #当前位置
node -v #检查node环境
npm -v #检查npm版本

echo "开始构建..."

npm install #安装依赖
npm run build #执行构建，此命令需要与package.json里对应

echo "构建完成"
echo "开始部署..."

rm -rf /home/vue/web/cms/* #清空原站点
cp -rf ./dist/* /home/vue/web/cms/ #拷贝新站点

echo "部署完成"

以上命令仅为部署一个站点，可根据实际部署项目修改命令。

6、部署持续集成问题

以上在jenkins上部署项目，可能遇到各种问题。其中部分常见问题如SSH连接失败或者凭证错误等都可以网上找到解决方法。

但是，你可能会遇到一些不知所措的问题，且该问题很难找到解决方法，下面我罗列一些我遇到的问题和相应解决方法：

1、Git拉取失败

这种情况多数有两个原因：

项目地址错误。
内地主机网络环境差。

以上第一个原因，可以修改正确仓库地址解决。注意最好用HTTPS仓库地址。

至于第二个原因，可以换成海外云服务器，例如中国香港主机。当然也可以用Gitee上的项目，这样拉取代码基本不出错。

当然，也有可能是git工具出错，但这在Linux云服务器上不常见。

2、构建阶段卡死

很遗憾，我遇到这种情况。情况是执行构建时系统磁盘IO读取操作频繁且占用过高，导致系统卡死，外网无法访问服务器。且目前未知具体哪个问题引起。但我猜测可能以下原因：

服务器配置低，可能系统磁盘io读写速度真的不够，但可能性低。
NodeJs的Bug，导致构建时读取文件频繁，且占用大。
jenkins的Bug，导致磁盘io读写异常。

以上问题很难排查出来，因为每次卡死都只能重启服务器，导致无法获取logs文件和构建记录，当然有可能有logs。

鉴于以上情况，我个人建议不在较低配服务器上执行构建任务，但可以执行部署任务，何解？

我们可以在Gitee Go或者Github Action上执行任务，也可以在本地执行执行构建任务：

在Gitee Go或者Github Action执行持续集成任务，可在本博客下片文章介绍。本次以本地构建为主。

本地构建云端部署

在本地执行npm run build获得dist制品。
修改.gitignore文件，将/dist排除或注释。
执行git add .和git commit -m ''..."添加文件
git push到仓库。
在云端jenkins的构建的Shell命令中，删除npm install和npm run build相关代码。

这样，每次仓库上都有dist制品，而jenkins检测仓库变化时，自动把dist部署（具体视实际命令）。

七、多项目部署

在没有使用Docker情况下多项目部署相对比较容易。只要在nginx的配置文件下配置多个项目服务，例如：

多个项目对于不同端口。
多个项目同一端口，对应不同项目目录。

以上都可以实现多项目部署，至于在jenkins持续集成，可以：

新建多个任务，在构建阶段的shell命令上，编写输出不同目录（nginx上对于项目的目录），这样就能实现多项目部署了。

前端项目自动化部署

# jenkins+nginx自动化部署前端Vue项目

# 一、前言

# 二、目录配置

# 一、新建目录

# 三、JDK安装

# 四、nginx安装与配置

# 一、安装

# 二、修改配置文件

# 三、启动

# 五、jenkins安装与配置

# 一、安装

# 二、基本配置

# 六、jenkins持续集成配置

# 1、新建任务

# 2、源码管理

# 3、构建触发器

# 4、构建环境

# 5、构建

# 6、部署持续集成问题

# 1、Git拉取失败

# 2、构建阶段卡死

# 本地构建云端部署

# 七、多项目部署

jenkins+nginx自动化部署前端Vue项目

一、前言

二、目录配置

一、新建目录

三、JDK安装

四、nginx安装与配置

一、安装

二、修改配置文件

三、启动

五、jenkins安装与配置

一、安装

二、基本配置

六、jenkins持续集成配置

1、新建任务

2、源码管理

3、构建触发器

4、构建环境

5、构建

6、部署持续集成问题

1、Git拉取失败

2、构建阶段卡死

本地构建云端部署

七、多项目部署