> 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实现前端自动化部署

这是一个前端 vue 项目，不考虑代码回滚，代码版本控制的问题

### 参考

* <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="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2Flyi0LBf8nNWwVT7Co9Kf%2Fimage.png?alt=media&amp;token=360e7e3d-4ea9-40aa-9e40-4b4738fb7d5e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2FdTK4DvB7kiVlkINv2vTs%2Fimage.png?alt=media&amp;token=0831ad71-d3ff-432a-a032-bbbe10f13bba" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2FdZQMwuNZhMYBOXHkUzoL%2Fimage.png?alt=media&amp;token=5abc1e75-8fb7-458c-af61-d05caa26ddef" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2F57hJklntLH6ERjjuUOlN%2Fimage.png?alt=media&amp;token=37d7c51d-8225-4bb1-be11-03177f640c9b" 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="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2FSSe3Y5qvibBQxYxES8Pz%2Fimage.png?alt=media&amp;token=54d65a89-837d-4f77-b8e9-e617b2d2b0b9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2FvPVdHUNOnszTRm6DOyQ5%2Fimage.png?alt=media&amp;token=176cb904-5a0d-4b72-8f0c-4018fd18934e" alt=""><figcaption></figcaption></figure>

### 新建项目

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

<figure><img src="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2Fw4wu1vqMuikU0WBykYfB%2Fimage.png?alt=media&amp;token=d72df70a-23a6-40ba-853e-96c664381590" alt=""><figcaption></figcaption></figure>

####

### 源码管理

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

<figure><img src="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2F3AxLM9I1JFnBypAhDTXn%2Fimage.png?alt=media&amp;token=41430fbd-f56f-4495-95d8-1ac2e37bf9b1" 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="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2FmFFVoeZRfRmJX6bh120D%2Fimage.png?alt=media&amp;token=9cec469c-759b-4f09-b988-0ca31b450c6a" 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="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2FmH7nuJyKDQpIBlWg9PEA%2Fimage.png?alt=media&amp;token=0645422d-af03-492b-8695-2a8508d2a49c" 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="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2FoMnpT9poCL9srsgW9Lfk%2Fimage.png?alt=media&amp;token=32e09510-7341-40ba-9e1d-914f19a10760" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2FCzF5dmwII554pcfAIY00%2Fimage.png?alt=media&amp;token=7c06c61c-a0d2-4c32-9bfa-9a7e4d64f2c4" alt=""><figcaption></figcaption></figure>

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

<br>

<figure><img src="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2FULeKHW49VyEOryHsaFOm%2Fimage.png?alt=media&amp;token=9c62a3de-0b6f-4c19-bd12-04899db6e755" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2134947750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvILwbD2PrkBCkSitM3m4%2Fuploads%2F7Nr5GdIdVUjNFao5cB12%2Fimage.png?alt=media&amp;token=25f5ccb0-badb-46b4-921f-a7d80b9b2b05" 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上手动构建，