AWS Amplify を使ってみた (Reactアプリの開発環境作成まで)

こんにちは、最近サーバレスにハマるサーバエンジニアのSRE課栩野です。

AWS Amplify を使ってみた (Reactアプリの開発環境作成まで)

今回の題材は AWS Amplify てことで、普段は運用業務がメインなので
アプリケーションの開発に関わることはないのですが、個人的にサーバレス周りの
AWSサービスが気になっているので、 Amplify について色々調べて触ってみました。

Amplifyとはなんだ？
どれくらい料金かかるの？
どうやって使うの？

みたいな部分について調べて、最終的には初期状態のReactアプリケーションを
Amplify にデプロイして公開するところまでやっていきます。

Amplify が気になっている方や、ちょうど Amplify で React の開発環境作りたかった
みたいな方の参考になれればと思います。

AWS Amplify とは...?

実際に触って行く前に、そもそも Amplify とはどんなサービスなのか？
色々調べてみました。

Amplifyのサービスページから説明を抜粋すると

AWS Amplify は、モバイルとウェブのフロントエンドデベロッパーが
安全でスケーラブルなフルスタックアプリケーションを構築しデプロイ
できるようにする、AWS による製品およびツールのセットです。Amplify
を使用すれば、アプリケーションのバックエンドを数分で設定し、わずか
数行のコードでそれをアプリケーションに接続できます。そして、3 ステップ
で静的なウェブアプリケーションをデプロイできます。AWS Amplify で迅速な
市場投入を実現しましょう。

参考：AWS Amplify サービスページ

とりあえず書いてる内容の雰囲気的としては

静的なウェブアプリケーションをバックエンド込みで
安全でスケーラブル
そして簡単
しかも迅速
にデプロイできるツールのセット

更に詳しく AWS のソリューションアーキテクトの方のブログに説明があったので...

Amplify とはサーバーレスなバックエンドをセットアップするための
CLI、フロントエンドで利用できる UI コンポーネント、CI/CD やホスティングのための
コンソールを含む Web およびモバイルアプリ開発のためのフレームワーク

サーバレスで AWS のバックエンドを構成しつつ、良い感じにアプリを
開発を進めるためのフレームワークで、以下の3つの構成要素が存在するとのこと

Amplify CLI
Amplify Framework
Amplify Console

・Amplify CLI
AWS のバックエンドをコマンドで構築するためのインターフェース
コマンドから対話式で簡単にバックエンドの構築ができて設定ファイルなんかも自動生成してくれる

・Amplify Framework
Amplify CLI で作成したバックエンド環境との連携処理を数行で記述できるフレームワーク
iOS や Android、JS 系のフレームワークに最適化されたインターフェースが提供されてる

・Amplify Console
アプリのホスティングや CI/CD での運用を自動化したりしてくれるマネージドサービス
GitHub 等のソースリポジトリと連携できたり、柔軟な開発を可能にしてくれる

詳しく知りたい方は下記リンクのブログで確認していただければです。

参考：スタートアップが AWS Amplify を使うべき 3 つの理由

Amplify の利用料金について

Amplify がどんなものか少し分かったところで
実際使うとなれば気になってしょうがない利用料金について調べました。

実際に利用して料金が発生するのは以下

・Amplify フレームワーク
Amplify フレームワークの使用自体には料金が発生しませんが
実際にバックエンドで使用する AWS サービスの使用料金は発生します。

・静的ウェブホスティング
Amplify Console ではビルドとデプロイ、ホスティング機能に対して従量課金が発生します。

• ビルド&デプロイ費用 : ビルド 1 分あたり 0.01USD
• ストレージ費用 1GB あたり : 0.023USD/月
• ホスティングサービス 1GB あたり : 0.15USD

参考：AWS Amplify の料金

これだけではあまり費用感が分からないので
上記リンク内にあった実際に発生する料金パターンの一例を紹介します。

まず Amplify の1ヵ月あたりの利用料金算出計算式が以下のようで...

▼ 1ヶ月あたりのビルド&デプロイ費用の計算式
1ヵ月の合計ビルド時間 = 開発者数 x 1日あたりのコミット回数 x 業務日数 x 平均ビルド時間(分)

1ヵ月あたり料金は... 1ヵ月の合計ビルド時間 x 0.01USD

▼ 1ヶ月あたりのストレージ費用の計算式
1ヵ月あたりのストレージ (GB) = ウェブアプリケーションのサイズ(GB) x 月間ビルド数

1ヵ月あたり料金は... 1ヵ月あたりのストレージ (GB) x 0.023USD

▼ 1 ヶ月あたりのホスティング費用の計算式
1ヵ月あたりのホスティング (GB) = 1日あたりのアクティブユーザ数 x 平均ページサイズ(GB) x 日数

1ヵ月あたり料金は... 1ヵ月あたりのホスティング (GB) x 0.15USD

これら3つの合計金額 + バックエンドの AWS サービスの利用料金が
実際に発生する1ヶ月分の利用料金となります。

この計算式に以下の開発パターンを当てはめてみると...

• 1 日あたり 300 のアクティブユーザーを持つアプリケーション
• 開発者 5 人でコードを 1 日 1 人あたり 2 回コミット
• 平均ビルド時間 3 分の業務日数が 月 20 日
• アプリケーションのサイズは 25MB、リクエストされるページの平均サイズは 1.5 MB

ビルド&デプロイ(6USD) + ストレージ(1.97USD) + ホスティング(0.11USD)
= 8.08USD/月

ここにバックエンドで使うサービス料金が少し乗っかる形になります。

個人で開発する分にはもっともっと安くなるので、正直あまり費用は気にすることなく
触ることができると思います。

実際に Amplify を使ってみる

どんなサービスか、また費用はどれくらいかかるのか
その辺が分かって安心できたところで、実際に Amplify を触っていきます。

冒頭でも軽く触れた通り初期状態のReactアプリケーションをとりあえずは
Amplifyにデプロイして公開

といったところまでをやっていきたいと思います。

必要な環境

以下環境が整っている程で進めていくので
整っていない方は環境作成からお願いします。

• AWS アカウントの取得済み
• Node.js バージョン 10 以上
• npm バージョン 5.6 以上

React プロジェクトの作成

まずはローカルPC 上で React プロジェクトを作成します。

ここからはコマンドラインで操作を進めていきます。

以下コマンドでtest-appという名前のReactプロジェクトを作成する
(npxを頭につけるとパッケージをインストールせずに実行できる)
$ npx create-react-app test-app

プロジェクトディレクトリの配下に移動
$ cd test-app

ローカルPCで動作確認
$ npm start
もしくはyarnがインストールされている場合は
$ yarn start

localhost:3000 で React の初期画面がたちがることを確認します。

Amplify CLI の設定

次に Amplify CLI をインストールして使える状態に設定していきます。

Amplify CLIをグローバルインストール
$ sudo npm install -g @aws-amplify/cli

続いて Amplify CLI を使用するための初期設定を進めていきます。

以下コマンドで初期設定開始
$ amplify configure

すると AWS アカウントへのサインイン画面がブラウザで立ち上がるので
Administrator 権限のある自分の AWS アカウントでサインインします。

サインインできたら、コマンドライン側に「Press Enter to continue」
と表示されているので、Enter キーを叩きます。

これでアカウントの認証ができました。

引き続きここから対話式で初期設定を行っていきます。

どこのリージョンを使うか聞かれてるので
東京リージョン(ap-northeast-1)にカーソルを合わせてEnter
Specify the AWS Region
? region:  (Use arrow keys)
  us-east-1
  us-east-2
  us-west-2
  eu-west-1
  eu-west-2
  eu-central-1
❯ ap-northeast-1
(Move up and down to reveal more choices)

Amplify CLIを操作するためのIAMユーザを作成するので任意のユーザ名を入力してEnter
(※もし既存のユーザを使う場合は既存のIAMユーザの名前を入力してEnter)
Specify the username of the new IAM user:
? user name:  tochino

するとブラウザで IAM ユーザの作成画面が立ち上がるので、とりあえずは
そのままデフォルト状態で[次のステップ:アクセス権限] [次のステップ:タグ] [次のステップ:確認]
とクリックして、[ユーザの作成]をクリックします。

ユーザを作成したら、アクセスキーとシークレットアクセスキーが表示されるのでコピーしておきます。
(.csv のダウンロードから認証情報が記載された csvファイルをダウンロードして大事に保管)

※もし既存のユーザ情報を使う場合は、IAMユーザの作成はせず、画面を閉じてコマンドラインに戻ります。

コマンドラインに戻ると「Press Enter to continue」と表示されているので Enter
するとまた対話の続きを...

先ほど作成したユーザもしくは既存ユーザのアクセスキー情報を入力
Enter the access key of the newly created user:
? accessKeyId:  AKIA6GEFMYUJ********

続けてシークレットアクセスキーを同様に入力
? secretAccessKey:  ViGO4rI0xoMPbjX509PzuDQR****************

作成するプロファイルネームを聞かれるので、IAMユーザ名と一緒の名前を入力してEnter
（既に既存のユーザ情報が存在する場合は上書きされます。)
? Profile Name:  tochino

ちなみにプロファイルとは Amplify CLI を実行する際に必要な認証情報が記載された
設定ファイルで、ユーザのホームディレクトリ配下に以下のファイル名で保存されます。

.aws/config
.aws/credentials

これで Amplify CLI の初期設定も完了です！

React プロジェクトの初期設定

作成した React プロジェクトを Amplify に持っていくための初期設定を行います。

先ほど作成したプロジェクトディレクトリ test-app 配下にいる状態で以下コマンドを叩きます。

$ amplify init

対話式でヒアリングがはじまるので回答していきます。

プロジェクト名を聞かれるので、デフォルトのままEnter
? Enter a name for the project (test-app)

開発環境の名前を聞かれるので、とりあえずはそのまま dev でEnter
? Enter a name for the environment (dev)

エディター何使ってるの？って聞かれるので正直に答える
? Choose your default editor: (Use arrow keys)
❯ Visual Studio Code
  Atom Editor
  Sublime Text
  IntelliJ IDEA
  Vim (via Terminal, Mac OS only)
  Emacs (via Terminal, Mac OS only)
  None

言語は何使ってる？って聞かれるので javascript
? Choose the type of app that you're building (Use arrow keys)
  android
  flutter
  ios
❯ javascript

フレームワークは何使ってる？って聞かれてるので react
? What javascript framework are you using (Use arrow keys)
  angular
  ember
  ionic
❯ react
  react-native
  vue
  none

ソースディレクトリはデフォの src のままEnter
? Source Directory Path:  (src)

ビルドファイルのディレクトリもデフォの build のままEnter
? Distribution Directory Path: (build)

BuildコマンドもデフォのままEnter
? Build Command:  (npm run-script build)

StartコマンドもデフォのままEnter
? Start Command: (npm run-script start)

AWSプロファイル使う？って聞かれるのでYes
? Do you want to use an AWS profile? (Y/n)

先ほど作成したプロファイル名を選択
? Please choose the profile you want to use (Use arrow keys)
❯ tochino

全ての入力が完了すると裏で CloudFormation が走り出して
良い感じに必要な設定をしてくれます。

少し待って
Initialized your environment successfully.
が表示されたら React プロジェクトでの初期設定も完了です。

これで Amplify 上にもプロジェクトが作成されました。

アプリケーションを Amplify にデプロイ

準備が整ったので Amplify上にアプリケーションをデプロイしていきます。

Amplify にデプロイする時は amplify add コマンドを使います。

amplify add で hosting を追加する
$ amplify add hosting

するとまたまた対話式になるので...

どの方法でデプロイするか聞かれるので、今回は「Hosting with Amplify Console」を選択
? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3

GitHub等ソースリポジトリと連携してCI/CD環境を作成する場合は「Continuous deployment」を
選択しますが、今回はとりあえずCLIからデプロイだけ行うので「Manual deployment」を選択
? Choose a type (Use arrow keys)
  Continuous deployment (Git-based deployments)
❯ Manual deployment
  Learn more

入力を終えて少し待つと

You can now publish your app using the following command:

Command: amplify publish

と表示されるので。指示にしたがってamplify publishコマンドを叩きます。

$ amplify publish

反映する設定の確認が表示され、OperationがCreateなら新規作成なのでYes
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name  | Operation | Provider plugin   |
| -------- | -------------- | --------- | ----------------- |
| Hosting  | amplifyhosting | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n)

ちなみに publish は CLI からアプリケーションをデプロイする際のコマンドで
内部的には CloudFront や S3 を使ってアプリケーションがデプロイされます。

また裏で良い感じに CloudFormation が走り出して各種リソースを設定してくれます。
React のビルドも良い感じに実行されて最後に URL が発行されます。

✔ Zipping artifacts completed.
✔ Deployment complete!
https://dev.dcww7chw0t0hj.amplifyapp.com

発行された URL にブラウザからアクセスすると...

無事 React の初期画面が表示されました！

アプリのソースを書き換えた際は再度「amplify publish」を実行すると
再デプロイされ修正内容が反映されます。

これで無事 React アプリをデプロイして公開することができました！

作成した環境の削除

最後に作成した環境の削除は簡単で...

以下コマンドをプロジェクトディレクトリで配下で実行
$ amplify delete

元に戻せないけどほんまにええんやな？　みたいなことを聞かれるのでYes
? Are you sure you want to continue? This CANNOT be undone. (This would delete all the environments of the pro
ject from the cloud and wipe out all the local files created by Amplify CLI) (y/N) y

裏で CloudFormation さんが綺麗に掃除して関連するリソースを全て削除してくれます。

あとがき

Amplify 触ってるとお手軽すぎてサーバエンジニアの仕事が...

引き続き Amplify 関連の記事を上げていく予定なので次回は以降は

・CI/CD 環境の作成と独自ドメインの割り当て
・Cognito を使った認証設定とカスタマイズ
・AppSync を使った簡単なチャット機能の作成

とかこの辺について書いていこうと思ってます。

最後までありがとうございました。

参考

AWS Amplify
スタートアップが AWS Amplify を使うべき 3 つの理由
AWS Amplify ドキュメント
AWS Black Belt Online Seminar AWS Amplify