[React & .Net Core]環境佈署

 

此篇主要說明如何佈署至測試以及正式環境，範例程式碼可參考這裡。

此次佈署的教學先以Windows IIS以及Azure App Services來做教學，且需要搭配Visual Studio的publish功能，使用Scripts的方式就後續有使用VS Code開發時再做說明。

1.Window IIS

前言：

因有些WebForm、WebService等等舊專案仍會用到，所以現有客戶的測試或正式環境都會是Windows Server，但未來如果升級.Net Core就可不設限。

環境準備：

(1)安裝.Net 6 Runtime(傳送門)

(2)安裝Node.js(傳送門，版本選擇當下建議的下載即可)

佈署步驟：

先對專案點右鍵，再點"Publish..."

點選Folder方式(如果有權限可以直接連到IIS，也可選擇WebServer)

再來輸入發佈位置(也可以直接輸入網路磁碟路徑)，先用預設就好，再點選"Finish"

就將發佈檔設定好了，實體檔案會在Properties/PublishProfiles內，現在只要點選"Publish"就可發佈至設定的資料夾內，檔案結構如圖二

圖一

圖二

接下來就將這些檔案放到IIS站台對應的資料夾內就OK囉。

2.Azure App Service

前言：

雲端的服務越來越完善且簡單設置，當然要有雲端的教學阿!

環境準備：

1.Azure 帳號開一個App Service(建立步驟可直接上網查，有很多教學資源)

佈署方式可以分成兩種，分別是手動佈署和自動佈署：

而手動佈署也可以分成兩種，一種是用VS直接發佈至Azure，另一種是用FTP去上傳實體檔案。

(1)VS直接部屬至Azure

一樣使用VS對專案右鍵點選後在點選"publish"

如果原本已經有佈署過則會先顯示上次佈署的設定,，再來點選"+New"。

Target請選擇"Azure"

Specific target請選擇Azure App Service(.NetFramework只能選擇Windows，.Net則不限制)

登入Azure帳戶，登入後就可以顯示出Azure上已有的AppService。

Deployment Type選擇Publish，點選Finish就完成Publish的設定。

完成可以看到一些發佈的設定，再點選Publish按鈕就可以發佈至Azure上。

(2)用FTP上傳實體佈署檔

前面步驟與IIS發佈類似，只是要先發佈至Local。

打開Azure App Service的Deployment Center，再選擇FTPS credentials。

頁面上可以看到FTP的一些相關資訊，使用FileZilla連線到Azure資料夾。

之後將剛剛發佈到Local檔案透過FileZilla上傳到wwwroot，就成功佈署了。

p.s.以上的手動佈署都有可能遇到佈署時會出現"檔案使用中"的錯誤訊息，這時可以先在資料夾內新增一個檔名是app_offline.htm的檔案，這樣就會強制關掉站台，待更新後再將此檔案Rename或Remove站台就會啟動了。

而自動佈署則是會用Azure的CI功能。(前提是要用它可以選到的版控，內部Gitlab不行)

此範例是用Github來教學。

打開Azure的Deployment Center，在Setting頁籤的Source點選Github。

登入Github，填入Github的相關設定

上面設定的Branch會針對設定的Branch去偵測Commit，只要有Commit就會自動佈署。

(正式環境建議拆成獨立分支，例如Release)

設定完之後，在Github的Action頁籤就可以看到一個yml檔案

試著Commit&push，就可以看到有一個workflow在run

點進去就可以看到目前CI的流程以及正在執行的步驟。

過一陣子就可以看到執行完成囉。

點選deploy網址就可以看到成功佈署於Azure上了(未來再也不用手動更版了!!!!!)
也可以查看Azure 的Deplotmeny Center的Logs看到發佈紀錄

總結一下， 佈署方式還是要依照客戶需求去選擇，但CI/CD是未來不可不學的一部分，如果環境許可的話都一律建議使用自動佈署搭配雲端的方式。