###### tags: `學習筆記` `KryptoCamp` `JavaScript` # Deploy react-app with Netlify [Netlify](https://www.netlify.com/) ### 創建 react app ``` npm install -g create-react-app ``` ### 創建git repo 與 推上遠端 1. 從github create 新的 repository 2. 推上遠端 ``` git init git add README.md git commit -m "first commit" git branch -M main git remote add origin git@github.com:rayainman/123.git git push -u origin main ``` ### 安裝 Netlify Cli 與 部署 ``` npm install netlify-cli -g netlify deploy ``` 1. 在這邊會開啟netlify網站驗證去連結帳戶 2. 選擇創建一個新的site ![](https://i.imgur.com/TMYVHB3.png) 3. 選擇網站名稱(也可以不選) ![](https://i.imgur.com/HYlTxPt.png) 4. 選擇發布目錄 設成 ./build 5. 發布成功可以進行測試 ![](https://i.imgur.com/HyDBDJt.png) 6. 將測試成功的修改部分提交 ``` git add . git commit -m "netfify" git push ``` 7. 若是測試網發布成功，可以選擇正式發布 ``` netlify deploy --prod ``` ![](https://i.imgur.com/1gjDoBb.png) ### 部署 ## reference [Page Not Found Error on Netlify Reactjs React Router solved](https://dev.to/rajeshroyal/page-not-found-error-on-netlify-reactjs-react-router-solved-43oa) [How to deploy a React app with Netlify and set up continuous deployment via Github](https://levelup.gitconnected.com/how-to-deploy-a-react-app-with-netlify-set-up-continuous-deployment-via-github-53859dcdaf40)