What is Amplify

Amplify提供靜態網站的Git型CI/CD服務，並且會自動佈署至AWS CDN，開發者無需準備伺服器，並且在每次commit code時，會自動更新，對於前端開發人員非常友善。

準備一個靜態網頁的github repository

確認node version

需要先確認本機node version >= 8

node -v

建立新的React app

最簡單的方式為使用npx create-react-app建立

npx create-react-app amplifyapp
cd amplifyapp
npm start

webpack dependency問題

若發生此問題的話，不用擔心，可以照著這篇教學即可

先在root folder下新增.env，並且內容為

SKIP_PREFLIGHT_CHECK=true

偷懶一點完整的指令為

echo "SKIP_PREFLIGHT_CHECK=true" >> .env

啟動React app

若都沒問題的話，則用指令啟動react app，執行完後會直接打開Browswer

npm start

將程式碼上傳至github

可以透過手動或指令的話方上傳至自己的github

git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m ‘initial commit’
git push origin master

設定AWS Amplify

進入Amplify Console

登入AWS console後，搜尋「Amplify」

點選後便會進Amplify Console

設定

先點選Deploy中的GET START

選擇「github」

接著進入認証頁(不過我已經認証過了)，就可以直接選擇repository & branch

檢查設定檔，若沒問題則直接下一步

最後重新檢視一下，沒問題就可以點「Save and deploy」

接著就會跳回Amplify Console，會花幾分鐘時間進行pipline

若pipline完成後，可以直接點選圖示下方的連結，便會另開broswer，顯示你的react app了

Auto Deploy

Ampliify一個很貼心的地方是在於有跟git做webhook，當有推進的程式碼時，Amplify就會自動佈署，這邊就不在示範。

刪除 Amplify App

在測試結束以後，若不想繼續付費的話，可以將app刪除
只需要點選右上角的Action->delete app即可

AWS會再尋問是否確認刪除，輸入「delete」即可

回到dashboard確認刪除成功

如何計費

收費項目主要有二項

• 建立及佈署
• 託管費用

但計算我覺得有點小複雜，不過若使用量不大的話，我覺得是非常便宜的，價格計算可以參考這裡

Reference

https://aws.amazon.com/tw/getting-started/hands-on/deploy-react-app-cicd-amplify/
https://aws.amazon.com/tw/amplify/pricing/