この記事は ディップ株式会社 Advent Calendar 2021 の9日目の記事です
はじめに
AWS上に静的Webサイトの構築をする必要があり、Amplifyを利用して構築するかどうか検討しました。
結果的には採用しませんでしたが、そのように判断した理由をまとめます。
なお、アプリ側の設定に関する話は出てきません。
システム要件
- CloudFrontとS3で構築する静的Webホスティングシステム
- コードの管理はCodeCommitを利用
- CodeCommitへのPushで自動デプロイする
- Cloud9から実行する
AWS Amplifyとは
モバイルアプリやウェブアプリを構築するための開発プラットフォームで、
開発に必要なインフラ（S3, CoudFront）を簡単に構築できます。
アプリケーションの開発環境を急いで用意したい場合や、インフラの要件とかはとりあえず気にせず環境構築したい場合などに利用できます。
Amplify Console
サーバレスのWebアプリを公開する環境を、簡単に構築できます。
Git HubやCodeCommitリポジトリを紐づけることで、自動デプロイ環境まで構築してくれます。
また、ビルド、デプロイ状況をConsole上で確認することが可能です。
Amplify CLI
各種AWSサービスと連携したりするのに利用するAmplifyのコマンドベースのツール。
これを用いるとバックエンド環境を対話式で簡単に構築が可能です。
Amplifyを用いた構築手順
2つの方法があります。
-
- Amplify Console を利用してホスティング環境を構築する
-
- Amplify Console は利用せずにホスティング環境を構築する
※注意点
- Amplify Consoleを利用した場合、ホスティング環境はAmplifyのサービス側で管理される
- 自分達でCloudFormationによる管理ができない
前提条件
リポジトリが作成され、アプリ関連のファイルがアップされている状態
Amplify CLIのインストール
$ npm install -g @aws-amplify/cli
$ amplify -v
Amplify CLIの実行環境を設定
$ amplify configure
対話形式で設定していく
- リージョン
- IAMユーザー
- アクセスキー
※IAMユーザー設定のステップについて
AWS アカウントへのサインイン画面がブラウザで立ち上がるので
実行させたい既存ユーザーか、新規にユーザーを作成します。
※今回はCloud9を利用しておりAWSにログイン済みであるため自動的に次のステップに進みました。
設定完了後ホームディレクトリの「.aws/」配下に設定ファイルが作成される
（AWS CLIの設定と同じ）
Amplifyのプロジェクトを立ち上げて初期化
$ amplify init
色々と対話形式で確認されるので、入力していく。
このコマンドの実行が完了すると、AWS Amplify Consoleのバックエンド、AWS CloudFormationスタック、IAMロール、デプロイ用Amazon S3バケットといった必要なAWSリソースを自動的にプロビジョニングしてくれます。
静的ホスティングのリソース作成（S3、CloudFront）
$ amplify add hosting
ホスティングの形式を選択
? Select the plugin module to execute
Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
❯ Amazon CloudFront and S3
※ここの選択肢で、Amplify Consoleを利用するかどうか決まります。
- Hosting with Amplify Console ←Amplify Consoleを利用する場合はこちらを選択
- Amazon CloudFront and S3
1. Amplify Consoleを利用する場合
「Hosting with Amplify Console」を選択すると、
ブラウザでAmplifyコンソール画面が開くので、リポジトリや、ブランチの設定を行います。
指定したリポジトリのブランチにPushしたら、自動でビルドしてデプロイするパイプラインを作成してくれます。
Amplify Console を利用してホスティング環境を構築する手順はこれで完了です。
2. Amplify Consoleを利用しない場合
「Amazon CloudFront and S3」を選択して、対話形式で環境のなどを行う
ホスティング先のS3バケット名などを入力します。
「amplify add hosting」コマンドが完了すると、
カレントディレクトリ上に作成されているAmplifyフォルダの中身はこんな感じになっています。
├── amplify
│ ├── #current-cloud-backend
│ │ ├── hosting
│ │ │ └── S3AndCloudFront
│ │ │ ├── parameters.json
│ │ │ └── template.json
│ │ ├── amplify-meta.json
│ │ ├── backend-config.json
│ │ └── tags.json
│ ├── backend
│ │ ├── awscloudformation
│ │ │ ├── build
│ │ │ │ ├── awscloudformation
│ │ │ │ │ └── nested-cloudformation-stack.yml
│ │ │ │ └── hosting
│ │ │ │ └── S3AndCloudFront
│ │ │ │ └── template.json
│ │ │ └── nested-cloudformation-stack.yml
│ │ ├── hosting
│ │ │ └── S3AndCloudFront
│ │ │ ├── parameters.json
│ │ │ └── template.json
│ │ ├── amplify-meta.json
│ │ ├── backend-config.json
│ │ └── tags.json
以下のコマンドを実行し、作成されたCFnテンプレートの内容でホスティング環境をデプロイします。
なお、ホスティング関連のリソースを定義しているファイルは以下です。
amplify/backend/hosting/S3AndCloudFront/template.json
amplify/backend/hosting/S3AndCloudFront/parameters.json
amplify publish
２つのホスティング方式の特徴
1. Amplify Console を利用した場合
メリット
- 自動デプロイパイプラインまで構築してくれる
- パイプラインの進行状況やエラー情報をAmplifyコンソールに集約できる
デメリット
- S3やCloudFrontのリソースをコードで管理できない（Amplifyのサービス内で管理される）
- CloudFrontの機能などで一部設定できない機能がある
2. Amplify Console を利用しない場合
メリット
- ホスティングのリソース(S3やCloudFront)をCloudFormationで管理できる
- マネジメントコンソールでS3やCloudFrontを確認できる(Amplify Consoleを利用している場合確認できない)
デメリット
- パイプライン環境は1から自分で構築する必要がある
- CloudFormationのテンプレートがjson形式
- Amplify Consoleでデプロイ状況は確認できないため、Codeシリーズ側で確認する
- Amplifyを利用する必要性を感じない
選考の結果
以下の2点からAmplifyの利用は見送りました。
(1) CloudFormationで管理したい
→その場合、Pipelineは自分で構築する必要がある
→それならば、Amplifyを利用せず、１からCloudFormationで構築したほうが良い
(2) Amplifyが対応していない機能を追加する場合、Amplifyを利用していない場合よりも実装のハードルが高くなる
(Lambdaなどで色々しないと実装できなかったり)
#まとめ
今回は採用しませんでしたが、Amplifyは気軽にアプリ開発環境を構築できるので、
インフラ側の知識がない方や、取り急ぎ開発環境を用意する場合は重宝するかと思います。
本番運用までAmplifyを利用するかは、機能面も考慮して単純なシステムであれば採用しても良いと思います。
ただ、現状だとAmplify Consoleを利用するパターンでの採用が必須な気がします。
最後に
2021年のre:InventでAmplify Studioなるものが発表されたようです。
Amplifyの追加機能で、ローコードのアプリ開発ツールのようです。
まだまだ、Amplifyは進化を残しているようなので、目が離せませんね！