最近Vue3剛熱騰騰的出爐，官方表示對Typescript的支持變得更好

另外還多了Composition API，Teleports，Provide Inject...相當多好用的東西

因此就想好好的開箱一下

這時開啟Visual Studio發現，.net core其實預設的scaffolding就有支援....

Angular + .Net Core SPA，React + .Net Core SPA

疑!?

沒有Vue + .Net Core SPA???

他們開發團隊是感情不好嗎 (°ζ‿°　)?

看來...，只好自己來土砲一下了

基本想法

其實現在的前端框架，Vue/Angular/React，若用官方的cli去建立專案的話

基本上算是大同小異，畢竟都是webpack單一進入點的機制在跑

因此我的想法很簡單，就是拿React + .Net Core SPA的scaffolding來改

檢視預設Scaffolding

稍微檢視一下預設的scaffolding，他大致上幫我們做了幾件事

  1. 開發環境幫你同時開好了前後端的server，所以你只要啟動一次debug，就能快速開始檢查開發的狀況

  2. 建置的流程幫你整合了npm的只能，所以有用CI/CD的機制的話，只要從版控把source code抓下來

其實他就會幫你把 node_modules 下載好，進行build，並把build後的靜態檔連同後端一起打包起來

對於快速開發一個前後端分離的網站來說，其實是相當的便利，不需要做太多事情就可以完成初步的開發

改造目標

由於前後端分離，在開發環境下

其實最重要的，就是前端request要能夠打到後端

以及建置時，整合npm指令，做前後端整體的打包

改造流程

以下是改造的細節

用visual studio建立預設專案

  • img

  • img

  • img

調整前端部分

  1. 移除ClientApp中react的部分

  2. 建立Vue project

    vue create app
    • img

  3. 選擇客製化選項

    • img

  4. 這邊我選擇以下功能

    • img

  5. 細部的選項

    • img

  6. 選好後，就是考驗網路流量的時刻了，開始下載 node_modules 的東西吧!

    • img

  7. 完成後就能看到類似的畫面了

    • img

  8. 接著把app裏的東西丟到ClientApp中

  9. 再來為了測試前後端串接的部分，就使用axios來幫我們處理restful request的處理吧

    npm install -D axios

  10. 再來新增一個頁面，用來測試向後端request，並做對應的code調整

    調整的內容請參考github 上的 git history

調整後端部分

code異動的部分請參考這邊

  1. nuget 安裝 VueCliMiddleware

    使用 VueCliMiddleware 主要是有時會希望按下 F5 debug時，可以順便把 vue 的 server 起起來

    並起由他來幫我們處理 request 的行為(要記得先準備好node_modules，不然會啟動失敗)

    • img

  2. 更新appsettings

    增加一個"IsLaunchSPAServer": true來控制按F5開始debug時，要不要順便啟動vue的server

    也就是每次debug都幫你下 npm serve

  3. 更新Startup.cs

    這邊就要實際實作按下 F5 可以順便啟動 vue 的 server

    主要參考 VueCliMiddleware官方文件 進行改造

    異動的code請參考這邊

  4. 後端開放CORS

    其實當project變大的時候，每次debug都要重啟vue server是有點花時間的

    因此前後端的server分開啟動也是個做法

    但分開啟動後，前端發request到後端會遇到 CORS 的問題

    因此，後端在開發環境開放CORS應該是最快的解法

    這樣，就不需要每次debug都要重複啟動 vue server 了

  5. 修改 .csproj 檔案

    有些專案部署可能會採CI/CD的方式

    那就會需要把前端的建置流程也整合進整個部署流程

    此外也需要讓visual studio知道vue build完後的靜態檔在哪

    更改的code請參考這邊

  6. 檢視開發環境

    都調整完後就可以來嘗試一下開發環境了!

    • img

    嘗試向後端發 request

    • img

部署網站

其實營運部署的方式可以有很多種，而這邊使用最快最簡單的方式部署

但此方式可能會比較不適合流量大的系統

  1. 資料夾deploy

    • img

    • img

    • img

    從 deploy 的 log 中可以看到 npm build 的 log

    這樣就可以安心的使用 CI/CD 了

    (btw，有的公司資安比較嚴謹，可能會遇到其他的網路因素)

    • img

  2. 建立IIS站台

    • 實體路徑記得選有web.config的地方，這邊是選

      C:\Users\JC\Desktop\DEMO\Vue3DonetCore3SPATemplate\Vue3DonetCore3SPATemplate\bin\Release\netcoreapp3.1\publish

    • 設定Port 8001 來作為測試用的網址

    • img

  3. 為 IIS 安裝 ASP.NET Core 3.1 Runtime

  4. 處理權限

    如果出現 500.19 ，有高機率是權限問題

    • img

    解法大致為兩個方向:

    1. 更改資料夾權限
    2. 更改application pool的identity

    這邊使用更改application pool identity的方式

    (設定完後要記得 recycle ，異動才會生效)

    • img

  5. 檢視成果

    這樣就能在瀏覽器上看到 IIS 回傳的網頁了!

    • img

    • img

最後

其實 Vue3 目前來說真的就是剛出爐，使用狀況可能還是要觀察一下

可能還不適合太早上營運環境

但以嘗試來說，這次新增的許多新功能真的是很實用

比較意外的是，沒想到 .net core 預設的 scaffolding 居然沒有 Vue...，這真的是很意外

但還好整體改起來還不算太困難，恩，Vue + Typescript + .Net Core SPA 真香

以上改好的template可以在此repositoy參考