筆記:發布React SPA網站於Azure Static Web Apps與設定
我們只要在Azure Portal點幾下就可以和github中的repo連結起來，自動會加上github action去協助我們發布到Azure Static Web Apps中。關於Azure Static Web Apps我推薦參考這篇的圖文教學，照著做就能完成。
Azure的這個功能就是透過git加上一個commit，放上github action的yml設定
.github/workflows/azure-static-web-apps-{你的static web apps專案}.yml
相關的參數細節在這份官方文件有提到
我們需要了解的就是以下三個參數
- app_location 這部份是react程式的根目錄位置，對我來說就是/
- api_location 這部份若有用Azure function開後端API就會要設定目錄位置，我沒用到
- output_location 這部份就是react編譯後的輸出位置，對我來說就是dist
Troubleshooting
由於React常用於SPA網站，在使用route時若有404 not found的狀況，在傳統解法是透過修改http server的設定檔都導向React首頁。這部份在Azure Static Web Apps中可以參考加入rewrite設定至我們的react首頁
https://docs.microsoft.com/en-us/azure/static-web-apps/configuration
舉例來說
{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": [
"/images/*.{png,jpg,gif}",
"/css/*"
]
}
}
其他
Azure官方針對react也有自己的教學文件
留言