[Gitlab]CI-流程建置

 

CI(Continuous Integration)是Devops的軟體開發流程，主要針對程式碼變更後的自動建置和測試之後，定期將變更合併置主要Repository，CI的關鍵目標是能更快發現和解決問題、改善軟體品質還有減少驗證和釋出軟體更新所需的時間。

此篇文章將教你如何建立Gitlab CI流程

環境說明：

• Gitlab (self-managed)
• Gitlab Runner
• Docker (windows)

首先在Docker上安裝Gitlab-Runner，輸入以下指令安裝Docker

[React]環境部署

透過以下的簡易步驟，來部署React網站

以下依照不同的Server列出說明

項次	部署位置	地端/雲端	部署方式	說明
1	Windows Server(iis)	地	手動	本地VM，測試環境或者待管Server時會使用
2	Azure	雲	手動	透過VS Code或FTP去部署
3	Azure	雲	自動	透過CI/CD方式去部署

• Window Server(iis)

1.先設定iis站台的URL Rewrite (SPA網站都可參考此設定)

//Web.config

更多資訊可參考保哥此篇文章說明

2.使用Terminal執行語法npm run build，以產生實體檔(檔案預設放在dist

3.手動搬移檔案至Server

•  Azure (手動上傳)

手動上傳還可區分成VS Code部署以及FTP部署兩種

• VS Code部署

1. 安裝Azure App Service Extension
   
2. 使用語法npm run build產生實體檔(檔案預設放在dist資料夾)
   
3. 使用滑鼠右鍵對選dist資料夾中的Deploy to Web App…
   
4.  點選Sign in Azure
   
5. 選擇登入Azure帳號
   
6. 登入成功後選擇建立Azure App Service段落所建立App Service
   
7. 點選Deploy以部署到 App Service
   
8. 佈署成功可點選右下角的Browse WebSite查看(須過一段時間才能正常顯示)

• FTP部署

1. 使用語法npm run build產生實體檔(檔案預設放在dist資料夾)
2. 從Azure的App Service頁面點選左側的Deployment center。
3.  點選FTP credentials就可以看到FTP的連線設定
4. 使用FTP工具(例.Filezilla)連線並將欲部署的檔案更新上去。

•  Azure (CI/CD)

因CI/CD會被SourceControl的不同影響，待有實作時再回補說明

 

[React] 開發環境建立

  

依據以下步驟建立React開發環境，本篇文章使用的是vite來建立專案，而不是之前介紹的CRA。

先新建一個專案資料夾，並透過VS Code開啟

用Ctrl+`來開啟Terminal，並輸入以下Command

npm create vite@latest

再根據專案選項依序點選

接著用OpenFolder的方式開啟剛剛建立的專案資料夾

用Ctrl+`開啟Terminal，輸入以下指令安裝package.json內的相依套件

npm install

 安裝完成後，再輸入以下指令就可以偵錯網站

npm run dev

點擊網址，就可以看到網頁囉