前端项目自动化一键部署，教你一键下班

Tecode
3,043 阅读6分钟

前言

程序员忙碌了两个星期结束了开发任务，开始测试环节，准备上线。测试中我们要修改bug修改后需要部署，如果每次修改完成以后需要登录服务器或者手动部署一次会很麻烦。频繁操作会把程序员累坏的，今天介绍一下自动化部署应该怎样实现。

准备工作

首先准备一个前端项目我的项目是一个用Vue写的项目，自动化部署的工具Jenkins。准备一台Linux系统的服务器，以下工作都是在Linux服务器上完成的，安装nginx服务器。

如何让node服务在后台运行

这里我们使用pm2后台挂起node服务，同时可以监听node服务报错信息收集日志。

项目打包npm run build

vue-admin项目会构建服务端和客户端给出打包的产物，根据需求可以调整使用build:client或build:server，打包成功以后我们就可以部署项目了，package.json项目配置了npm satrt命令启动服务，但是不能在后台运行我们需要修改一下配置，配置成pm2后台运行。

haoxuan@haoxuandeiMac vue-admin % npm run build

> aming-project@ build /Users/haoxuan/Work/vue-admin
> rimraf dist && npm run build:client && npm run build:server


> aming-project@ build:client /Users/haoxuan/Work/vue-admin
> cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules

 95% emittingTotal precache size is about 2.19 MB for 14 resources.                      
Hash: 5769023a41b07fe5b986
Version: webpack 2.6.1
vue-ssr-server-bundle.json  167 kB          [emitted]

pm2配置后台启动服务

安装pm2

yarn add pm2
或者
npm install pm2

配置pm2.config.js

配置node服务启动的端口号、服务名称、日志保存的位置、环境变量，运行时如需其他的配置可以根据需求增加。

module.exports = {
  apps: [
    {
      name: 'vue_admin',
      script: './server.js',
      cwd: './', // 当前工作空间
      watch: [
        // 启动的时候监听文件夹内容的改变
        'build',
        'dist'
      ],
      ignore_watch: [
        // 忽略监听的文件夹
        'node_modules',
        'logs',
      ],
      instances: 1,  // start 2 instances
      node_args: '--harmony',
      env: {
        NODE_ENV: 'production',
        PORT: 3763,
        DOMAIN: 'https://admin.soscoon.com'
      },
      out_file: './logs/out.log', // normal log
      error_file: './logs/err.log', // error log
      merge_logs: true,
      log_date_format: 'YYYY-MM-DD HH:mm Z' // date format
    }
  ]
};

配置package.json

配置npm start启动后台运行项目并且加以监控，npm stop关闭指定的服务。

  "scripts": {
    "dev": "node server",
    "start": "pm2 start pm2.config.js",
    "stop": "pm2 stop vue_admin",
    "build": "rimraf dist && npm run build:client && npm run build:server",
    "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
    "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
  }

到这里我们的前端项目已经完成了部署的配置，手动部署已经完成了，大概的流程是：

git clone https://github.com/Tecode/vue-admin.git // 拉取项目
cd vue-admin                                      // 进入文件夹
yarn                                              // 拉取依赖
npm run build                                     // 构建项目
npm start                                         // 启动后台运行

访问http://localhost:3763 端口号是

配置项目自动化构建

在这里我们要使用的工具是jenkins，以下讲解默认你已经在服务器安装了jenkins。

新建任务

新建任务选择构建自由风格化的任务。

image.png

配置需要构建的项目地址

我已经将项目放到了GitHub上，如果是其他的平台更换地址就可以。项目拉取是不需要授权的所有不需要配置凭证，如果项目是私有的点击添加就可以添加凭证。

image.png

配置构建的shell脚本

配置脚本构建项目然后启动服务，这里我们不需要去拉取代码，前一个步骤配置了项目地址在外面构建时会自动拉取代码到服务器。

我的服务器是Linux服务器所以我使用shell脚本构建项目，Windows服务器参考批处理命令。配置完成以后就可以点击保存了。

echo '开始构建项目'
node -v
yarn
npm run build
npm start
echo '项目构建完成'

手动构建

保存配置以后会跳转到项目哪，可以看到立即构建的按钮，点击就可以立即构建项目。

构建时控制台输出

Started by user xm
Running as SYSTEM
Building in workspace /var/lib/jenkins/workspace/vue-admin
The recommended git tool is: NONE
No credentials specified
 > git rev-parse --resolve-git-dir /var/lib/jenkins/workspace/vue-admin/.git # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.url https://github.com/Tecode/vue-admin.git # timeout=10
Fetching upstream changes from https://github.com/Tecode/vue-admin.git
 > git --version # timeout=10
 > git --version # 'git version 2.27.0'
 > git fetch --tags --force --progress -- https://github.com/Tecode/vue-admin.git +refs/heads/*:refs/remotes/origin/* # timeout=10
 > git rev-parse refs/remotes/origin/master^{commit} # timeout=10
Checking out Revision db4054a9a67aeda1ada54e2ea1e2cc5e3cf1cd56 (refs/remotes/origin/master)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f db4054a9a67aeda1ada54e2ea1e2cc5e3cf1cd56 # timeout=10
Commit message: "配置pm2运行项目"
 > git rev-list --no-walk db4054a9a67aeda1ada54e2ea1e2cc5e3cf1cd56 # timeout=10
[vue-admin] $ /bin/sh -xe /tmp/jenkins8066741655429861045.sh
+ echo 开始构建项目
开始构建项目
+ node -v
v16.3.0
+ yarn
yarn install v1.22.5
[1/5] Validating package.json...
[2/5] Resolving packages...
success Already up-to-date.
Done in 0.51s.
+ npm run build

> build
> rimraf dist && npm run build:client && npm run build:server


> build:client
> cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules
...
Version: webpack 2.6.1
Time: 6079ms
                     Asset    Size  Chunks             Chunk Names
vue-ssr-server-bundle.json  167 kB          [emitted]  
+ npm start

> start
> pm2 start pm2.config.js


>>>> In-memory PM2 is out-of-date, do:
>>>> $ pm2 update
In memory PM2 version: 5.1.0
Local PM2 version: 5.1.1

[PM2] Applying action restartProcessId on app [vue_admin](ids: [ 1 ])
[PM2] [vue_admin](1) ✓
┌─────┬──────────────────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id  │ name                         │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├─────┼──────────────────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0   │ front_end_manager_product    │ default     │ 1.0.0   │ cluster │ 944483   │ 36D    │ 0    │ online    │ 0%       │ 71.0mb   │ root     │ enabled  │
│ 1   │ vue_admin                    │ default     │ N/A     │ cluster │ 2191825  │ 0s     │ 0    │ online    │ 0%       │ 31.8mb   │ root     │ enabled  │
└─────┴──────────────────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
[PM2][WARN] Current process list is not synchronized with saved list. Type 'pm2 save' to synchronize.
+ echo 项目构建完成
项目构建完成
Finished: SUCCESS

构建完成以后我们可以看到pm2服务列表已经了vue_admin项目在运行说明已经成功部署项目了。我们可以使用服务器的IP地址直接加上端口号访问到网站。

注意：购买的服务器需要去后台的安全规则修改开放的端口，不然网站是无法访问的。

IP地址访问网站 http://47.108.210.200:3763/

我使用的是阿里云的服务器，为了服务器的安全默认情况下只有80端口才是可以直接访问的，其它端口需要开放需要到购买服务器的后台配置。

image.png

配置域名

为了方便访问的用户记住我们的网站，我们需要配置一个域名。在这里我配置域名叫vue.soscoon.com的二级域名。

配置二级域名

首先，需要购买了域名并且已经备案成功。进入后台点击域名-》解析-》添加记录，二级域名添加如下图所示,点击保存我们就可以使用这个域名了。现在直接访问是不能访问到我们的网站的，我们需要去服务器上通过nginx代理到这个域名上。

通过nginx将项目代理到域名

如果使用nginx服务器使用其它服务器也是可以的，能够将端口代理到域名上就可以了，这里主要讲nginx的配置。

进入nginx配置文件夹新建vue_admin.conf，配置完成sudo nginx -s reload重新加载配置文件，访问vue.soscoon.com，到这里我们的自动化部署就完成了。

server {

  server_name  vue.soscoon.com;

  location / {
      proxy_buffers 8 1024k;
      proxy_buffer_size 1024k;
      proxy_pass      http://localhost:3763/;
  }

  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
      root   /usr/share/nginx/html;
  }

}

到这里我们就完成了代码的自动化部署，更新代码只需要上传到仓库然后点击构建就可以完成部署。

avatar
文章
阅读
粉丝