【Terraform】指定したドメインでCloudFrontにアクセスできない。。。

Route53でCloudFrontとドメインを関連付け、ACMを適用しました。

だけど、そのドメインにアクセスしてもうまく表示されなかったので、解決していきます。

※Terraformを使って構築しています

環境
ゴール
現状
原因調査
対処①：CloudFrontとACMを紐づける
エラー②：ACMのリージョンがダメ
対処②：ACMのリージョンをバージニア北部へ
エラー③：aws_acm_certificate_validation修正
対処③：aws_acm_certificate_validation修正
エラー④：サポートされていないプロトコルが使用
対処④：エイリアスの設定
動作確認
参考

環境

WSLでUbuntsuを使用
Terraform v1.4.2

ゴール

https://<用意したドメイン(test.hisui-app.com)>/index.html

にアクセスし、下記が表示されるようにしたい

現状

<用意したドメイン(test.hisui-app.com)>/index.html のAレコードにCloudFrontのエイリアスを指定
ACMにて、test.hisui-app.comのSSL証明書を取得済み。
test.hisui-app.comにHTTPSでアクセスできない。。。
CloudFrontのオリジンにはS3を設定
オリジンのS3にはindex.htmlがアップロードされている
<CloudFrontのドメイン>/index.htmlにアクセスすると、index.htmlが表示される
<用意したドメイン(test.hisui-app.com)>/index.html にアクセスすると
下記のように403エラーが表示される

原因調査

test.hisui-app.comにHTTPSでアクセスできない。。。
<CloudFrontのドメイン>/index.htmlにアクセスすると、index.htmlが表示される

上記より、CloudFront – S3間はうまくいっており、ACM – CloudFrontがダメかな

と予想しました。

調べてみると、

CloudFrontがHTTPS通信のみを要求していますが、ACMが適用されておらずHTTPでアクセスしていたこと

が原因みたいです。

要は、CloudFrontにACMを適用できていなかったんですねぇ。。。

下記のAWS 公式ドキュメントを見ても、
HTTPでアクセスすると403エラーが返ってくるみたい

https://repost.aws/ja/knowledge-center/CloudFront-troubleshoot-403-errors

対処①：CloudFrontとACMを紐づける

CloudFrontとACMを紐づけていきます

こちらを参考に、下記のようにコードを修正してみます

# CloudFrontを定義
resource "aws_CloudFront_distribution" "main" {

  ...

  viewer_certificate {
    acm_certificate_arn = aws_acm_certificate.cert.arn
    ssl_support_method = "sni-only"
    minimum_protocol_version = "TLSv1"
  }
}

# ACM証明書を定義
resource "aws_acm_certificate" "cert" {
  domain_name       = "test.hisui-app.com"
  validation_method = "DNS"

  lifecycle {
    create_before_destroy = true
  }
}

# CloudFrontを定義

resource "aws_CloudFront_distribution" "main" {

...

viewer_certificate {

acm_certificate_arn = aws_acm_certificate.cert.arn

ssl_support_method = "sni-only"

minimum_protocol_version = "TLSv1"

}

# ACM証明書を定義

resource "aws_acm_certificate" "cert" {

domain_name = "test.hisui-app.com"

validation_method = "DNS"

lifecycle {

create_before_destroy = true

}

これで terraform apply します

エラー②：ACMのリージョンがダメ

ん、エラーが出ました。。。

╷
│ Error: updating CloudFront Distribution (********): InvalidViewerCertificate: The specified SSL certificate doesn't exist, isn't in us-east-1 region, isn't valid, or doesn't include a valid certificate chain.
│       status code: 400, request id: ********
│
│   with aws_CloudFront_distribution.main,
│   on CloudFront.tf line 2, in resource "aws_CloudFront_distribution" "main":
│    2: resource "aws_CloudFront_distribution" "main" {
│
╵

╷

│ Error: updating CloudFront Distribution (********): InvalidViewerCertificate: The specified SSL certificate doesn't exist, isn't in us-east-1 region, isn't valid, or doesn't include a valid certificate chain.

│ status code: 400, request id: ********

│

│ with aws_CloudFront_distribution.main,

│ on CloudFront.tf line 2, in resource "aws_CloudFront_distribution" "main":

│ 2: resource "aws_CloudFront_distribution" "main" {

│

╵

DeepLで翻訳してみると

指定されたSSL証明書が存在しない、
us-east-1リージョンにない、有効でない、
または有効な証明書チェーンを含んでいない場合です。

指定されたSSL証明書が存在しない、

us-east-1リージョンにない、有効でない、

または有効な証明書チェーンを含んでいない場合です。

ということらしい。

確かにAWS 公式ドキュメントを見ても

CloudFrontに適用する場合にはバージニア北部 (us-east-1) リージョンにないとダメらしい

対処②：ACMのリージョンをバージニア北部へ

ACMをバージニア北部 (us-east-1) リージョンに作っていきます

ただ、ほかのリソースは基本東京(ap-northeast-1)リージョンに作成したいので、

エイリアスを使用していきます。

下記のようにproviderを指定します。

aliasを指定していないほうはデフォルトで使用されます。

# デフォルトではこちらの値が使われる
provider "aws" {
  region  = "ap-northeast-1"
}

# こちらを指定するには
# provider = aws.virginia
# と記述する
provider "aws" {
  alias  = "virginia"
  region = "us-east-1"
}

# デフォルトではこちらの値が使われる

provider "aws" {

region = "ap-northeast-1"

}

# こちらを指定するには

# provider = aws.virginia

# と記述する

provider "aws" {

alias = "virginia"

region = "us-east-1"

}

そして、ACMのみ virginia というエイリアスを設定した provider を指定します。

# ACM証明書を定義
resource "aws_acm_certificate" "cert" {
  domain_name       = local.domain_name
  validation_method = "DNS"
  # バージニア北部リージョンを指定したproviderを使用
  provider = aws.virginia

  lifecycle {
    create_before_destroy = true
  }
}

# ACM証明書を定義

resource "aws_acm_certificate" "cert" {

domain_name = local.domain_name

validation_method = "DNS"

# バージニア北部リージョンを指定したproviderを使用

provider = aws.virginia

lifecycle {

create_before_destroy = true

}

これで terraform apply します

エラー③：aws_acm_certificate_validation修正

╷
│ Error: reading ACM Certificate (arn:aws:acm:us-east-1*******:certificate/**********): couldn't find resource
│
│   with aws_acm_certificate_validation.cert,
│   on acm.tf line 13, in resource "aws_acm_certificate_validation" "cert":
│   13: resource "aws_acm_certificate_validation" "cert" {
│

╷

│ Error: reading ACM Certificate (arn:aws:acm:us-east-1*******:certificate/**********): couldn't find resource

│

│ with aws_acm_certificate_validation.cert,

│ on acm.tf line 13, in resource "aws_acm_certificate_validation" "cert":

│ 13: resource "aws_acm_certificate_validation" "cert" {

│

ACMが見つからないって言ってますね。。。

対処③：aws_acm_certificate_validation修正

aws_acm_certificate_validationのほうもバージニア北部リージョンにする必要がありました

resource "aws_acm_certificate_validation" "cert" {
  certificate_arn = aws_acm_certificate.cert.arn
  validation_record_fqdns = flatten([ values(aws_route53_record.cert)[*].fqdn ])
  provider = aws.virginia
}

resource "aws_acm_certificate_validation" "cert" {

certificate_arn = aws_acm_certificate.cert.arn

validation_record_fqdns = flatten([ values(aws_route53_record.cert)[*].fqdn ])

provider = aws.virginia

}

これで terraform apply します

とりあえず通りました！

エラー④：サポートされていないプロトコルが使用

test.hisui-app.com/index.html　にアクセスしてみると、以下のエラーが。

「サポートされていないプロトコルが使用されています。」？？？

対処④：エイリアスの設定

CloudFrontに対して任意のドメインを使用するには代替ドメインを設定する必要があります。

Using custom URLs by adding alternate domain names (CNAMEs) - Amazon CloudFront

Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the default CloudFront-assigned domain name, and how to ...

これをTerraformに落とし込みます

resource "aws_CloudFront_distribution" "main" {
  aliases = [ "test.hisui-app.com" ]

  ...

}

resource "aws_CloudFront_distribution" "main" {

aliases = [ "test.hisui-app.com" ]

...

}

これで terraform apply します

動作確認

test.hisui-app.com/index.html　にアクセスしてみます

無事、表示されました！！！（HTTPSでアクセスできてます）

参考

https://repost.aws/ja/knowledge-center/CloudFront-troubleshoot-403-errors

Terraform Registry

terrafromでaws acm作成 cloudfrontの場合バージニアで作成しないといけないんだけどどうやるの？ - Qiita

providerの設定を変更したものを用意して、aliasを使うことで解決 provider "aws" {} provider "aws" { alias = "virginia" region = "us-east-...