iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

AWS新手的30天之旅系列 第 5

AWS新手的30天之旅 - 5. Amplify

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/


上一篇
AWS新手的30天之旅 - 4. 建立EC2
下一篇
AWS新手的30天之旅 - 6. Security Group
系列文
AWS新手的30天之旅30

尚未有邦友留言

立即登入留言