coding 平台 vue項目持續內建到騰訊雲Linux伺服器

關鍵詞：coding Vue Docker

一、前言

為什麼我需要搞持續化內建？我先說一說我不使用持續內建前的使用場景：

1. 編寫好代碼代碼後，使用 npm build 編輯成一個dist 檔案夾
2. 打開 寶塔/ssh 連接配接，把dist變成一個壓縮包，然後上傳
3. 到指定目錄去解壓縮

這樣非常的耗費時間，而且容易出錯。經常不小心移動到了别的目錄，或者需要快速疊代的，經常一天好打好幾次包，這樣的效率就太低下了😅。

持續化內建化後的使用步驟：

1. 編寫到代碼代碼後，本地測試通過了。上傳到 git
2. 自動化處理 過幾分鐘就可以通路了

就是這麼的舒服，如果一個公司有多個項目，就更加需要如此了。

二、準備工作

1、注冊 coding

可以看到，開放的基礎功能都是免費的，不限成員數的。這比 **碼雲 **要更加的好。基本的注冊我不多介紹了，你根據指導來就行了。

2、coding 基本設定

1. 建立項目

   

2. 進入項目 -> 建立代碼倉庫

   

3. 導入一個示例項目到倉庫 vue-element-admin

三、coding 持續化內建設定

1、持續內建 建構計劃 建構計劃

2、選擇 Nodejs + Express + Docker

這是它為你建構的基本模版，功能做得很好，但是教程寫的确實不太好

3、建構計劃名稱（随便寫也沒關系，可以随便改）

4、選擇建構的倉庫

1. 安裝依賴 && 單元測試 （我推薦先關閉單元測試，先入門再說）

   

   

5、建構Docker 鏡像

6、在示例項目中編寫一個 Dockerfile 檔案;

是一個步驟中的 Dockerfile 檔案位置 指的就是這個檔案。如果Dockerfile檔案不在項目的根目錄下面呢？看圖說話

7、Dockerfile 檔案詳解 (記得根據自己的實際情況編寫)

# 設定依賴的基礎鏡像
FROM node:latest as admin-dev

# 設定工作目錄(相當于把你示例倉庫裡面的代碼複制到這個目錄下面)
WORKDIR /app

# 添加依賴
RUN npm install
# Dockerfile 比較特殊，每個指令都是一個獨立的運作空間。彼此間毫無關聯的（我先帶入門，想深入還得好好研究）
COPY . .
# 打包 （我的項目指令，打包是這個指令）
RUN npm run build:stage


# nginx
FROM nginx:latest
# 把項目檔案下的 default.conf (nginx的配置檔案) 替換掉鏡像内的
COPY default.conf /etc/nginx/conf.d/default.conf
# --from=admin-dev  可看第一行代碼 我把第一個鏡像起了一個别名 admin-dev
# 從上一個鏡像裡面複制已經打包好的 dist 檔案，到 /usr/share/nginx/html 目錄
COPY --from=admin-dev /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

           

8、編寫 default.conf 作為 Nginx 的配置檔案 （在項目的根目錄下建立）

server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
           

9、推送到 CODING Docker 制品庫， 沒有直接建立即可

10、配置部署到遠端服務

注： CODING 憑據錄入教程

11、不勾選，點選确定

四、設定運作前的環境變量

1、跳轉到內建計劃設定頁面

2、設定觸發規則

等會要把加入到示例項目的 Dockerfile & default.conf 檔案推送吧coding 的倉庫，就會自動觸發

3、跳轉到 制品庫，複制制品庫的登入名和密碼

先都複制好，等會配置有用

4、配置環境變量

五、儲存後 送出Git

送出git後會自動建構哦