Jenkins打包nodeJs项目，并部署在nginx上（实战）

短命女 2021-05-18 15:31 1040阅读 0赞

**背景：**

熟悉jenkins和nginx的基本配置使用

**前提：**

安装好Jenkins 、node、nginx

**步骤讲解：**

1.新建任务：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70][]

选择自由风格就行，并设置一个任务名（build-项目名、deploy-项目名等）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 2][]

点击项目进入，右侧configure(配置)，进入配置，

**设置普通选项（general）:**

这里就配置了项目描述和丢弃旧的构建选项

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 3][]

**源码管理（source code management）：**

这里用的是中文版git（码云），和git的配置一样，需要用到：项目版本库的url、认证凭据（登录的用户名密码）、build的版本分支（这里为master）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 4][]

源码管理除了这样设置以外，jenkins是无法连接到代码库的，因为我们输入的密码是明文的，不安全，需要进行加密，同时在代码库git上也要配置私钥，即ssh keys，代码库通过私钥解密密码来判断用户身份。

**github**配置ssh keys在settings中的ssh keys

**码云**上要配webhook和ssh keys，webhook是一种接口回调的技术。

**构建触发器（build triggers）：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 5][]

如果你要触发码云git的webhook回调，就选上（github hook trigger for GITScm polling ）

### 构建环境（build environment）： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 6][]

这里是nodejs构建环境，所以加入了nodejs环境，在这里建议装一个[NodeJS Plugin][]插件，可以帮助你在jenkins中写nodejs的脚本，在系统管理的插件管理中

**构建（build）：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 7][]

构建中你可以执行一个shell脚本，也可以直接调用已经写好的脚本执行（window系统是 批处理命令）。这里主要的命令是cnpm install、cnpm run build，后续我这里的操作是将build好的包发送到nginx服务器的某个目录下，然后重启nginx。（真实场景中还要通过ssh将包发送要要部署的另一台服务器上）

**构建后操作（Post Steps）：**

![20190724163541845.png][]

构建后操作你可以自定义功能，有些版本还会有构建前操作。

然后点击保存，应用。

点击立即构建，可以看控制台输出：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 8][]

这样包就到我们设置的指定位置了 /usr/local/nginx/webapp。

**下面看nginx的配置（nginx配置文件在conf的nginx.conf）：**

**我们要跳转的是build目录下的index.html，网上用很多是dist目录，这应该与react的版本有关**

![20190724164156882.png][]

worker_processes  4;
    
    events {
        worker_connections  1024;
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
    
        server {
            listen       8084; //nginx监听的端口号
            server_name  localhost;
    
            root /usr/local/nginx/webapp/test/build; //指定了根目录，即我们前面说的我们的启动html在build目录下的index.html
            index index.html index.htm;
    
            location / {     //全匹配到index页面
                 index  index.html index.htm; 
            }    
        }
    }

以上配置主要关注带注释的配置

然后启动nginx： nginx目录/nginx  -c  nginx.conf全路径 或如果已经启动则重启  nginx -s reload

启动成功后访问成功！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 9][]

以后有代码提交，只要jenkins一键打包就可以上线了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70]: /images/20210518/4311f2e5cc364840bbd09155cd0b2216.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 1]: /images/20210518/3b39b467a6a94281919e88c3ae32f10a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 2]: /images/20210518/75e143ad18ad4b949fde862bb5c4a3e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 3]: /images/20210518/7a007b0a8e8a472299d475893b936766.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 4]: /images/20210518/ff16ff3cb11549fb81143ff418d4d21b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 5]: /images/20210518/4ecd3ea870984620a30305c377d0afcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 6]: /images/20210518/31eaeee551404afe9490e998e51908e8.png
[NodeJS Plugin]: http://wiki.jenkins-ci.org/display/JENKINS/NodeJS+Plugin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 7]: /images/20210518/121ab006a1c54b1485711983956acd56.png
[20190724163541845.png]: /images/20210518/6706b6d8cf7a4aa3b27eaf703c48b78f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 8]: /images/20210518/9a5a461410f64b1998174a4b99e59bdf.png
[20190724164156882.png]: /images/20210518/c68ac611a0bd47a0a8122460a0a1ed1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70 9]: /images/20210518/50ce34efc7774cb2818d0d81f0f6711f.png