why
AWS を使ったフロントエンドアプリのデプロイ先として使うため。
検索結果がほぼ Amplify だけだったから。
Amplify とは？
https://aws.amazon.com/jp/amplify/
- 認証、DB、ストレージ、これらのバックエンド込みでアプリを置ける
- Figma から画面を生成できる
- 高速で可用性が高い ( EC2 と同じ特徴 )
公式サイトによると、これらのメリットがあるようだ。
今回はフロントエンドのみを構築する。
Amplify 公式の Getting-Started にしたがう
https://docs.amplify.aws/start/q/integration/react/
React で動かす
amplify CLI の依存性確認
インストール前にこれらの依存性が入っているか確認する
- Node.js v14.x or later
- npm v6.14.4 or later
- git v2.14.1 or later
node --version
v19.4.0
npm version
{
npm: '9.4.2',
node: '19.4.0'
...
}
git version
git version 2.37.1 (Apple Git-137.1)
全て大丈夫だった。
amplify CLI のインストール
npm install -g @aws-amplify/cli
added 26 packages in 19s
入れた
Amplify CLI で Amplify 用の IAM ユーザーを作成
https://youtu.be/Y8rpcNv4bCQ?t=239
あべさんのこの動画を参考に進めていく。
kaede0902@rooter ~ % amplify configure
Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region: (Use arrow keys)
❯ us-east-1
us-east-2
us-west-1
us-west-2
eu-north-1
eu-west-1
eu-west-2
(Move up and down to reveal more choic
- AWS ログイン
- リージョン: ap-northeast-1 (JP)
- Amplify ユーザー名: kaede0902
ここまで入力すると Chrome で IAM の新規ユーザー作成の画面が開く。
- ユーザー名: kaede0902
- アクセスキー: ON
- パスワード: OFF
これで次に進む。
ポリシーはデフォルトの
AdministratorAccess-Amplify
これを選択して次に進む。
Amplify の管理権限と解釈。
タグはなし。
最後に一覧レビューをして、ユーザー作成のボタンを押す。
すると
- アクセスキーID
- シークレットアクセスキー
これらの情報が手に入るので、保存しておく。
Amplify CLI で先ほど作ったユーザーでログイン
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId: ********************
? secretAccessKey: ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name: kaede0902
Successfully set up the new user.
cli に戻り、先ほど発行したアクセスキーとシークレットキーを打ち込む。
すると、ログインできた。
React TS App の作成
https://create-react-app.dev/docs/adding-typescript/
https://docs.amplify.aws/start/getting-started/setup/q/integration/react/
これらの記事を参考にする
cd ~/code
npx create-react-app react-amplified --template typescript
React TS アプリの動作確認
react-amplified の名前で React TS アプリを作成
cd react-amplified
npm start
You can now view react-amplified in the browser.
Local: http://localhost:3000
起動を確認し
curl localhost:3000 | grep '<title>'
<title>React App</title>
動作を確認した。
React TS アプリのビルド
npm run build
> react-amplified@0.1.0 build
> react-scripts build
File sizes after gzip:
46.62 kB build/static/js/main.da3b7c9e.js
1.79 kB build/static/js/787.cbb326c1.chunk.js
541 B build/static/css/main.073c9b0a.css
The project was built assuming it is hosted at /.
npm run build で build/ 下に作成される。
ビルド後の React TS アプリの動作確認
npm i -g serve
added 89 packages in 2s
serve をインストール
serve -s build
┌──────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - Network: http://192.168.1.12:3000 │
│ │
│ Copied local address to clipboard! │
│ │
└──────────────────────────────────────────┘
3000 で起動した。
HTTP 2/15/2023 2:13:24 PM ::1 GET /
HTTP 2/15/2023 2:13:24 PM ::1 Returned 200 in 43 ms
ログも綺麗に見れる。
GitHub に push
https://create-react-app.dev/docs/deployment#aws-amplify
Amplify を使うためには
GitHub などのリポジトリを連携して、
そこに先ほどのアプリをデプロイする必要があるらしい。
react-amplified の名前でリポジトリ作成
git init
Reinitialized existing Git repository in /Users/kaede0902/code/react-amplified/.git/
git remote add origin git@github.com:kaede0902/react-amplified.git
ローカルのリポジトリを初期化
リモートリポジトリを push 先に追加
SSH 公開鍵の設定をしておく。
git push --set-upstream origin main
Writing objects: 100% (24/24), 169.06 KiB | 1.16 MiB/s, done.
To github.com:kaede0902/react-amplified.git
* [new branch] main -> main
これで GitHub への push ができた。
Amplify のリポジトリを作成してローカルのリポジトリと接続
https://docs.amplify.aws/start/getting-started/setup/q/integration/react/#initialize-a-new-backend
公式を参考にする。
- Name: reactamplified
- Env: main
- Auth: AWS profile
- kaede0902 ( 先ほど作った IAM ユーザー )
リポジトリ名がハイフン抜きの reactamplified
環境が main
認証で AWS profile を選び、 kaede0902 を選択
? Please choose the profile you want to use kaede0902
Adding backend environment main to AWS Amplify app: dd5v4sxjauj7w
Deployment completed.
Deploying root stack reactamplified [ ==========------------------------------ ] 1/4
amplify-reactamplified-main-1… AWS::CloudFormation::Stack CREATE_IN_PROGRESS
DeploymentBucket AWS::S3::Bucket CREATE_COMPLETE
UnauthRole AWS::IAM::Role CREATE_IN_PROGRESS
AuthRole AWS::IAM::Role CREATE_IN_PROGRESS
✔ 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!
これで
- ローカルのリポジトリ
- リモートの AWS Amplify のリポジトリ
これらが繋がったと解釈する。
この状態を「バックエンドが繋がった状態」というようだ。
まだ GitHub が繋がっていないので動作確認はできない。
GitHub のリポジトリと Amplify のリポジトリを接続
先ほど作成した、リモートの AWS Amplify のリポジトリの reactamplified
これと GitHub のリポジトリを接続する。
reactamplified の画面から
Hosting env -> Host a web app で
GitHub を選択してブランチ接続。
- リポジトリ: kaede0902/react-amplified
- ブランチ: main
- env: main
- フルスタック CI/CD: true
- ポリシー: amplifyconsole-backend-role
- バージョン: 10.7.2
ポリシーは最初はない。
なので Create Role で AdministratorAccess-Amplify を使って amplifyconsole-backend-role を作成
amplify version
10.7.2
バージョンはローカルの amplify と合わせる必要がある。
なのでターミナルでコマンドを打って確認する
これでデプロイして Provision を待つ。
Amplify のリポジトリにアクセスして確認
reactamplified のリポジトリで
Provision -> Build -> Deploy
これらが全て終わると、表記されている URL でアクセスできるようになる。
アクセスすると、React App を確認できた。
curl -L -v "https://main.{domain}.amplifyapp.com" -A "Mozilla/5.0 (compatible; MSIE 7.01; Windows NT 5.0)"
curl localhost:3000 | grep '<title>'
-> <noscript>You need to enable JavaScript to run this app.</noscript>
なお、curl での確認は無理だった。
GitHub との CI 連携を確認
GitHub に push しただけで、Amplify でも本当に更新されるのか確認する。
文字列を from amplify に変えて、GitHub に push する。
push しただけで Amplify でも更新が動いているように見える。
５分ほどで Deploy が終わり、更新を見ることができた。
今後
ECS でデプロイしたバックエンド API を呼ぶようにする。
バックエンド API が JSON レスポンスを返すようにする。
可能であれば、バックエンドをマルチモジュールにする。
Top comments (0)