Amplify＠AWSリソース¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. Amplifyとは¶
サーバーレスアプリケーションを作成するためのクラウドインフラストラクチャのフレームワーク。
02. Amplifyの仕組み¶
アーキテクチャ¶
▼ フロントエンド¶
SSGの場合、静的ファイルをデプロイしさえすれば、アプリケーションとしての要件が全て整う。
SPAの場合、サーバーレスのバックエンドを自動作成してくれ、フロントエンドをデプロイしさえすれば、要件が全て整う。
これのAWSリソースはCloudFormationによって作成されるが、Amplify経由でしか設定を変更できず、各AWSリリースのコンソール画面を見ても、非表示になっている。
ただし、Route53の設定は表示されており、Amplifyが追加したDNSレコードをユーザーが編集できるようになっている。
| 役割 | 使用されているAWSリソース |
|---|---|
| 静的サイトホスティング | CloudFront、S3 |
| GraphQLによるリクエスト | S3 |
▼ バックエンド¶
フロントエンドでGraphQLによるリクエストを実装している場合、AppSyncを使用して、これを受信できるAPIを作成する必要がある。
| 役割 | 使用されているAWSリソース | クリーンアーキテクチャで相当するレイヤー |
|---|---|---|
| リアルタイム通知 | AppSync、IoT Core | インフラストラクチャ層 |
| RESTful-API、GraphQL-API | API Gateway、AppSync | インフラストラクチャ層 |
| 認証 | Cognito | インターフェース層 |
| 認可 | Cognito | ユースケース層 |
| ビジネスロジック | Lambda | ドメイン層 |
| 全文検索 | Elastic Search | ドメイン層 |
▼ ストレージ¶
| 役割 | 使用されているAWSリソース |
|---|---|
| NoSQL | DynamoDB |
| ファイル保管 | S3 |
▼ CI/CDパイプライン¶
Amplifyは、連携先のリポジトリからソースコードをプルし、アプリケーションをビルドする。
GitHubのブランチごとにアプリケーションのCI/CDパイプラインが発火するようにすれば、プルリクエストごとにアプリケーションの実行環境を用意できる。
プルリクごとに実行環境を作成できると、例えば、1個のプルリクをデザイナーサイドとビジネスサイド (例：SEOとか) が一緒にレビューできるようになる。
ただし、App Runnerを使用した方がよいかもしれない。
03. セットアップ¶
コンソール画面の場合¶
▼ 設定項目と説明¶
| 項目 | 説明 | 補足 |
|---|---|---|
| アプリケーションの名前 | Amplify上でのアプリケーション名を設定する。 | |
| 本番稼働ブランチ | 基点ブランチを設定する。 | Amplifyを本番運用しない場合は、developブランチを設定すれば良い。 |
| ブランチの自動検出 | ブランチの自動検出を有効化するか否かを設定する。 | ワイルドカード (*) を組み込む場合、アスタリスクを2つ割り当てないと、ブランチが検知されないことがある。例：『**foo**,**bar**』 |
| プレビュー | GitHubのプルリクエスト上にAmplify環境のURLを通知する。 | 執筆時点 (2021/02/07) では、プルリクエストを新しく作成しても、これは自動的に登録されない。そのため、その都度手動で登録する必要がある。 |
| アクセスコントロール | Amplify環境に認証機能を設定する。 | 執筆時点 (2021/02/07) では、Basic認証を使用できる。 |
| リダイレクト | リダイレクトするパスを設定する。 | 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の場合、裏側ではS3、CloudFront、Route53などが作成され、静的ホスティングが実行される。
SSRの場合、フロントエンドのみでなくバックエンドの実行環境が必要になるため、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: <パス>