インフラ周りの構造的理解を深めたい思いから、AWSのAmplifyを用いて、HostingやAuth、GraphQLにて簡易的なAPIを作ったので、復習と備忘も兼ね、記事にまとめていきます。本記事は『React x Amplify で始めるサーバーレス アプリケーション開発』を参考にさせていただいたので、詳細が気になる方は是非書籍を購入していただければと思います。

AWS Amplifyとは

Javascriptのライブラリの一つ。Webサービスやモバイルアプリのインフラを簡易的に構築することが出来る。

環境設定

前提として、AWSの取得及び、npm又はyarnをインストールしておく必要がある。今回の記事ではnpmを前提に進める。(npmのインストールはこちらの記事を参考にしました）

npmインストール後、下記の流れでコマンドラインをインストールし、セットアップを行います。

#CLIのインストール
$ npm install -g @aws-amplify/cli

#セットアップ(リージョンの指定やIAMのユーザー名、アクセスキーの入力などの設定を行う）
$ amplify configure

ちなみにここで選んだリージョンとAWS上で参照しているリージョンが異なり、CloudFormationが出来ていないと勘違いし、2時間ほど溶かしてしまったのでご注意ください笑

ホスティング

基本的にamplifyで機能を実装する際は下記の流れで行う。

$ amplify init
$ amplify add <機能>
$ amplify push

ホスティングをする際は以下の流れで行う。

$ amplify add hosting
　→PROD (S3 with CloudFront using HTTPS)
　→<ホスティングで使用するバケット名>
　→index.html
　→index.html

# publishする前にS3のバケットの中身を削除する必要がある（なんでだろ...) 
$ amplify publish

ホスティング後のステータスを確認。
$ amplify status

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | No Change | awscloudformation |

認証機能の実装

認証機能の追加もホスティングと同じ流れで出来る。

$ amplify add auth
$ amplify push
$ amplify publish

各選択項目を選びながら、認証の設定をしていきます。細かいフロントの設計は『React x Amplify で始めるサーバーレス アプリケーション開発』にあるので参考にしてください。

困ったところ/課題

作業を進めていく中で困ったところもまとめていきます。

ホスティングに結構時間かかる

amplify publishをすると、AWSの中でホスティング環境を構築してくれるのだが、20~30分ほどかかったので、気長に待つ必要がある。

ホスティングの際、バケットの中身を空にする話

ホスティング環境のPublishをする際に、S3のバケットの中身を空にする必要があるとのことだったが、この作業が必要になる理由がいまいち理解出来なかった。

DynamoDBがNoSQLである点

今回の開発には全く関係が無いが、AWSが提供するDynamoDBというデータベースがNoSQLで有るため、データの検索や集計などには向かない。そのため、個人開発単位の立ち上げにおいては問題ないが、中長期的に進めるプロジェクトではMySQLとの併用などがおそらく必要になる。DynamoDBに関しては、ほとんど触れてもおらず、勉強不足なので、このあたりの記事を参考にします。

まとめ

このようにAWS Amplifyを使うと、非常に簡単に機能を実装することが出来ます。インフラ、サーバーサイドをこれだけ簡易的にやってくれると、フロントエンドが得意な方であればかなりクオリティの高いサービスが作れるのではないかと思いました。AWSは今回始めて触ったのですが、まだまだ未知な領域も多いので、次はLambdaなども触ってみたいと思います。