AWS Amplify＠AWS リソース¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. AWS Amplify とは¶
サーバーレスアプリケーションを作成するためのクラウドインフラのフレームワーク。
02. AWS Amplify の仕組み¶
アーキテクチャ¶
▼ フロントエンド¶
SSG の場合、静的ファイルをデプロイしさえすれば、アプリケーションとしての要件がすべて整う。
CSR の場合、サーバーレスのバックエンドを自動作成してくれ、フロントエンドをデプロイしさえすれば、要件がすべて整う。
AWS Amplify が使用する AWS リソースは CloudFormation によって作成されるが、AWS Amplify 経由でしか設定を変更できず、各 AWS リソースのコンソール画面を見ても、非表示になっている。
ただし、Amazon Route 53 の設定は表示されており、AWS Amplify が追加した DNS レコードをユーザーが編集できるようになっている。
| 役割 | 使用されている AWS リソース |
|---|---|
| 静的サイトホスティング | Amazon CloudFront、Amazon S3 |
| GraphQL によるリクエスト | Amazon S3 |
▼ バックエンド¶
フロントエンドで GraphQL によるリクエストを実装している場合、AppSync を使用して、これを受信できる API を作成する必要がある。
| 役割 | 使用されている AWS リソース | クリーンアーキテクチャで相当するレイヤー |
|---|---|---|
| リアルタイム通知 | AppSync、IoT Core | インフラストラクチャ層 |
| RESTful-API、GraphQL-API | Amazon API Gateway、AppSync | インフラストラクチャ層 |
| 認証 | Cognito | インターフェース層 |
| 認可 | Cognito | ユースケース層 |
| ビジネスロジック | AWS Lambda | ドメイン層 |
| 全文検索 | Elastic Search | ドメイン層 |
▼ ストレージ¶
| 役割 | 使用されている AWS リソース |
|---|---|
| NoSQL | DynamoDB |
| ファイル保管 | Amazon S3 |
▼ CI/CD パイプライン¶
AWS Amplify は、連携先のリポジトリからソースコードをプルし、アプリケーションをビルドする。
GitHub のブランチごとにアプリケーションの CI/CD パイプラインが発火するようにすれば、プルリクエストごとにアプリケーションの実行環境を用意できる。
プルリクごとに実行環境を作成できると、例えば、1 個のプルリクをデザイナーサイドやビジネスサイド (例：SEO など) がレビューできるようになる。
ただし、App Runner を使用したほうがよいかもしれない。
03. セットアップ¶
コンソール画面の場合¶
▼ 設定項目と説明¶
| 項目 | 説明 | 補足 |
|---|---|---|
| アプリケーションの名前 | AWS Amplify 上でのアプリケーション名を設定する。 | |
| 本番稼働ブランチ | 基点ブランチを設定する。 | AWS Amplify を本番運用しない場合は、develop ブランチを設定すればよい。 |
| ブランチの自動検出 | ブランチの自動検出を有効化するか否かを設定する。 | ワイルドカード (*) を組み込む場合、アスタリスクを 2 つ割り当てないと、ブランチが検知されないことがある。例：『**foo**,**bar**』 |
| プレビュー | GitHub のプルリクエスト上に AWS Amplify 環境の URL を通知する。 | 執筆時点 (2021/02/07) では、プルリクエストを新しく作成しても、これは自動的に登録されない。そのため、その都度手動で登録する必要がある。 |
| アクセスコントロール | AWS Amplify 環境に認証機能を設定する。 | 執筆時点 (2021/02/07) では、ベーシック認証を使用できる。 |
| リダイレクト | リダイレクトするパスを設定する。 | 404 ステータスで 404 ページにリダイレクトする場合は、以下の通りに設定する。・送信元： /<*>・ターゲットアドレス： <404ページへのパス>・404 (リダイレクト) |
手動ビルド＆デプロイ¶
▼ 開発環境で擬似再現¶
サーバーレスアプリケーションを開発環境で再現する。
$ amplify mock api
▼ 開発環境から手動でビルド&デプロイ¶
開発/ステージング/本番環境に切り替える必要がある。
# アプリケーションの設定
$ amplify add hosting
# ビルド&デプロイ
$ amplify publish
自動ビルド&デプロイ¶
▼ 連携できるバージョン管理システム¶
▼ 対応するバージョン管理リポジトリ構造¶
| 構造名 | ビルド開始ディレクトリ |
|---|---|
| 非モノレポ | リポジトリ名からなるディレクトリ |
| モノレポ | モノレポの各アプリケーションディレクトリ |
▼ amplify.yml ファイル¶
バージョン管理リポジトリのルートに amplify.yml ファイルを配置する。
Next.js では SSG/SSR の両モードでビルド＆デプロイできる。
package.json ファイルで使用される next コマンドに応じて、SSG または SSR のいずれかのインフラが作成され、デプロイされる。
SSG の場合、裏側では Amazon S3、Amazon CloudFront、Amazon Route 53 などが作成され、静的ホスティングが実行される。
SSR の場合、フロントエンドのみでなくバックエンドの実行環境が必要になるため、AWS Lambda や Cognite を作成する。
version: 1
#=====================
# 環境変数
#=====================
env:
variables:
key: # 環境変数のハードコーディング
#=====================
# バックエンドの CI/CD パイプライン
#=====================
backend:
phases:
preBuild:
commands:
- # コマンド
build:
commands:
- # コマンド
postBuild:
commands:
- # コマンド
#=====================
# フロントエンドの CI/CD パイプライン
#=====================
frontend:
phases:
preBuild:
commands:
- npm install
# base64 方式エンコード値をデコード
- echo "${ENV}" | base64 -d > .env
- cat .env
build:
commands:
- nuxt generate --fail-on-error
- ls -la ./dist
artifacts:
# デプロイ先のディレクトリ
files:
# 全てのディレクトリ
- "**/*"
discard-paths: yes
# ビルドのアーティファクトを配置するディレクトリ
baseDirectory: dist
# 指定したディレクトリのキャッシュを作成
cache:
paths:
- node_modules/**/*
#=====================
# ホワイトボックステスト
#=====================
test:
phases:
preTest:
commands:
- # コマンド
test:
commands:
- # コマンド
postTest:
commands:
- # コマンド
artifacts:
# デプロイ先のディレクトリ
files:
# 全てのディレクトリ
- "**/*"
configFilePath: <パス>
# ビルドのアーティファクトのディレクトリ
baseDirectory: <パス>