AWS 入門

建立 React 應用程式

使用 AWS Amplify 建立簡單的 Web 應用程式

單元 2:初始化本機 Amplify 應用程式

在本單元中,您將安裝和設定 Amplify CLI。

簡介

我們已經在帳戶中初始化了一個新的 Amplify 專案。現在,我們希望將其下載到本機環境中,以便我們可以繼續開發並新增新功能。

在本單元中,您將安裝 Amplify CLI 並使用 CLI 初始化 Amplify 專案。

您將學到的內容

  • 安裝和設定 Amplify CLI
  • 初始化 Amplify 應用

主要概念

Amplify CLI – Amplify CLI 讓您可以直接從終端機建立、管理和移除 AWS 服務。

 完成時間

5 分鐘

 使用的服務

實作

  • 安裝 Amplify CLI

    Amplify Command Line Interface (CLI) 是一種統一的工具鏈,可讓您按照簡單的引導式工作流程,為您的應用程式建立 AWS 雲端服務。接下來,我們使用命令提示字元 (Windows) 或終端機 (macOS) 安裝 Amplify CLI。注意:此命令可以在命令提示字元/終端機的任何目錄中執行,因為 "-g" 表示該二進位檔案將在您的系統上全域安裝。

    npm install -g @aws-amplify/cli
  • 設定 Amplify CLI

    Amazon IAM (Identity and Access Management) 讓您可以管理 AWS 中的使用者和使用者權限。CLI 使用 IAM 代表您以程式設計方式建立和管理服務。

    要設定 CLI,執行 configure 命令。要查看 CLI 設定過程的影片,請按一下此處

    amplify configure
  • 初始化 Amplify 應用

    接下來,我們將在本機初始化應用程式。由於我們已經建立了 Amplify 專案,因此我們可以使用已經建立的應用程式組態。

    a.在 Amplify 主控台中,按一下 Backend environments (後端環境)。

    Front End BackEnd Environments Module 2

    b.在 Backend environment (後端環境) 標籤中,將 amplify init 命令複製到剪貼簿。

    Front End BackEnd Environments2 Module 2

    c.使用以下命令在本機初始化 Amplify 專案。

    注意:確保使用與已經部署的 Amplify 專案相同的區域設定您選擇的描述檔。

    amplify init --appId your-app-id
    
    ? Enter a name for the project: amplifyapp
    ? Enter a name for the environment: dev
    ? Choose your default editor: Visual Studio Code
    ? Choose the type of app that youre building: javascript
    ? What javascript framework are you using: react
    ? Source Directory Path: src
    ? Distribution Directory Path: build
    ? Build Command:  npm run-script build
    ? Start Command: npm run-script start
    ? Do you want to use an AWS profile? Y
    ? Please choose the profile you want to use: your-aws-profile
    

結論

您已經初始化了 Amplify 專案,現在可以開始新增功能了! 在下一個單元中,我們將僅使用幾行程式碼,新增完整的使用者身份驗證流程。

要在儀表板中檢視 Amplify 專案,您可以執行以下命令:

amplify console

這個單元對您是否有幫助?

感謝您
請告訴我們您喜歡的部分。
關閉
抱歉,讓您失望
是有內容過時、令人困擾,或不準確嗎? 請提供意見回饋,協助我們改進此教學課程。
關閉

新增身份驗證