jenkins部署nuxt项目，pm2开启服务端渲染

末蓝、 2021-09-07 06:22 1087阅读 0赞

流程：

1、使用nuxt.js开发服务端渲染项目，并把最新代码发布到代码管理仓库，gitlab或者码云。

2、进入jenkins

3、新建jenkins服务，选择相关设置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2][]

选择node js进行安装，如果没有需要在jenkisn 插件面板安装nodejs

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3][]

输入shell构建命令

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4][]

以下是命令的具体说明，pm2需要下载安装；node\_modules这个目录还是需要的，不要项目运行不了（有点坑，毕竟包变得很大了）。

#!/bin/bash -ilex
    node -v
    #进入当前项目jenkins工作空间，此时会把仓库代码拉取到这里。
    cd $WORKSPACE
    #因为node-sass很难下载，所以加上淘宝源的方式
    npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
    # 因为root权限不能这样执行，所以加上--unsafe-perm=true --allow-root，如果可以下载就不加
    npm install --registry=https://registry.npm.taobao.org --unsafe-perm=true --allow-root
    #执行 nuxt package.json中的"build": "nuxt build"，命令，开始构建生成.nuxt目录
    npm run build
    # 先清空原来项目所有文件，避免有缓存数据
    #.nuxt是隐藏文件，删除
    rm /app/nginx/finance-ssr/.nuxt -rf
    rm  /app/nginx/finance-ssr/* -rf
    # 复制 .nuxt目录，static目录，node_modules目录（不要还不行），nuxt.config.js文件和package.json文件
    cp -r .nuxt /app/nginx/finance-ssr
    cp -r static /app/nginx/finance-ssr
    cp -r node_modules /app/nginx/finance-ssr
    cp nuxt.config.js package.json /app/nginx/finance-ssr
    # 复制好以上文件后，进入项目运行目录，我是放在 /app/nginx/finance-ssr目录下
    cd /app/nginx/finance-ssr
    # 需要先安装pm2，使用pm2的delete命令删除原来已经在运行的服务。
    pm2 delete -s "finance-ssr"
    #使用pm2 命令执行 npm run start,并为当前服务命名
    pm2 start npm --name "finance-ssr" -- run start

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5][]

4、nginx做一下配置

进入nginx配置目录，加上如下配置，监听8080端口（或其他端口，根据项目定），server\_name  localhost，根据实际域名填写，我现在是本地测试，所以写了localhost.

proxy\_pass   http://127.0.0.1:3000; 为nuxt启动的node服务，如果使用的是阿里云服务器，记得配置安全策略，3000和8080端口打开。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 6][]

server {
              listen       8080;
              server_name  localhost;
              location / {
               proxy_redirect off;
               proxy_set_header Host               $host;
               proxy_set_header X-Real-IP          $remote_addr;
               proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto  $scheme;
               proxy_read_timeout          1m;
               proxy_connect_timeout       1m;
               proxy_pass                          http://127.0.0.1:3000; # 监听node 3000端口即正式环境
              }
           }

5、最后，服务器公网  ip+端口访问项目。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210813/b4e7f229b1cd40209052f0746221de3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20210813/7d88bc307eb0463e88bd600bdc1e3b3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20210813/4a12a6eb0bb0430588fec5e97fc0506c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20210813/1e284058ea1441c580fb1373fa05fa11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4]: /images/20210813/864be7f3edfb482fbb629db533a3153a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5]: /images/20210813/d23de5eb953f4be6b50a22cbf9cec5a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 6]: /images/20210813/378303ee43e349d98b5b123540577cfd.png