使用 AWS Amplify 主控台
部署和託管 ReactJS 應用程式
AWS Amplify 主控台提供使用無伺服器後端開發、部署和託管單一頁面 Web 應用程式或靜態網站的 Git 型 CI/CD 工作流程。連線至 Git 儲存庫後，Amplify 會確定前端框架，以及利用 Amplify CLI 設定的任何無伺服器後端資源兩者的建置設定，並在每次提交程式碼時自動部署更新。
在本教學中，我們首先建立新 React 應用程式，並將其推送至 GitHub 儲存庫。 然後，我們將儲存庫連線至 Amplify 主控台，並將其部署到 mplifyapp.com 網域上託管的全球可用內容交付網路 (CDN)。。下一步，我們將透過對 React 應用程式做出變更來示範連續部署功能，並將新版本推送至將自動開始新部署的主要分支。
此教學中的所有操作都可用免費方案資格來進行。
| 關於本教學 | |
|---|---|
| 時間 | 10 分鐘 |
| 費用 | 符合免費方案資格 |
| 使用案例 | 網站和 Web 應用程式 |
| 產品 | AWS Amplify 主控台 |
| 對象 | 開發人員 |
| 等級 | 初階 |
| 上次更新日期 | 2018 年 3 月 4 日 |
1.註冊 AWS
您需要一個 AWS 帳戶，才能在 AWS Amplify 主控台上進行本教學。在本教學中使用 AWS Amplify 無需額外付費。您在本教學建立的資源符合免費方案資格。
已經有帳戶了嗎？ 登入 Amplify 主控台
2.確認環境設定
開啟命令行界面，然後輸入以下命令：
node -v;若該命令返回的版本低於 v8.0，則將節點升級至版本 8 以上的版本。若找不到該命令，請透過 nodejs.org/download 安裝該節點。
3.建立新的 React 應用程式
建立 React 應用程式最簡單的方法是使用命令 create-react-app。使用以下命令安裝此套件：
npx create-react-app amplifyapp
cd amplifyapp
npm start4.初始化 GitHub 儲存庫
在此步驟中，您將建立一個 GitHub 儲存庫，並將程式碼提交至該儲存庫。您將需要一個 GitHub 帳戶來完成此步驟，若您沒有帳戶，請在這裡註冊。
b.初始化 git 並將應用程式推送至新的 GitHub 儲存庫，在命令行界面中執行以下命令：
git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m ‘initial commit’
git push origin master
6.將您的應用程式部署至 AWS Amplify
在此步驟中，您會將剛剛建立的 GitHub 儲存庫連線至 AWS Amplify 服務。這讓您能夠在 AWS 上建置、部署和託管應用程式。
a.在部署下選取開始使用。
b.選取 GitHub 作為儲存庫服務，然後選取下一步。
c.使用 GitHub 進行身份驗證，然後返回至 Amplify 主控台。選擇您之前建立的儲存庫和主要分支，然後選取下一步。
d.接受預設的建置設定，然後選取下一步。
e.檢閱最終詳細資訊，然後選取儲存並部署。
f.AWS Amplify 主控台現在將在 https://<branchname>.<appid>.amplifyapp.com 建置您的源代碼並部署您的應用程式
g.建置完成後，選取縮略圖以查看您的 Web 應用程式是否啟動並即時執行。
7.自動部署程式碼變更
在此步驟中，您將對程式碼做出一些變更，並將變更推送至應用程式的主要分支。
a.編輯 src/App.js 檔案。
b.建置完成後，請在 AWS Amplify 主控台上選取縮略圖，以檢視更新的應用程式。
8.清理您的資源
您可以輕鬆終止在 AWS Amplify 主控台上建立的資源。事實上，終止不再使用的資源是一項最佳實務，如此您就可以避免付費。
選取動作，然後選取刪除應用程式。在開啟的模式中，輸入刪除，確認您要刪除應用程式。您的應用現已刪除。
恭喜
您已經通過整合 GitHub 並使用 Amplify 主控台，在雲端部署 React 應用程式。
藉助 AWS Amplify 主控台，您可以在雲端連續部署應用程式，並將其託管在全球可用的 CDN 上。