在 Amazon Amplify 上部署 Web 應用程式

入門指南

單元 1:建立新的 Amplify 專案

在本單元中,您將會建立新的 Web 應用程式與配置 Amplify

簡介

在本單元中,您將會使用 React 建立新的 Web 應用程式,這是建置使用者介面的 JavaScript 資料庫,並了解如何為第一個專案配置 AWS Amplify。

您將學到的內容

  • 建立新的 Web 應用程式
  • 設定專案上的 Amplify

 完成時間

5 分鐘

 單元先決條件

  • 有管理員等級存取權限的 AWS 帳戶**
  • 建議的瀏覽器:最新版的 Chrome 或 Firefox

[**]過去 24 小時內建立的帳戶可能尚未有權存取本教學課程所需的服務。

實作

檢查環境

在終端/主控台視窗中執行 node -vnpm -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.6

Amplify Command Line Interface (CLI) 是一種統一的工具鏈,可為您的應用程式建立 AWS 雲端服務。進行下一步,安裝 Amplify CLI。

npm install -g @aws-amplify/cli

請注意:因為我們在全域範圍安裝 Amplify CLI,您可能需要使用 sudo 執行上述的命令,視您的系統政策而定。

完成安裝時,請執行下列命令以配置 Amplify:

amplify configure

amplify 配置 將會開啟瀏覽器,並要求您登入 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 資源。

gsg-build-amplify-4

建立使用者後,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 專案。
gsg-build-amplify-1

結論

在本單元中,您已了解如何建立 React 前端應用程式,並利用 Amplify 進行初始化,以便將其部署到您的 AWS 帳戶。在下一單元中,您將會了解如何使用 GraphQL 將 API 新增到您的前端應用程式。

下一步:連接 API

讓我們知道我們表現如何。

感謝您的意見回饋
我們很高興此頁面對您有所幫助。您願意分享更多詳細資訊以協助我們繼續改進嗎?
關閉
感謝您的意見回饋
很抱歉此頁面沒有幫助到您。您願意分享更多詳細資訊以協助我們繼續改進嗎?
關閉