業務でさくっとバックエンド機能（認証、データベース、Lambda、API）を構築する必要があり、AWS Amplifyを使うのが良さそう。ということで、まずはスタートガイドで触ってみました。
その時のメモをここに残しておこうと思います。
GitHubにリポジトリを作成
いろいろなフロントエンドフレームワークのスターターテンプレートが用意されており、その中から今回は「Angular」を選択しました。
Amplifyへデプロイ
早速、デプロイを行います。
GitHubリポジトリと連携することで、簡単にデプロイができます。便利。
今回はデフォルト設定でデプロイしました。
GitHubとの連携も自動で行ってくれるので、ローカルで修正し、pushするだけで自動で再ビルドされるのは楽ちんでいいですね。
ただ、デプロイに意外と時間がかかるなーという印象（約6分ほど）。
デプロイが正常に完了すると、Amplifyコンソールの画面は下記のようになります。
デプロイしたサイトへアクセスしてみると、下記サンプルtodosアプリが表示できます。
デプロイ失敗
デプロイ時にちょっとつまづいた点を共有します。
【エラ−①】Node.jsのバージョンが古い
初回のデプロイ時にデプロイが失敗。
デプロイログを見ると、下記メッセージが。
2024-06-23T02:33:05.418Z [WARNING]: Node.js version v18.18.2 detected.
The Angular CLI requires a minimum Node.js version of v18.19.
Please update your Node.js version or visit https://nodejs.org/ for additional instructions.
Amplifyのビルドイメージはデフォルトの「Amazon Linux 2023」を使ったのですが、ここにインストールされているNode.jsのバージョンが古いとのこと。
なので、「ホスティング > ビルドの設定 > ライブパッケージの更新」から、今回必要なNode.jsのバージョン パッケージを追加することで解決できました。
【エラ−②】Angularのバンドルサイズのバジェット超過
クイックスタートガイドを進めていくと、その中で認証機能の実装を行うのですが、その実装が終わった後に、二度目のデプロイを行った際にエラーが。
bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 19.21 kB with a total of 1.02 MB.
これはAmplify関係ないのですが、angular.jsonで指定しているバンドルのバジェットサイズを超えたためエラーとなりました。
なので、angular.jsonを下記のようにバンドルサイズを上げるよう修正し、GitHubへpushするとデプロイが正常に完了しました。
"production": {
"budgets": [
{
"type": "initial",
- "maximumWarning": "500kb",
+ "maximumWarning": "2mb",
- "maximumError": "1mb"
+ "maximumError": "3mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
ローカル環境の設定
amplify_outputs.jsonのダウンロード
amplify_outputs.jsonファイルには、バックエンドのエンドポイント情報、公開可能なAPIキー、認証フロー情報などが含まれています。
Amplifyクライアントライブラリは、このoutputsファイルを使用してAmplifyバックエンドに接続します。
ここらへんの設定も、amplify_outputs.jsonファイルで行えるので楽でいいですね。
最後に
一通り、AWS Amplifyのクイックスタートガイドをやってみましたが、さくっとバックエンドを構築したい場合に、とても便利なサービスであることがわかりました。
まだ、細かいところまで追えてませんが、ざっと全体感をつかめました。
今後、詳細についても、少しずつキャッチアップしていこうと思います。