静的ウェブサイトを Amazon S3 にホスティングし、独自ドメインで公開するまでの環境構築を terraform を使って行っていきます。

AWS S3 に静的ウェブサイトをホスティングして独自ドメインで公開するまで

静的ウェブサイトを Amazon S3 にホスティングし、独自ドメインで公開するまでの環境構築を terraform を使って行っていきます。
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83">実行環境</a></li>
<li><a href="#%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">環境変数について</a></li>
<li><a href="#%E5%A4%89%E6%95%B0%E3%81%AE%E8%A8%AD%E5%AE%9A">変数の設定</a></li>
<li><a href="#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%AD%E3%82%B0%E7%94%A8%E3%81%AE%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E4%BD%9C%E6%88%90">アクセスログ用のバケット作成</a></li>
<li><a href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E7%94%A8%E3%81%AE%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E4%BD%9C%E6%88%90">アプリケーション用のバケット作成</a></li>
<li><a href="#%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A">独自ドメインの設定</a>
<ol>
<li><a href="#%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A8%E3%83%9B%E3%82%B9%E3%83%88%E3%82%BE%E3%83%BC%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">ドメインとホストゾーンの作成について</a></li>
<li><a href="#%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%A8%AD%E5%AE%9A">レコードの設定</a></li>
</ol>
</li>
<li><a href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">動作確認</a></li>
</ol>
<h2 id="実行環境">実行環境</h2>
今回の実行環境は以下になります
<ul>
<li>Terraform v0.15.1</li>
</ul>
コードはモジュール化を行わずに一つの tf ファイルに書いていきます。
今回使う AWS のサービスは、S3 と Route53 です。
<h2 id="環境変数について">環境変数について</h2>
terraform で構成を定義していくにあたり、環境変数を tfvars に記述しておきますが、以下のようになっています。
<dl class="description_setting">
<dt>terraform.tfvars</dt>
<dd>
<pre><code class="hljs language-shell">aws_id = 123456789
aws_access_key = "XXXXXXXXXXXXXXXXXXXX"
aws_secret_key = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
aws_region = "ap-northeast-1"
domain_name = "example.com"
domain_host_name = "www"
</code></pre>
</dd>
</dl>
<ul>
<li>AWS のアカウント情報と、デフォルトのリージョンとして東京リージョンを指定しています。</li>
<li>ネイキッドドメインとホスト名をそれぞれ分けて定義しています。</li>
</ul>
<h2 id="変数の設定">変数の設定</h2>
これから使用する値について変数とプロバイダを設定しておきます。
<dl class="description_setting">
<dt>main.tf</dt>
<dd>
<pre><code class="hljs language-shell"># variables
variable "aws_id" {}
variable "aws_access_key" {}
variable "aws_secret_key" {}
variable "aws_region" {}
variable "domain_name" {}
variable "domain_host_name" {}

provider "aws" {
 access_key = var.aws_access_key
 secret_key = var.aws_secret_key
 region = var.aws_region
}

locals {
 fqdn = {
 name = "${var.domain_host_name}.${var.domain_name}"
 }
 bucket = {
 name = local.fqdn.name
 }
}
</code></pre>
</dd>
</dl>
<ul>
<li>AWS プロバイダを定義しています。</li>
<li>Route53 や S3 で使用するための FQDN と Bucket 名の変数を作成しています。</li>
</ul>
<h2 id="アクセスログ用のバケット作成">アクセスログ用のバケット作成</h2>
S3 にホスティングする場合でも、アクセスログを取る事ができます。
(オプション) ウェブトラフィックのログ記録 
<a href="https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/LoggingWebsiteTraffic.html" rel="noopener noreferrer" target="_blank">https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/LoggingWebsiteTraffic.html</a>
そのためのバケットを S3 に作成します。（これが無くてもサイト公開はできるので、必要なら作成してください）
<dl class="description_setting">
<dt>main.tf</dt>
<dd>
<pre><code class="hljs language-shell">## AWS アカウントのユーザー
data "aws_canonical_user_id" "current_user" {}

## S3 for app logs
resource "aws_s3_bucket" "app_logs" {
 bucket = "${local.bucket.name}-logs"
 
 grant {
 id = data.aws_canonical_user_id.current_user.id
 permissions = ["FULL_CONTROL"]
 type = "CanonicalUser"
 }
 grant {
 permissions = ["READ_ACP", "WRITE"]
 type = "Group"
 uri = "http://acs.amazonaws.com/groups/s3/LogDelivery"
 }
}
</code></pre>
</dd>
</dl>
<ul>
<li>権限は ACL ポリシーで設定しています。</li>
<li>前者（1 つめの grant）は、コンソール画面から操作できるように、AWS アカウントの正規ユーザーの権限を設定しています。</li>
<li>後者（2 つめの grant）は、ログを配信するための権限です。</li>
</ul>
<h2 id="アプリケーション用のバケット作成">アプリケーション用のバケット作成</h2>
静的なウェブサイトのソースコードを配置する S3 バケットを作成します。
<dl class="description_setting">
<dt>main.tf</dt>
<dd>
<pre><code class="hljs language-shell">## S3 for Static Website Hosting
resource "aws_s3_bucket" "app" {
 bucket = local.bucket.name
 acl = "public-read"
 policy = templatefile("bucket-policy.json", {
 "bucket_name" = local.bucket.name
 })

 website {
 index_document = "index.html"
 error_document = "error.html"
 }

 logging {
 target_bucket = aws_s3_bucket.app_logs.id
 target_prefix = "log/"
 }
}
</code></pre>
</dd>
</dl>
バケット名は FQDN と同じにします。
templatefile として挿入している json は以下のようになっています。
<dl class="description_setting">
<dt>bucket-policy.json</dt>
<dd>
<pre><code class="hljs language-json">{
 "Version": "2012-10-17",
 "Statement": [
 {
 "Sid": "PublicReadGetObject",
 "Effect": "Allow",
 "Principal": "*",
 "Action": [
 "s3:GetObject"
 ],
 "Resource": [
 "arn:aws:s3:::${bucket_name}/*"
 ]
 }
 ]
}
</code></pre>
</dd>
</dl>
logging の部分は、前項でアクセスログ用のバケットを作成した場合に指定するので、作っていなければ指定不要です。
バケットを作成したら index.html を配置してアクセスしてみると表示されます。
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/225/tbPEfkVP10NI0MTCVeum.png" width="800" height="283" alt="S3へホスティングした静的WEBサイトへアクセス"></div>
<h2 id="独自ドメインの設定">独自ドメインの設定</h2>
WEB サイトの公開はできましたが、ここまでだと URL が amazonaws.com なので、独自ドメインを設定します。
<h3 id="ドメインとホストゾーンの作成について">ドメインとホストゾーンの作成について</h3>
ドメインですが、前提として、Route53 に登録済みのドメインを使用します。
また、ネイキッドドメインのホストゾーン登録は済ませてある前提で進めるので、例えば <a href="http://www.example.com" rel="noopener noreferrer" target="_blank">www.example.com</a> で S3 にホスティングしたサイトを公開するなら、そのネイキッドドメインである example.com のホストゾーンは作成しておいてくだださい。
パブリックホストゾーンの作成 
<a href="https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/CreatingHostedZone.html" rel="noopener noreferrer" target="_blank">https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/CreatingHostedZone.html</a>
<ul>
<li>ドメイン名はネイキッドドメイン（例：example.com）を入力</li>
<li>タイプは「パブリックホストゾーン」を指定</li>
</ul>
これだけです。
ちなみに、ドメインのネームサーバーと、作成したホストゾーンの NS レコードに設定されているネームサーバーが同じ事を確認して、もし違うようならどちらかに揃える必要があります。
<h3 id="レコードの設定">レコードの設定</h3>
terraform で Route53 にレコードを作成します。
<dl class="description_setting">
<dt>main.tf</dt>
<dd>
<pre><code class="hljs language-shell"># Route 53
## ネイキッドドメインのホストゾーン情報
data aws_route53_zone "naked" {
 name = var.domain_name
}

## A レコード作成（to S3 Bucket）
resource "aws_route53_record" "main_a" {
 zone_id = data.aws_route53_zone.naked.zone_id
 name = local.fqdn.name
 type = "A"
 alias {
 evaluate_target_health = true
 name = "s3-website-${var.aws_region}.amazonaws.com"
 zone_id = aws_s3_bucket.app.hosted_zone_id
 }
}
</code></pre>
</dd>
</dl>
<ul>
<li>A レコードを作成しています。</li>
<li>ホストゾーンは、作成済みのネイキッドドメインのホストゾーン情報を取得して zone_id に指定しています。</li>
<li>エイリアスの設定として、S3 のウェブサイトエンドポイントを設定します。</li>
</ul>
Amazon S3 バケットでホストされているウェブサイトへのトラフィックのルーティング 
<a href="https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/RoutingToS3Bucket.html" rel="noopener noreferrer" target="_blank">https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/RoutingToS3Bucket.html</a>
<h2 id="動作確認">動作確認</h2>
レコードを作成したら、あとは DNS の浸透を待ってアクセスすると表示されます。
<div class="img_wrap"><amp-img layout="responsive" src="/images/posts/225/KzRPh9CZyr8x3NdwtnKV.png" width="800" height="283" alt="S3へホスティングした静的WEBサイトへ独自ドメインからアクセス"></div>
S3 にホスティングしたウェブサイトを独自ドメインで公開できました。
next：<a href="/posts/226">AWS CloudFront で S3 にホスティングした静的ウェブサイトを CDN 配信（＆独自ドメインのHTTPS化）</a>

静的ウェブサイトを Amazon S3 にホスティングし、独自ドメインで公開するまでの環境構築を terraform を使って行っていきます。
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83">実行環境</a></li>
<li><a href="#%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">環境変数について</a></li>
<li><a href="#%E5%A4%89%E6%95%B0%E3%81%AE%E8%A8%AD%E5%AE%9A">変数の設定</a></li>
<li><a href="#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%AD%E3%82%B0%E7%94%A8%E3%81%AE%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E4%BD%9C%E6%88%90">アクセスログ用のバケット作成</a></li>
<li><a href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E7%94%A8%E3%81%AE%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E4%BD%9C%E6%88%90">アプリケーション用のバケット作成</a></li>
<li><a href="#%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A">独自ドメインの設定</a>
<ol>
<li><a href="#%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A8%E3%83%9B%E3%82%B9%E3%83%88%E3%82%BE%E3%83%BC%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">ドメインとホストゾーンの作成について</a></li>
<li><a href="#%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%A8%AD%E5%AE%9A">レコードの設定</a></li>
</ol>
</li>
<li><a href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">動作確認</a></li>
</ol>
<h2 id="実行環境">実行環境</h2>
今回の実行環境は以下になります
<ul>
<li>Terraform v0.15.1</li>
</ul>
コードはモジュール化を行わずに一つの tf ファイルに書いていきます。
今回使う AWS のサービスは、S3 と Route53 です。
<h2 id="環境変数について">環境変数について</h2>
terraform で構成を定義していくにあたり、環境変数を tfvars に記述しておきますが、以下のようになっています。
<dl class="description_setting">
<dt>terraform.tfvars</dt>
<dd>
<pre><code class="hljs language-shell">aws_id = 123456789
aws_access_key = "XXXXXXXXXXXXXXXXXXXX"
aws_secret_key = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
aws_region = "ap-northeast-1"
domain_name = "example.com"
domain_host_name = "www"
</code></pre>
</dd>
</dl>
<ul>
<li>AWS のアカウント情報と、デフォルトのリージョンとして東京リージョンを指定しています。</li>
<li>ネイキッドドメインとホスト名をそれぞれ分けて定義しています。</li>
</ul>
<h2 id="変数の設定">変数の設定</h2>
これから使用する値について変数とプロバイダを設定しておきます。
<dl class="description_setting">
<dt>main.tf</dt>
<dd>
<pre><code class="hljs language-shell"># variables
variable "aws_id" {}
variable "aws_access_key" {}
variable "aws_secret_key" {}
variable "aws_region" {}
variable "domain_name" {}
variable "domain_host_name" {}

provider "aws" {
 access_key = var.aws_access_key
 secret_key = var.aws_secret_key
 region = var.aws_region
}

locals {
 fqdn = {
 name = "${var.domain_host_name}.${var.domain_name}"
 }
 bucket = {
 name = local.fqdn.name
 }
}
</code></pre>
</dd>
</dl>
<ul>
<li>AWS プロバイダを定義しています。</li>
<li>Route53 や S3 で使用するための FQDN と Bucket 名の変数を作成しています。</li>
</ul>
<h2 id="アクセスログ用のバケット作成">アクセスログ用のバケット作成</h2>
S3 にホスティングする場合でも、アクセスログを取る事ができます。
(オプション) ウェブトラフィックのログ記録 
<a href="https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/LoggingWebsiteTraffic.html" rel="noopener noreferrer" target="_blank">https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/LoggingWebsiteTraffic.html</a>
そのためのバケットを S3 に作成します。（これが無くてもサイト公開はできるので、必要なら作成してください）
<dl class="description_setting">
<dt>main.tf</dt>
<dd>
<pre><code class="hljs language-shell">## AWS アカウントのユーザー
data "aws_canonical_user_id" "current_user" {}

## S3 for app logs
resource "aws_s3_bucket" "app_logs" {
 bucket = "${local.bucket.name}-logs"
 
 grant {
 id = data.aws_canonical_user_id.current_user.id
 permissions = ["FULL_CONTROL"]
 type = "CanonicalUser"
 }
 grant {
 permissions = ["READ_ACP", "WRITE"]
 type = "Group"
 uri = "http://acs.amazonaws.com/groups/s3/LogDelivery"
 }
}
</code></pre>
</dd>
</dl>
<ul>
<li>権限は ACL ポリシーで設定しています。</li>
<li>前者（1 つめの grant）は、コンソール画面から操作できるように、AWS アカウントの正規ユーザーの権限を設定しています。</li>
<li>後者（2 つめの grant）は、ログを配信するための権限です。</li>
</ul>
<h2 id="アプリケーション用のバケット作成">アプリケーション用のバケット作成</h2>
静的なウェブサイトのソースコードを配置する S3 バケットを作成します。
<dl class="description_setting">
<dt>main.tf</dt>
<dd>
<pre><code class="hljs language-shell">## S3 for Static Website Hosting
resource "aws_s3_bucket" "app" {
 bucket = local.bucket.name
 acl = "public-read"
 policy = templatefile("bucket-policy.json", {
 "bucket_name" = local.bucket.name
 })

 website {
 index_document = "index.html"
 error_document = "error.html"
 }

 logging {
 target_bucket = aws_s3_bucket.app_logs.id
 target_prefix = "log/"
 }
}
</code></pre>
</dd>
</dl>
バケット名は FQDN と同じにします。
templatefile として挿入している json は以下のようになっています。
<dl class="description_setting">
<dt>bucket-policy.json</dt>
<dd>
<pre><code class="hljs language-json">{
 "Version": "2012-10-17",
 "Statement": [
 {
 "Sid": "PublicReadGetObject",
 "Effect": "Allow",
 "Principal": "*",
 "Action": [
 "s3:GetObject"
 ],
 "Resource": [
 "arn:aws:s3:::${bucket_name}/*"
 ]
 }
 ]
}
</code></pre>
</dd>
</dl>
logging の部分は、前項でアクセスログ用のバケットを作成した場合に指定するので、作っていなければ指定不要です。
バケットを作成したら index.html を配置してアクセスしてみると表示されます。
<div class="img_wrap"><img src="/images/posts/225/tbPEfkVP10NI0MTCVeum.png" width="800" height="283" alt="S3へホスティングした静的WEBサイトへアクセス"></div>
<h2 id="独自ドメインの設定">独自ドメインの設定</h2>
WEB サイトの公開はできましたが、ここまでだと URL が amazonaws.com なので、独自ドメインを設定します。
<h3 id="ドメインとホストゾーンの作成について">ドメインとホストゾーンの作成について</h3>
ドメインですが、前提として、Route53 に登録済みのドメインを使用します。
また、ネイキッドドメインのホストゾーン登録は済ませてある前提で進めるので、例えば <a href="http://www.example.com" rel="noopener noreferrer" target="_blank">www.example.com</a> で S3 にホスティングしたサイトを公開するなら、そのネイキッドドメインである example.com のホストゾーンは作成しておいてくだださい。
パブリックホストゾーンの作成 
<a href="https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/CreatingHostedZone.html" rel="noopener noreferrer" target="_blank">https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/CreatingHostedZone.html</a>
<ul>
<li>ドメイン名はネイキッドドメイン（例：example.com）を入力</li>
<li>タイプは「パブリックホストゾーン」を指定</li>
</ul>
これだけです。
ちなみに、ドメインのネームサーバーと、作成したホストゾーンの NS レコードに設定されているネームサーバーが同じ事を確認して、もし違うようならどちらかに揃える必要があります。
<h3 id="レコードの設定">レコードの設定</h3>
terraform で Route53 にレコードを作成します。
<dl class="description_setting">
<dt>main.tf</dt>
<dd>
<pre><code class="hljs language-shell"># Route 53
## ネイキッドドメインのホストゾーン情報
data aws_route53_zone "naked" {
 name = var.domain_name
}

## A レコード作成（to S3 Bucket）
resource "aws_route53_record" "main_a" {
 zone_id = data.aws_route53_zone.naked.zone_id
 name = local.fqdn.name
 type = "A"
 alias {
 evaluate_target_health = true
 name = "s3-website-${var.aws_region}.amazonaws.com"
 zone_id = aws_s3_bucket.app.hosted_zone_id
 }
}
</code></pre>
</dd>
</dl>
<ul>
<li>A レコードを作成しています。</li>
<li>ホストゾーンは、作成済みのネイキッドドメインのホストゾーン情報を取得して zone_id に指定しています。</li>
<li>エイリアスの設定として、S3 のウェブサイトエンドポイントを設定します。</li>
</ul>
Amazon S3 バケットでホストされているウェブサイトへのトラフィックのルーティング 
<a href="https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/RoutingToS3Bucket.html" rel="noopener noreferrer" target="_blank">https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/RoutingToS3Bucket.html</a>
<h2 id="動作確認">動作確認</h2>
レコードを作成したら、あとは DNS の浸透を待ってアクセスすると表示されます。
<div class="img_wrap"><img src="/images/posts/225/KzRPh9CZyr8x3NdwtnKV.png" width="800" height="283" alt="S3へホスティングした静的WEBサイトへ独自ドメインからアクセス"></div>
S3 にホスティングしたウェブサイトを独自ドメインで公開できました。
next：<a href="/posts/226">AWS CloudFront で S3 にホスティングした静的ウェブサイトを CDN 配信（＆独自ドメインのHTTPS化）</a>

Author