はじめに
日々勉強を進めていく中で、AWSサービスの充実さと便利さに日々驚かされております。
特に AWS Amplify についてはフロントさえ用意すればインフラは元より、バックエンドまでも簡単に構築しデプロイまで容易にできてしまう最強ツールだと思っております。
こんな初学者ですが、今回簡易的なフロントを作成し、Amplify へデプロイするまでを自身の備忘録として掲載いたします。
私は初学者のため、誤った内容や文面などございましたら、お手数ですがご連絡いただけますと幸いです。
AWS Amplify とは？
前回投稿した記事にまとめておりますので、参考程度にご確認ください。
補足
サーバレスで AWS のバックエンドを構成しつつ、良い感じにアプリを開発を進めるためのフレームワークがあります。
以下の3つの構成要素を紹介します。
① Amplify CLI
AWS のバックエンドをコマンドで構築するためのインターフェースです。
コマンドより対話式で操作でき、簡単にバックエンドの構築ができます。
設定ファイルなんかも自動生成してくれる優れものです。
② Amplify Framework
Amplify CLI で作成したバックエンド環境との連携処理を数行で記述できるフレームワークになります。
iOS や Android、JS 系のライブラリ（ React 、 Vue.jsなど）に最適化されたインターフェースが提供されています。
③ Amplify Console
アプリのホスティングや、 CI/CD での運用を自動化したりしてくれるマネージドサービスです。
GitHub 等のソースリポジトリと連携できたり、柔軟に開発できるのでめちゃくちゃ便利です！
Amplifyの料金
２種類あります。
① Amplify フレームワーク
Amplify フレームワークの使用自体には料金が発生しません。
しかし、実際にバックエンドで使用する AWS サービスの使用料金は発生します。
② 静的ウェブホスティング
Amplify Console ではビルドとデプロイ、ホスティング機能に対して従量課金が発生します。
【参考】
いずれも課金対象ですが、個人で開発する分にはもっと安くなると思います。
なので、費用はあまり気にすることはないと思います。
Amplify の使用の流れ
環境について
以下の環境をご用意ください。
- AWS アカウントの取得済み
- Node.js バージョン 10 以上
- npm バージョン 5.6 以上
Reactプロジェクトを作成する
ターミナルで以下のような順番で作業を行います。
まずは itoshin-app という名前の React プロジェクトを作成します。
その後、プロジェクトディレクトリの配下（ itoshin-app ）に移動し、ローカル環境で動作確認（npm start）をします。
% npx create-react-app itoshin-app
% cd itoshin-app
% npm start
ディレクトリの移動後、もしyarnをインストールしている場合は、
% yarn start
上記でも起動します。
以下のように、localhost:3000 で React の初期画面が立ち上がることを確認します。
Amplify CLI の設定
Amplify CLI をインストールして使える状態に設定し、以下のコマンドを順に実行して初期設定を進めていきます。
% sudo npm install -g @aws-amplify/cli
% amplify configure
上記コマンドを実行し終えると、AWS アカウントへのサインイン画面がブラウザで立ち上がります。
管理者権限のある自分の 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: itoshin
すると、ブラウザで IAM ユーザの作成画面が立ち上がります。そのままデフォルト状態で、
次のステップ:アクセス権限 次のステップ:タグ 次のステップ:確認 とクリックし、ユーザの作成 をクリックします。
ユーザを作成したら、上の写真のようにアクセスキーとシークレットアクセスキーが表示されるのでコピーします。
.csv のダウンロードから認証情報が記載された csvファイルを ダウンロードして大事に保管しましょう。
もし既存のユーザ情報を使う場合は、IAMユーザの作成はせず、画面を閉じてコマンドラインに戻ります。
コマンドラインに戻ると「Press Enter to continue」と表示されているので Enterを押すと、また対話の続きになります。
先ほど作成したユーザもしくは既存ユーザのアクセスキー情報を入力し、続けてシークレットアクセスキーを同様に入力します。
次に作成するプロファイルネームを聞かれるので、IAMユーザ名と一緒の名前を入力してEnterを押します。
（既に既存のユーザ情報が存在する場合は上書きされます。)
Enter the access key of the newly created user:
? accessKeyId: BSIA7GEFGFUJ********
? secretAccessKey: VwG20ul0saMPdj729PduDPLR****************
? Profile Name: itoshin
ちなみにプロファイルとは Amplify CLI を実行する際に必要な認証情報が記載された設定ファイルで、
ユーザのホームディレクトリ配下に以下のファイル名で保存されます。
.aws/config
.aws/credentials
これで Amplify CLI の初期設定も完了しました。
React プロジェクトの初期設定
次に自分で作成した React プロジェクトを Amplify に持っていくための初期設定を行います。
先ほど作成したプロジェクトディレクトリ itoshin-app 配下にいる状態で以下コマンドを入力します。
% amplify init
対話式でヒアリングがはじまるので回答していきます。
プロジェクト名を聞かれるので、デフォルトのまま Enter
? Enter a name for the project (itoshin-app)
開発環境の名前を聞かれるので、とりあえずはそのまま dev でEnter
? Enter a name for the environment (dev)
エディターは何を使用しているか聞かれますので、使用しているエディターを選択します。（この場合はVSコード）
? 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)
❯ itoshin
全ての入力が完了すると裏で CloudFormation が動き出して必要な設定をしてくれます。
１、２分ほど待って、 「Initialized your environment successfully.」 が表示されたら React プロジェクトでの初期設定も完了です。
これで Amplify 上にもプロジェクトが作成されました。
アプリを Amplify にデプロイ
準備が整ったので Amplify上にアプリケーションをデプロイしていきます。
Amplify にデプロイする時は amplify add コマンドを使います。
% 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.*************.amplifyapp.com
発行された URL にブラウザからアクセスすると、
無事 React の初期画面が表示されました。
アプリのソースを書き換えた際は再度 amplify publish を実行すると、再度デプロイされ修正内容が反映されます。
作成した環境を削除したい場合は、 amplify deleteを実行します。
こうすることで CloudFormation が関連するリソースを全て削除してくれます。
おわりに
今までRailsを使用してバックエンドを構築し、フロントを作り、デプロイでHerokuかAWS、、などなど
といった具合に、時間を変えてポートフォリオを作成したときとは比べものにならないくらいのスピードでデプロイまで辿り着きました。
テクノロジーの進化を学習を通じて肌で実感することができてよかったです。
今後はAmplifyの技術要素を積極的に取り入れ、アプリ開発をしたいと思います。