AWS 基礎 Part 13 -- Amplify でReact アプリをデプロイする
Tags: aws, amplify
Published: 2023-02-15 09:18:28


## why

AWS を使ったフロントエンドアプリのデプロイ先として使うため。
検索結果がほぼ Amplify だけだったから。

---

## Amplify とは？

https://aws.amazon.com/jp/amplify/

1. 認証、DB、ストレージ、これらのバックエンド込みでアプリを置ける
2. Figma から画面を生成できる
3. 高速で可用性が高い ( 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

```php
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 のインストール

```php
npm install -g @aws-amplify/cli

added 26 packages in 19s

```

入れた

---

## Amplify CLI で Amplify 用の IAM ユーザーを作成

https://youtu.be/Y8rpcNv4bCQ?t=239

あべさんのこの動画を参考に進めていく。

```php
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/

これらの記事を参考にする

```php
cd ~/code
npx create-react-app react-amplified --template typescript
```

---

## React TS アプリの動作確認

react-amplified の名前で React TS アプリを作成

```php
cd react-amplified
npm start

You can now view react-amplified in the browser.

  Local:            http://localhost:3000
```

起動を確認し

```php
curl localhost:3000 | grep '<title>'

<title>React App</title>
```

動作を確認した。

---

## React TS アプリのビルド

```php
 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 アプリの動作確認

```php
npm i -g serve

added 89 packages in 2s
```

serve　をインストール

```php
serve -s build 

   ┌──────────────────────────────────────────┐
   │                                          │
   │   Serving!                               │
   │                                          │
   │   - Local:    http://localhost:3000      │
   │   - Network:  http://192.168.1.12:3000   │
   │                                          │
   │   Copied local address to clipboard!     │
   │                                          │
   └──────────────────────────────────────────┘

```

3000 で起動した。

```php
 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 の名前でリポジトリ作成

```php
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 先に追加

https://qiita.com/shizuma/items/2b2f873a0034839e47ce#%E5%85%AC%E9%96%8B%E9%8D%B5%E3%82%92github%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%81%99%E3%82%8B

SSH 公開鍵の設定をしておく。

```php
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 を選択

```php
? 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 を作成

```php
amplify version      
10.7.2
```

バージョンはローカルの amplify と合わせる必要がある。
なのでターミナルでコマンドを打って確認する

これでデプロイして Provision を待つ。

---

## Amplify のリポジトリにアクセスして確認

reactamplified のリポジトリで

Provision -> Build -> Deploy

これらが全て終わると、表記されている URL でアクセスできるようになる。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sejqlrk1x68o8b8yxhyi.png)

アクセスすると、React App を確認できた。

```php
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 する。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0k8py2ipard91cp95d7c.png)

push しただけで Amplify でも更新が動いているように見える。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07yc4cwguekvnt46xw9v.png)

５分ほどで Deploy が終わり、更新を見ることができた。

---

## 今後

ECS でデプロイしたバックエンド API を呼ぶようにする。

バックエンド API が JSON レスポンスを返すようにする。

可能であれば、バックエンドをマルチモジュールにする。