在 Amazon Amplify 上部署 Web 應用程式
入門指南
單元 1：建立新的 Amplify 專案
在本單元中，您將會建立新的 Web 應用程式與配置 Amplify
簡介
在本單元中，您將會使用 React 建立新的 Web 應用程式，這是建置使用者介面的 JavaScript 資料庫，並了解如何為第一個專案配置 AWS Amplify。
您將學到的內容
- 建立新的 Web 應用程式
- 設定專案上的 Amplify
完成時間
5 分鐘
單元先決條件
- 有管理員等級存取權限的 AWS 帳戶**
- 建議的瀏覽器：最新版的 Chrome 或 Firefox
[**]過去 24 小時內建立的帳戶可能尚未有權存取本教學課程所需的服務。
實作
檢查環境
在終端/主控台視窗中執行 node -v 及 npm -v，驗證您執行的版本至少為 Node.js version 12.x 及 npm 6.x 以上。如果不是，請造訪 nodejs 及 npm 網站了解進一步資訊。
node -v
# Your output may differ based on the version installed.
12.1.1
npm -v
# Your output may differ based on the version installed.
6.14.6Amplify Command Line Interface (CLI) 是一種統一的工具鏈，可為您的應用程式建立 AWS 雲端服務。進行下一步，安裝 Amplify CLI。
npm install -g @aws-amplify/cli請注意：因為我們在全域範圍安裝 Amplify CLI，您可能需要使用 sudo 執行上述的命令，視您的系統政策而定。
完成安裝時，請執行下列命令以配置 Amplify：
amplify configureamplify 配置 將會開啟瀏覽器，並要求您登入 AWS 主控台。
登入後，Amplify CLI 會要求您建立 IAM 使用者。
Specify the AWS Region
? region: # Your preferred region
Specify the username of the new IAM user:
? user name: # User name for Amplify IAM user
Complete the user creation using the AWS console建立具有帳戶 AdministratorAccess 的使用者，以佈建 AppSync、Cognito 等 AWS 資源。
建立使用者後，Amplify CLI 會要求您提供 accessKeyId 以及 secretAccessKey，以將 Amplify CLI 和新建立的 IAM 使用者連接。
Enter the access key of the newly created user:
? accessKeyId: # YOUR_ACCESS_KEY_ID
? secretAccessKey: # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name: # (default)
Successfully set up the new user.建立 React 應用程式
若要建立新的 React 應用程式，您需要使用 create-react-app，這是一種工具鏈，可在無需配置的情形下協助您入門。
建立名為 amplify-app 的應用程式，接著利用 amplify init 進行初始化：
# note npx is installed with npm
npx create-react-app amplify-app
cd amplify-app
amplify init執行 amplify init 時，會要求您提供應用程式資訊，請使用下列提供的數值：
? Enter a name for the project amplifyapp
? Enter a name for the environment dev
? Choose your default editor: None
? Choose the type of app that you're building javascript
Please tell us about your project
? 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
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use amplify回答最新的提示後，會建立您需要的必要基礎設施，輸出會如下所示：
⠼ Initializing project in the cloud...
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Fri Sep 17 2021 08:48:24 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Fri Sep 17 2021 08:48:22 GMT+0200 (South Africa Standard Time)
CREATE_IN_PROGRESS amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:19 GMT+0200 (South Africa Standard Time) User Initiated
⠼ Initializing project in the cloud...
CREATE_COMPLETE AuthRole AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time)
CREATE_COMPLETE UnauthRole AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time)
⠸ Initializing project in the cloud...
CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Fri Sep 17 2021 08:48:45 GMT+0200 (South Africa Standard Time)
⠴ Initializing project in the cloud...
CREATE_COMPLETE amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:47 GMT+0200 (South Africa Standard Time)
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.
Your project has been successfully initialized and connected to the cloud!
Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything您建立了什麼內容？
執行 amplify init 初始化新專案時，Amplify 將會：
- 分析您的專案並確認以上的專案設定，包括將用哪一種 AWS 描述檔來佈建應用程式所需的雲端資源。
- 在專案目錄內部建立一個稱為 amplify 的資料夾。此資料夾包含應用程式的後端配置。
- 在專案目錄內部建立稱為 src/aws-exports.js 的檔案。此檔案包含 Amplify 在您新增更多應用程式功能時所佈建的服務配置。
- 在 AWS Amplify 主控台 中為應用程式建立雲端專案，您可以在此處檢視與管理 Amplify 專案。
