# 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上手动构建，


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://close.gitbook.io/yun-wei-bi-ji/centos/cicd/docker+nginx+jenkins+gitlab-shi-xian-qian-duan-zi-dong-hua-bu-shu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.