從零開始Docker+Nginx+Jenkins實現前端自動化部署

前言

主要是覺得之前寫的webhooks太蠢了，會有宕機事件，更新包的時候，網站會打不開，詳情可以看我這篇文章從零開始通過webhooks實現前端自動化。

現在不是都在用docker么，然后就找找看有沒有docker，nginx自動化的，更新完代碼直接就發布的東西，也不會有宕機時間，所以就整了一個這么Docker+Nginx+Jenkins的自動化部署，算是減輕手動的時間吧，借鑒了幾位大佬的文章，自己摸索着搞出來了，但是也有不同的地方，所以干脆自己寫個資料，省的以后再G了，方便一點

裝Docker環境

1. 安裝Docker的依賴庫。

yum install -y yum-utils device-mapper-persistent-data lvm2

2. 添加Docker CE的軟件源信息。

sudo yum-config-manager --add-repo \ https://download.docker.com/linux/centos/docker-ce.repo

3. 安裝Docker CE。

 sudo yum install docker-ce

4. 啟動Docker服務。

sudo systemctl enable docker // 設置開機自啟
sudo systemctl start docker //  啟動docker

Docker安裝docker-compose

方式一 | curl

docker-compose 是用於定義和運行多容器 Docker 應用程序的工具。通過 Compose，您可以使用 YML 文件來配置應用程序需要的所有服務。然后，使用一個命令，就可以從 YML 文件配置中創建並啟動所有服務。下載docker-compose:

sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

安裝完成后提升權限:

sudo chmod +x /usr/local/bin/docker-compose

方式二 | yum

主要是url死活沒下載成功，沒辦法只能通過yum裝了

yum install -y docker-compose

查找安裝目錄

rpm -ql docker-compose

一樣的提權

sudo chmod +x /usr/bin/docker-compose

驗證安裝成功

輸入指令

docker-compose -v

Docker安裝Nginx和Jenkins服務

安裝Nginx和Jenkins

docker鏡像拉取nginx和jenkins環境命令如下：

docker pull nginx:stable-alpine
docker pull jenkins/jenkins:lts 

安裝完成后執行docker images可以清晰的看到當前docker下存在的鏡像。

Nginx和Jenkins目錄編寫

為了便於管理，在docker下我們將Nginx和Jenkins聚集到一個文件目錄之中。目錄結構如下：

+ compose
  - docker-compose.yml  // docker-compose執行文件
+ nginx 
  + conf.d
    - default.conf        // nginx配置文件
+ jenkins
   - jenkins_home       // jenkins掛載卷
+ webserver 
   -static              //存放前端打包后的dist文件

webserver目錄屬於后期生成暫不討論，需要手動創建的是compose,nginx和Jenkins目錄及其下屬文件，其中最主要的是docker-compose.yml文件和nginx.conf文件的配置。

這里的四個文件夾，我是放在opt下面的web-auto文件夾

docker-compose.yml文件配置

在compose文件夾下創建docker-compose文件

vim docker-compose.yml

內容如下

version: '3.3'
services:                                      # 集合
  docker_jenkins:
    user: root                                 # 為了避免一些權限問題 在這我使用了root
    restart: always                            # 重啟方式
    image: jenkins/jenkins:lts                 # 指定服務所使用的鏡像 在這里我選擇了 LTS (長期支持)
    container_name: jenkins                    # 容器名稱
    ports:                                     # 對外暴露的端口定義
      - 8077:8080                              # 外部訪問端口：容器端口
      - 50000:50000                            # 外部訪問端口：容器端口
    volumes:                                   # 卷掛載路徑
      - /opt/web-auto/jenkins/jenkins_home/:/var/jenkins_home  # 服務器的jenkins_home環境地址:容器內環境地址(復制內容到容器內，“：”是間隔符，左邊是外部，右邊是容器內)
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/bin/docker:/usr/bin/docker                # 這是為了我們可以在容器內使用docker命令
      - /usr/bin/docker-compose:/usr/local/bin/docker-compose
  docker_nginx:
    restart: always
    image: nginx:stable-alpine                 # 下載穩定版nginx
    container_name: nginx
    ports:
      - 7070:80                                # 外部訪問端口：容器內端端口
    volumes:
      - /opt/web-auto/nginx/conf.d/:/etc/nginx/conf.d                        # 服務器文件：容器內文件(復制外部配置文件到容器內，“：”是間隔符，左邊是外部，右邊是容器內)
      - /opt/web-auto/webserver/static/jenkins/dist/:/usr/share/nginx/html/  # 同上

default.conf文件配置

在conf.d文件夾下創建default.conf文件

vim default.conf

內容如下

server{
  listen  80;
  server_name localhost;
  root /usr/share/nginx/html;
  index index.html index.htm;
  
  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

啟動項目

上述兩個文件配置完成之后，需要進入compose目錄下面輸入以下命令，進行環境的啟動：

docker-compose up -d
docker-compose stop //停止nginx和jenkins 兩者結合可以進行重啟

上述兩個文件配置完成之后，需要進入/home/compose目錄下面輸入以下命令，進行環境的啟動：

docker-compose up -d
docker-compose stop //停止nginx和jenkins 兩者結合可以進行重啟

輸入docker ps -a 查看容器的情況：

狀態顯示up，后面的端口號顯示如上為正常狀態。在瀏覽器輸入你雲服務器的公網IP加上8077的端口號就可以顯示如下頁面：

注意點：

在此步驟之前，切記一定要開放雲服務器的安全組，就是之前設定的50000，8077，7070端口

上圖所需要的密碼就是我們之前映射的服務器地址，就是在在docker-compose.yml中的volumes

具體的就是/opt/web-auto/jenkins/jenkins_home/secrets/initAdminPassword文件

安裝Jenkins插件

選擇推薦安裝就行，然后等待安裝結束

安裝插件

進入插件配置

jenkins中Manage Plugins搜索以下插件gitee、Publish Over SSH、nodejs並安裝

安裝完成后配置nodejs環境和ssh參數 在首頁選擇global tool Configuration

配置插件-nodejs

NodeJS | 選擇自動安裝和對應的nodejs版本號，選擇成功后點擊保存。

配置插件-Git

Git | 選擇自動安裝和對應的git版本號，選擇成功后點擊保存。

這里需要安裝git，我這里是通過指令安裝的git

yum -y install git

查看版本號

git --version

查看git安裝位置

whcih git

安裝完成后配置git環境

配置ssh信息

Manage Jenkins>configure System填寫服務器的相關信息

關聯Jenkins和gitee

生成密鑰

在根目錄下執行一下命令：

ssh-keygen -t rsa
復制代碼

一般默認兩次回車，如下圖所示：

添加ssh憑證

使用cd ~/.ssh查看生成的文件。將生成的密鑰id_rsa復制粘貼到jenkins中的憑證

添加git憑證

登陸碼雲，配置id_rsa.pub公鑰

新建項目

准備完畢后，開始新建一個任務，選擇新建item>freestyle project構建一個自由風格的項目。

源碼管理

新建完成后，在源碼管理中配置git信息，credentials選擇我們剛剛添加的git憑證，別選錯了

構建觸發器

在構建觸發器中選擇我們觸發構建的時機，你可以選擇隊友的鈎子，比如push代碼的時候，Merge Request的時候

往下拉，點擊生成，生成一個token值

配置成功后，還需要到碼雲中增加對應的鈎子。

上圖紅線划的地址就是webhook中對應的地址，生成的密碼就是webhook密碼

構建環境及構建配置

配置shell命令

完成上述配置后，jenkins就和gitee關聯起來，在本地push文件時，就會自動構建，訪問雲服務器的公網IP地址就可以訪問修改完成后的項目，同樣也可以在Jenkins上手動構建，如圖所示：

檢查結果

更新倉庫的master分支，然后進去nginx的代理ip地址

失敗處理

按着教程走也會出錯，沒辦法自己找了改吧，切記百度，和谷歌，真的有用，搜報錯關鍵詞就行

參考資料

Docker+Nginx+Jenkins實現前端自動化部署

jenkins 無法連接倉庫

Jenkins中連接Git倉庫時提示:無法連接

Docker安裝Jenkins及配置詳細教程