部署對比

手動部署

平時我們在上線一個新專案的時候，可能需要先執行打包指令，然后登錄服務器，將dist包丟到服務器nginx/html的檔案下，看似很簡單，但是當專案頻繁迭代，一直重復性的操作也是很浪費時間，

自動部署

當然使用自動部署的時候，當我們每次推代碼到倉庫的時候，后臺自動打包，同步nginx檔案，實作自動部署，我們只需要執行git push origin xx即可，想想是不是很香，

自動部署流程介紹

通過Jenkins和gitee倉庫打通,當我們往指定的分支push代碼后,會觸發webhook的鉤子，這個鉤子會像jenkins發送一個請求，會自動觸發Jenkins的任務. 通過Jenkins任務, 執行腳本,通過腳本自動打包,并將打包好的dist檔案自動更新到Nginx指定的目錄中,來達到前端自動化部署的目的，整個流程不是很復雜，也不是那么難以理解，但是要配置的東西比較多，下面就介紹如何實作前端自動化部署.

前期準備

• gitee倉庫
• 阿里云服務器一臺
• 遠程鏈接工具(xshell xftp)

環境:

• 阿里云服務器: macos 8.2
• 遠程鏈接工具：finalshell
• nginx: 1.10.3
• docker: 20.10.11
• docker-compose: 1.27.3
• nodejs: 14.9.0
• jenkins鏡像

1.安裝nginx環境

https://www.linuxidc.com/Linux/2016-09/134907.htm
安裝nginx請看上面這個鏈接的文章，本人也是全程按照上述操作執行，也是成功安裝，
nginx安裝包下載

2.安裝docker環境

1. 安裝docker

sudo yum install docker-ce

2. 啟動docker

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

3. 查看版本

docker -v

顯示docker版本號，代表安裝成功

3.安裝docker-compose

1. 訪問 https://github.com/docker/compose/releases GitHub 版本發行頁面
2. 下載 docker-compose-Linux-x86_64 檔案并上傳至服務器，然后執行如下命令將其移動到 /usr/local/bin，并改名為docker-compose
   docker-compose安裝包
3. 提升權限

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

4. 創建軟鏈

sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

5. 查看版本

docker-compose -v

顯示版本號，代表安裝成功

4.安裝jenkins環境

1. 安裝jenkins鏡像

docker pull jenkins/jenkins

2. 查看鏡像

docker images

5.撰寫docker-compose目錄

1. 在nginx根目錄的home檔案夾下新建compose 和 jenkins檔案夾,及其子檔案

+ compose
  - docker-compose.yml  // docker-compose執行檔案
+ jenkins
  - jenkins_home       // jenkins掛載卷

6.撰寫docker-compose.yml

version: '3'
services:                                      # 集合
  docker_jenkins:
    user: root                                 # 為了避免一些權限問題 在這我使用了root
    restart: always                            # 重啟方式
    image: jenkins/jenkins:lts                 # 指定服務所使用的鏡像 在這里我選擇了 LTS (長期支持)
    container_name: jenkins                    # 容器名稱
    ports:                                     # 對外暴露的埠定義
      - 8080:8080
      - 50000:50000
    volumes:                                   # 卷掛載路徑
      - /home/jenkins/jenkins_home/:/var/jenkins_home  # 這是我們一開始創建的目錄掛載到容器內的jenkins_home目錄
      - /var/run/docker.sock:/var/run/docker.sock
      - /usr/bin/docker:/usr/bin/docker                # 這是為了我們可以在容器內使用docker命令
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose
  docker_nginx:
    restart: always
    image: nginx
    container_name: nginx
    ports:
      - 8090:80
      - 80:80
      - 433:433
    volumes:
      - /home/nginx/conf.d/:/etc/nginx/conf.d
      - /home/webserver/static/jenkins/dist/:/usr/share/nginx/html

7.啟動docker-compose（創建容器）

回到compose目錄下，執行如下指令

docker-compose up -d

執行 docker ps 查看容器情況

在容器啟動后，如上圖所示代表成功，這個時候可以在瀏覽器輸入服務器ip:8080進入jenkins管理界面，

注意：密碼在 /home/jenkins/jenkins_home/secrets/initialAdiminPassword

輸入密碼之后下載jenkins插件，它會讓你注冊賬號密碼，可以直接跳過，下次登錄jenkins管理頁面的時候，默認賬號為admin，密碼就是/home/jenkins/jenkins_home/secrets/initialAdiminPassword里的密碼

安裝成功進入下面這個界面

8. 安裝jenkins插件

• 安裝 Publish Over SSH 作用: 將構建后的編譯產出發布到服務器
• 安裝Generic Webhook Trigger插件 實作Jenkins+WebHooks持續集成
• 安裝nodejs插件
  

9.全域配置ssh serve

配置完之后點擊test，回傳success代表配置成功，如果報錯根據報錯結果查看自己是不是服務器地址還是什么寫錯了

10. 全域工具配置 node.js

11. jenkins 和 gitee 集成

11.1 在服務器生成ssh秘鑰，配置用于免密登錄

ssh-keygen -t rsa //生成ssh秘鑰命令

我生成的秘鑰在/root/.ssh/(不知道你們在哪，會有提示，進入對應檔案夾即可)
id_rsa: 私鑰，需放在jenkins的憑證里
id_rsa.pub: 公鑰， 需放在gitee里
authorized_keys：就是為了讓兩個 Linux 機器之間使用 ssh 不需要用戶名和密碼，采用了數字簽名 RSA 或者 DSA 來完成這個操作，

11.2 將生成的私鑰 id_rsa添加到jenkins憑據中

11.3 登陸gitee，在gitee設定中配置id_rsa.pub公鑰

12. 在jenkins里面新建專案

12.1 jenkens首頁點擊新建任務，創建一個任務

12.2 原始碼管理

12.3 構建觸發器

12.3.1 方式選擇Generic Webhook Trigger（一開始下載的插件）

12.3.2 配置token

12.3.3 關聯gitee

12.4 構建環境

選擇事先在全域工具中配置的node.js

12.5 構建

12.5.1 構建選擇執行shell

12.5.2 將編譯產物打tar包，留作構建后操作使用

node -v &&
npm -v &&
pwd &&
echo '構建的版本號:'${BUILD_NUMBER}
npm install &&
npm install @vue/cli-service &&
npm run build:prod &&
tar -zcvf dist.tar ./dist
echo '構建完成'

12.6 構建后操作

12.6.1 將tar包放到服務器指定目錄

12.6.2 解壓tar包，將物料放置在nginx作業目錄下

13. 寫在最后

現在只需要向gitee的master分支推送代碼，然后等待jenkins的腳本跑完，訪問http:xx.xx.xx.xx:9091即可，