概要
今回はAWS Amplifyを構築し、ブラウザゲームにアクセスできる環境を作ってみようと思います。コンソールからの構築と、勉強も兼ねてTerraformでの構築を記録していきます。
AWS Amplifyとは
「AWS Amplify(アンプリファイ)」とは、Webアプリケーションを簡単にデプロイし公開できるサービスです。また、サーバレスサービスのため、「node.jsでのアプリの起動」や「アクセスログの初期設定」といったバックエンドの処理は全て自動で行われます。めちゃくちゃ便利です。
且つ、無料枠が多く用意されており、個人のWebアプリであればほとんど費用をかけずに運用することができます。筆者の場合、アクセス数がまだほとんどないので参考程度ですが、2週間ほどで「0.07$」です。ちなみにEC2は1ヶ月で約「10\$」でした。Amplify最高です。
Terraformとは
「Terraform(テラフォーム)」とは、インフラ構築をコードで実行・管理ができるツールです。IaC(Infrastructure as Code)とも呼ばれるそうです。これまでGUIでポチポチするのが一番楽だと思っていた筆者ですが、「他のクラウド・インフラサービスを1つの言語で統一管理できる」「同じ環境をすぐに用意できる」「他の人に構築内容を簡単に共有できる」等のメリットがあることを知り、長くエンジニアをやっていくのであれば便利なツールなのでは？と少しずつ感じてきたところです。
今回初めてTerraformを勉強し、いくつかの初心者用サイトを見てみたのですが、結局以下の公式チュートリアルが分かりやすく、必要なファイル構成やresourceの理解についても丁寧に説明されていました。何から始めたらいいか分からない人はとりあえず覗いてみるのもいいかもしれません。英語で書いてありますが、google翻訳で日本語に訳して読むのも良し、英語で読んでみて雰囲気で俺KAKKEEEするも良しです。
事前準備：Githubリポジトリへのアップロード
以下の公式手順を参考にして、AmplifyにデプロイするWebアプリケーションをGithubのリポジトリに配置しておきます。
1. コンソールでの構築手順
I. 「AWS Amplify」を開き、『アプリケーションをデプロイ』をクリックします。
II. 「ソースコードプロバイダーを選択」画面が表示されるので、今回は『GitHub』を選択し、『次へ』をクリックします。
III. 初めて設定する場合は、AmplifyとGitHubを接続する必要があるため、『Authorize』をクリックします。
IV. 許可するリポジトリを設定します。今回は『only select repositories』＞『Select repositories』から特定のリポジトリのみを許可し、『Install & Authorize』をクリックします。
V. 「ソースコードプロバイダーを選択」画面に戻るので、『リポジトリを選択』から許可したリポジトリを再度選択し、『次へ』をクリックします。
VI. 「アプリケーションの設定」画面が表示されるので、『次へ』をクリックします。
VII. 「確認」画面が表示されるので、『保存してデプロイ』をクリックします。
VIII. 『デプロイ済み』と表示されればデプロイ完了です。
IX. 作成されたドメインをクリックすると、デプロイしたWebアプリにブラウザからアクセスできます。
2. Terraformでの構築手順
I. VS Code等のエディタを開き、ターミナルから「Terraform」と「AWS CLI」をダウンロードします。詳細な手順は下記の公式サイトをご確認ください。
II. 各ファイルを準備します。
※『ご自身の情報を記入してください』とコメントが書いてある部分は、情報を更新してください。
provider "aws" {
region = var.aws_region
}
terraform {
required_version = ">= 1.0.0"
required_providers {
aws = {
source = "hashicorp/aws"
version = "~> 6.0"
}
}
}
# 「aws_amplify_app」リソースでアプリを作成
resource "aws_amplify_app" "my_amplify_app" {
name = var.amplify_app_name
repository = var.github_repository_url
oauth_token = var.github_oauth_token
platform = "WEB"
# ビルドの設定(デフォルト)
build_spec = <<-EOT
version: 1
frontend:
phases:
build:
commands:
- ""
artifacts:
baseDirectory: /
files:
- '**/*'
cache:
paths: []
EOT
}
# 「aws_amplify_branch」リソースでデプロイするブランチの定義
resource "aws_amplify_branch" "main_branch_deployment" {
app_id = aws_amplify_app.my_amplify_app.id
branch_name = var.github_branch_name
stage = "PRODUCTION"
}
# 「aws_amplify_domain_association」リソースでドメインの追加
resource "aws_amplify_domain_association" "my_amplify_domain"{
app_id = aws_amplify_app.my_amplify_app.id
# ご自身の情報を記入してください
domain_name = "アプリ用のドメイン名"
sub_domain{
branch_name = var.github_branch_name
prefix = ""
}
sub_domain{
branch_name = var.github_branch_name
prefix = "www"
}
# ブランチが作成されてから「aws_amplify_domain_association」リソースを実行
depends_on = [aws_amplify_branch.main_branch_deployment]
}
# 「aws_amplify_webhook」リソースで受信ウェブフックを作成
resource "aws_amplify_webhook" "master"{
app_id = aws_amplify_app.my_amplify_app.id
branch_name = var.github_branch_name
# ブランチが作成されてから「aws_amplify_webhook」リソースを実行
depends_on = [aws_amplify_branch.main_branch_deployment]
}
各リソースの概要
| リソース名 | 説明 |
|---|---|
| aws_amplify_app | Amplifyホスティングアプリを作成するためのリソースです。GitHub等のリポジトリをrepositoryの引数で指定することで、アプリをデプロイすることができます。 |
| aws_amplify_branch | デプロイするアプリが保存されたリポジトリのブランチを指定するリソースです。今回の場合、GitHubのmainブランチを、変数「var.amplify_branch_name」を通してbranch_nameに設定しています。 |
| aws_amplify_domain_association | デプロイしたアプリに紐づけるドメイン名(URL)を指定するリソースです。設定がなければ自動でAmplifyがドメインを作成しますが、「Route53」等で作成したドメインがあれば、domain_nameの引数で設定することができます。 |
| aws_amplify_webhook | リポジトリをアプリケーションに再接続するためのウェブフックを作成するリソースです。これで作成されるURLを使用することで、CLIからリポジトリを再起動することができ、初回の「ジョブを実行」もコンソールにアクセスする必要なく実行することができます。 |
もう一つ、terraformには「aws_amplify_backend_environment」と呼ばれるリソースが準備されていますが、こちらはAmplify Gen1用のコマンドのため、Gen2に移行した現在(2026年10月)は使用が推奨されておりません。使用した場合、一応Gen1として形だけ作成はされますが、「Fetching status..」がずっと表示されるため、利用することはできないようです。
# リージョンの定義
variable "aws_region" {
description = "To deploy resources."
type = string
default = "ap-northeast-1"
}
# Amplifyアプリケーションの名前
variable "amplify_app_name" {
description = "The name of the Amplify App."
type = string
default = "my_amplify_app"
}
# GitHubリポジトリのURL
variable "github_repository_url" {
description = "The URL of the GitHub repository."
type = string
# ご自身の情報を記入してください
default = "GitHubリポジトリのURL"
}
# GitHub OAuth Token
variable "github_oauth_token" {
description = "GitHub OAuth Token with 'repo' scope for Amplify to access the repository."
type = string
sensitive = true
# ご自身の情報を記入してください
default = "GitHub個人アクセストークン"
}
variable "github_branch_name" {
description = "The branch name to deploy in GitHub."
type = string
default = "main"
}
output "amplify_app_url" {
description = "The default URL of the deployed Amplify application."
value = aws_amplify_app.my_amplify_app.default_domain
}
output "amplify_app_id" {
description = "The ID of the Amplify App."
value = aws_amplify_app.my_amplify_app.id
}
output "amplify_webfook_url" {
description = "The default URL of the Amplify Webhook."
value = aws_amplify_webhook.master.url
}
III. ターミナルに下記のコマンドを入力し、Amplifyにアプリを作成します。
terraform init
terraform apply --auto-approve
IV. 「Outputs：」で出力された「amplify_webfook_url」をコピーした後、ターミナルに下記のコマンドを入力し、デプロイを実行します(初回のみ)。
curl -X POST -d {} "<amplify_webfook_urlをペースト>&operation=startbuild" -H "Content-Type:application/json"
# 例：curl -X POST -d {} "https://www.example.com&operation=startbuild" -H "Content-Type:application/json"
V. 2~3分後、作成されたドメインもしくは指定したドメインにアクセスすると、デプロイしたWebアプリにブラウザからアクセスできます。
今回のまとめ
今回は「AWSマネジメントコンソール」と「Terraform」の双方のやり方で、Amplifyアプリを作成してみました。GitHubアカウント・リポジトリを用意できれば「AWSマネジメントコンソール」からの構築は簡単にできたと思います。
また、「Terraform」には初期学習コストに時間を費やしてしまったものの、構築情報をコードで可視化できたり、エラー解決のために似たような環境を何度も構築する際は手早くサイクルを回せるなど、初心者ながらIaCの伸びしろを感じました。outputファイルで出力した情報を基に、運用の自動化について考えるのも面白いかもしれませんね。
参考Webサイト