入門 - AWS Amplify

本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。

入門

在這個逐步解說中,您會了解如何持續建置、部署和託管現代 Web 應用程式。現代 Web 應用程式包含單一頁面應用程式 (SPA) 架構 (例如:React、Angular 或 Vue) 和靜態網站產生器 (SSG) (例如:Hugo、Jekyll 或 Gatsby)。Amplify 也支援使用伺服器端轉譯 (SSR) 並使用 Next.js 建立的 Web 應用程式。

若要開始使用,請登入Amplify 主控台。如果您是從AWS Amplify首頁,選擇入門(位於該頁面的頂端)。


         AWS Amplify 首頁的螢幕擷取畫面。

然後選擇開始使用根據Duplify


         AWS Amplify 首頁底部的 Save (交付) 區段的擷取畫面。

如果您是從所有應用程式頁面中,選擇新應用程式託管 Web 應用程式在右上角。


         「Amplify」主控台中「所有應用程式」頁面的螢幕擷取畫面。

步驟 1:Connect 儲存庫

連接您的 GitHub、Bitbucket、GitLab 或 AWS CodeCommit 儲存庫。您也可以選擇在沒有連接 Git 儲存庫的情況下手動上傳建置成品 (請參閱手動部署)。在您授權 Amplify 主控台後,Amplify 會從儲存庫提供者擷取存取字符,但是不會儲存字符(在 AWS 伺服器上)。Amplify 只會使用安裝在特定儲存庫中的部署金鑰來存取您的儲存庫。

連接儲存庫服務提供者之後,請選擇儲存庫,然後選擇對應的分支來建置和部署。

步驟 2a:確認前端的建置設定

Amplify 檢查您的儲存庫是否有所選分支,以自動偵測要執行的建置命令順序。

重要: 驗證建置命令和建置輸出目錄 (也就是 Works > baseDirectory) 是準確的。如果您需要修改此資訊,請選擇 Edit (編輯) 以開啟 YML 編輯器。您可以將建置設定儲存在伺服器上,或者您可以下載 YML,並將它新增至儲存庫的根目錄 (若為單程式碼儲存庫,請將 YML 存放在應用程式的根目錄)。

如需詳細資訊,請參閱 YML 結構

第 2b 步:確認後端介面的建置設定

如果您已連接 Amplify CLI v1.0+ 佈建的儲存庫 (執行 amplify -v 來尋找 CLI 版本),Amplify 主控台會在單一工作流程,使用前端建置部署或自動更新後端資源 (Amplify CLI 佈建的任何資源)。您可以選擇將現有後端環境指向分支,或建立全新的環境。如需逐步教學,請參閱部署完整應用程式

若要在建置期間使用 Amplify CLI 來部署後端功能,請建立或重複使用 AWS Identity and Access Management (IAM) 服務角色。IAM 角色是授予 Amplify 主控台在您帳戶中處理資源許可的安全方式。

請注意: 若未啟用 IAM 服務角色,則 Amplify CLI 不會執行。

步驟 2c:新增環境變數 (可選)

幾乎每個應用程式都需要在執行時間取得組態資訊。這些組態可以是資料庫連線詳細資訊、API 金鑰或是不同的參數。環境變數提供一個方式在建置時公開這些組態。

步驟 3:儲存並部署

檢閱您的所有設定,以確保一切都正確設定。選擇 Save and deploy (儲存並部署) 來將您的 Web 應用程式部署到全球內容交付網路 (CDN)。您的前端建置通常需要 1 到 2 分鐘的時間,但可能因應用程式的大小而有所不同。

選取分支圖磚上的進度指標來存取建置日誌畫面。建置有以下階段:

  1. 佈建 - 您的建置環境是在具有 4 個 vCPU、7 GB 記憶體的主機上使用 Docker 映像設定。每個建置會有自己的主機執行個體,以確保所有資源安全地隔離。系統會顯示 Docker 檔案的內容,以確保預設的映像支援您的需求。

  2. 建置 - 建置階段包含三個階段:設定 (複製儲存庫到容器)、部署後端 (執行 Amplify CLI 來部署後端資源),以及建置前端 (建置您的前端成品)。

  3. 部署 - 當建置完成時,會將所有成品部署到 Amplify 管理的託管環境中。每個部署不可分割 - 不可分割部署透過確保 Web 應用程式只有在整個部署完成後才會更新,因此不需維護時段。

  4. 驗證 - 為了驗證您的應用程式可正常運作,Amplify 會使用 Headless Chrome 以多個裝置解析度轉譯 index.html 的螢幕擷取畫面。

後續步驟