> For the complete documentation index, see [llms.txt](https://close.gitbook.io/yun-wei-bi-ji/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://close.gitbook.io/yun-wei-bi-ji/centos/cicd/docker+nginx+jenkins+gitlab-shi-xian-qian-duan-zi-dong-hua-bu-shu.md).

# Docker+Nginx+Jenkins+GitLab实现前端自动化部署

### 参考

* <https://juejin.cn/post/6844904111826010125#heading-11>
* <https://juejin.cn/post/6869736425953165319#heading-4>
* <https://www.cnblogs.com/zhongxinWang/p/14473241.html>

### 安装(略)

### 安装Jenkins插件

* gitlab 代码仓库
* Publish Over SSH SSH使用
* nodejs Node JS 前端项目
* Timestamper 输出时间
* AnsiColor 输出颜色

**jenkins中 Manage Plugins 搜索以下插件`gitlab`、`Publish Over SSH`、`nodejs`并安装。**

<figure><img src="/files/wFRHOXlrnJhJWTKmHt3N" alt=""><figcaption></figcaption></figure>

**安装完成后配置 nodejs环境 和 ssh参数 在首页选择 `global tool Configuration` > `NodeJS`选择自动安装和对应的nodejs版本号，选择成功后点击保存。**

<figure><img src="/files/nJJoWWf9E8KDA1z4LVGr" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/OxVJkmVlAYRAgvTN0ncL" alt=""><figcaption></figcaption></figure>

**配置ssh信息，Manage Jenkins>configure System填写服务器的相关信息**

<figure><img src="/files/bF83IyBi598FUlf1qzLV" alt=""><figcaption></figcaption></figure>

### 关联Jenkins和gitlab

\
**凭据管理**Credentials Binding

```bash
# 进入 jenkins 容器
ssh-keygen -m PEM -t rsa -b 4096

# 进入 ~/.ssh目录

　　id_rsa私钥文件 (jenkins上)

　　　　系统管理--->Manage Credentials--->全局--->添加凭据--->ssh username with private key

　　　　　　　id: 取个名称，删除后，重新建，不用重新改流水线脚本 

　　　　　　　username: root

　　　　　　　private key: id_rsa

　　id_rsa.pub公钥文件 (gitlab上)

　　　　拷贝到 gitlab 的ssh key
```

<figure><img src="/files/oxfhhHJw96nT5sw8WwOw" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/XPVSbCSIIeVW5IxrgO8N" alt=""><figcaption></figcaption></figure>

### 新建项目

**准备完毕后，开始新建一个任务，选择`新建item`>`freestyle project`构建一个自由风格的项目**

<figure><img src="/files/pQ5goFNvJ15cV8MWC5AX" alt=""><figcaption></figcaption></figure>

####

### 源码管理

**新建完成后，在`源码管理`中配置git信息，`credentials`选择我们刚刚添加的凭证。**

<figure><img src="/files/eqSDY0ACdKRFBqPMFtWq" alt=""><figcaption></figcaption></figure>

### 构建触发器

在<mark style="color:purple;">`构建触发器中`</mark>选择我们触发构建的时机，你可以选择队友的钩子，比如<mark style="color:purple;">`push`</mark>代码的时候，<mark style="color:purple;">`Merge Request`</mark>的时候

<figure><img src="/files/2Ht3DZUzF8DLLNJr5ZcG" alt=""><figcaption></figcaption></figure>

点击<mark style="color:purple;">`高级选项`</mark>找到<mark style="color:purple;">`secret token`</mark><mark style="color:purple;">></mark><mark style="color:purple;">`Generate`</mark>生成一个token值

<figure><img src="/files/2TcSFEw0PnJB2RuLfoyj" alt=""><figcaption></figcaption></figure>

配置成功后，还需要到<mark style="color:purple;">`gitlab`</mark>中增加对应的钩子。记下上图的<mark style="color:purple;">`webhookURL`</mark>（红线框出）和<mark style="color:purple;">`secret token`</mark>值，到gitlab中进行配置。

<figure><img src="/files/yDoRMbM7wQkRLuFTVOPF" alt=""><figcaption></figcaption></figure>

> <mark style="color:red;">**注意：**</mark><mark style="color:green;background-color:yellow;">**Jenkins 与 Gitlab  是在同一个服务器上，需要在 Gitlab 添加下出站信任**</mark>

<figure><img src="/files/MhBYjBSMkxZT743dmsB3" alt=""><figcaption></figcaption></figure>

### 构建环境及构建配置

<br>

<figure><img src="/files/gcRy1gyQpHEXMYl32UVN" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ZsYhWNY60blp9Vt29rnW" alt=""><figcaption></figcaption></figure>

完成上述配置后，<mark style="color:orange;">Jenkins</mark> 就和 <mark style="color:orange;">Gitlab</mark> 关联起来，在本地 <mark style="color:orange;">push</mark> 文件到 <mark style="color:orange;">Gitlab</mark> 时，就会自动构建，访问远程地址就可以访问修改完成后的项目，同样也可以在Jenkins上手动构建，