Amplifyプロジェクトを作成 - Create React App編
Amplify CLIをインストール
shell
npm install -g @aws-amplify/cli
AWS認証情報を登録
shell
amplify configure
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region: ap-northeast-1
to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue
ドキュメントを参考にIAMユーザーを作成します。
- ユーザー名：
amplify-dev - ポリシー：
AdministratorAccess-Amplify
Access keysを作成します。ターミナルに戻り、アクセスキーとシークレットアクセスキーを入力します。
Enter the access key of the newly created user:
? accessKeyId: ********************
? secretAccessKey: ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name: default
Successfully set up the new user.
Reactプロジェクトを作成
shell
npx create-react-app amplify-react --template typescript
以下のファイルが生成されます。
shell
tree amplify-react/ -I node_modules
amplify-react/
├── package.json
├── package-lock.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── README.md
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
└── tsconfig.json
2 directories, 19 files
Amplifyプロジェクトとして初期化
shell
cd amplify-react/
amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplifyreact
The following configuration will be applied:
Project information
| Name: amplifyreact
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start
? Initialize the project with the above configuration? Yes
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify app: d3i7z6srq84y89
Deployment completed.
Deploying root stack amplifyreact [ ==========------------------------------ ] 1/4
UnauthRole AWS::IAM::Role CREATE_IN_PROGRESS Mon Apr 03 2023 10:11:37…
DeploymentBucket AWS::S3::Bucket CREATE_COMPLETE Mon Apr 03 2023 10:12:01…
AuthRole AWS::IAM::Role CREATE_IN_PROGRESS Mon Apr 03 2023 10:11:37…
✔ Help improve Amplify CLI by sharing non sensitive configurations on failures (y/N) · no
Deployment state saved successfully.
✔ 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 push" to deploy everything
Amplifyライブラリーインストール
shell
npm install
npm install @aws-amplify/ui-react aws-amplify
ソースコードの修正
src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Amplify } from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';
Amplify.configure(awsExports);
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
ローカル環境で起動
shell
npm start
Amplify Hostingにデプロイ
- hostingを追加
shell
amplify hosting add
✔ Select the plugin module to execute · Amazon CloudFront and S3
✔ Select the environment setup: · PROD (S3 with CloudFront using HTTPS)
✔ hosting bucket name · amplifyreact-20230403101721-hostingbucket
- 公開
shell
amplify publish -c
✔ Successfully pulled backend environment dev from the cloud.
Current Environment: dev
┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Hosting │ S3AndCloudFront │ Create │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘
✔ Are you sure you want to continue? (Y/n) · yes
Deploying resources into dev environment. This will take a few minutes. ⠙
Deploying root stack amplifyreact [ ---------------------------------------- ] 0/2
hostingS3AndCloudFront AWS::CloudFormation::Stack CREATE_IN_PROGRESS Mon Apr 03 2023 1
Deploying hosting S3AndCloudFront [ ==============================---------- ] 3/4
Deploying resources into dev environment. This will take a few minutes. ⠹
Deploying root stack amplifyreact [ ---------------------------------------- ] 0/2
hostingS3AndCloudFront AWS::CloudFormation::Stack CREATE_IN_PROGRESS Mon Apr 03 2023 1
Deploying hosting S3AndCloudFront [ ==============================---------- ] 3/4
Deploying resources into dev environment. This will take a few minutes. ⠏
Deploying root stack amplifyreact [ ---------------------------------------- ] 0/2
hostingS3AndCloudFront AWS::CloudFormation::Stack CREATE_IN_PROGRESS Mon Apr 03 2023 10:18:08…
Deploying hosting S3AndCloudFront [ ==============================---------- ] 3/4
Deploying resources into dev environment. This will take a few minutes. ⠋
Deploying root stack amplifyreact [ ---------------------------------------- ] 0/2
hostingS3AndCloudFront AWS::CloudFormation::Stack CREATE_IN_PROGRESS Mon Apr 03 2023 10:18:08…
Deploying hosting S3AndCloudFront [ ==============================---------- ] 3/4
Deploying resources into dev environment. This will take a few minutes. ⠏
Deploying root stack amplifyreact [ ---------------------------------------- ] 0/2
hostingS3AndCloudFront AWS::CloudFormation::Stack CREATE_IN_PROGRESS Mon Apr 03 2023 10:18:08…
Deploying hosting S3AndCloudFront [ ==============================---------- ] 3/4
Deploying resources into dev environment. This will take a few minutes. ⠋
Deploying root stack amplifyreact [ ---------------------------------------- ] 0/2
hostingS3AndCloudFront AWS::CloudFormation::Stack CREATE_IN_PROGRESS Mon Apr 03 2023 10:18:08…
Deploying hosting S3AndCloudFront [ ==============================---------- ] 3/4
Deployment completed.
Deploying root stack amplifyreact [ ---------------------------------------- ] 0/2
hostingS3AndCloudFront AWS::CloudFormation::Stack CREATE_IN_PROGRESS Mon Apr 03 2023 10:18:08…
Deployed hosting S3AndCloudFront [ ======================================== ] 4/4
S3Bucket AWS::S3::Bucket CREATE_COMPLETE Mon Apr 03 2023 10:18:36…
OriginAccessIdentity AWS::CloudFront::CloudFrontOr… CREATE_COMPLETE Mon Apr 03 2023 10:18:15…
CloudFrontDistribution AWS::CloudFront::Distribution CREATE_COMPLETE Mon Apr 03 2023 10:22:47…
PrivateBucketPolicy AWS::S3::BucketPolicy CREATE_COMPLETE Mon Apr 03 2023 10:18:40…
Deployment state saved successfully.
Hosting endpoint: https://d3r941phnmdhv0.cloudfront.net
> [email protected] build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
48.04 kB build/static/js/main.92efa1fc.js
33.45 kB build/static/css/main.2c269809.css
1.79 kB build/static/js/787.9660862c.chunk.js
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
frontend build command exited with code 0
Publish started for S3AndCloudFront
✔ Uploaded files successfully.
CloudFront invalidation request sent successfuly.
https://d3r941phnmdhv0.cloudfront.net
Your app is published successfully.
https://d3r941phnmdhv0.cloudfront.net
CloudFront経由で公開されました。
