Vercelにアプリをデプロイすると、適当なドメインを発行しアクセスできるようになります。
しかし、特定のドメインを指定してアプリにアクセスしたいことがあると思います。
そこで、今回はTerraformを使用して、カスタムドメインを設定します。
ゴール
こちらの記事でデプロイしたアプリにカスタムドメインでアクセスできること
【Vercel】【Terraform】Next.jsアプリをデプロイしてみる
Next.jsで作ったアプリをVercelへデプロイしてみます。
今回はVercelのコンソールではなく、Terraformを使用して構築していきます
Vercel コンソールでの設定方法はこちら
...
hisuiblog.com
2023.08.15
私の場合は、test.hisui-app.com をカスタムドメインとして設定していきます。
前提
・Vercelにアプリをデプロイしている
・AWS CLIおよび、Terraformが使える
・Route53 にホストゾーンがある
本記事で使用しているバージョンは下記です。
|
1 2 3 4 5 |
$ terraform -version Terraform v1.4.2 on linux_amd64 + provider registry.terraform.io/hashicorp/aws v4.67.0 + provider registry.terraform.io/vercel/vercel v0.15.0 |
Terraform
main.tf
Route53を使用したいので、ProviderにAWSを追加します。（ハイライト部を追加）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
terraform { required_providers { vercel = { source = "vercel/vercel" version = "~> 0.4" } aws = { source = "hashicorp/aws" version = "~> 4.16" } } } |
project.tf
Vercelのプロジェクトに設定したいカスタムドメインを指定します。（ハイライト部を追加）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
resource "vercel_project" "example" { name = "sample-blog-nextjs-app" framework = "nextjs" git_repository = { type = "github" # ユーザー名/リポジトリ名は置き換えてください repo = "<ユーザー名/リポジトリ名>" } } resource "vercel_project_domain" "example" { project_id = vercel_project.example.id domain = "test.hisui-app.com" } |
route53.tf
カスタムドメインをVercelのDNSサーバーで名前解決できるようにレコードを作成します。
Route53に hisui-app.com のホストゾーンがあるため、そこにCNAMEレコードを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# ホストゾーンの参照 data "aws_route53_zone" "example" { name = "hisui-app.com" } # CNAMEレコードを定義 resource "aws_route53_record" "example" { zone_id = data.aws_route53_zone.example.zone_id name = "test" type = "CNAME" ttl = 300 records = ["cname.vercel-dns.com"] } |
・aws_route53_record
| プロパティ | 説明 |
| zone_id | ホストゾーンのID。 data で hisui-app.com のホストゾーンを参照し、そのIDを指定。 |
| name | サブドメインで付け足す文字列。 筆者は、test.hisui-app.com を使用したいので、test を指定。 |
| type | レコードタイプ。今回は、CNAME。 |
| ttl | ttl。デフォルトの300を指定。 |
| records | レコードの値。 cname.vercel-dns.com は、VercelのCNAME用DNSサーバーのこと。(参考) |
init, plan, apply
init
ProviderにAWSを追加したので、initが必要です
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$ terraform init Initializing the backend... Initializing provider plugins... - Finding hashicorp/aws versions matching "~> 4.16"... - Reusing previous version of vercel/vercel from the dependency lock file - Installing hashicorp/aws v4.67.0... - Installed hashicorp/aws v4.67.0 (signed by HashiCorp) - Using previously-installed vercel/vercel v0.15.0 Terraform has made some changes to the provider dependency selections recorded in the .terraform.lock.hcl file. Review those changes and commit them to your version control system if they represent changes you intended to make. Terraform has been successfully initialized! You may now begin working with Terraform. Try running "terraform plan" to see any changes that are required for your infrastructure. All Terraform commands should now work. If you ever set or change modules or backend configuration for Terraform, rerun this command to reinitialize your working directory. If you forget, other commands will detect it and remind you to do so if necessary. |
plan
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
~$ terraform plan vercel_project.example: Refreshing state... [id=prj_****************] vercel_deployment.example: Refreshing state... [id=dpl_*************] data.aws_route53_zone.example: Reading... data.aws_route53_zone.example: Read complete after 2s [id=***************] Terraform used the selected providers to generate the following execution plan. Resource actions are indicated with the following symbols: + create Terraform will perform the following actions: # aws_route53_record.example will be created + resource "aws_route53_record" "example" { + allow_overwrite = (known after apply) + fqdn = (known after apply) + id = (known after apply) + name = "test" + records = [ + "cname.vercel-dns.com", ] + ttl = 300 + type = "CNAME" + zone_id = "***************" } # vercel_project_domain.example will be created + resource "vercel_project_domain" "example" { + domain = "test.hisui-app.com" + id = (known after apply) + project_id = "prj_****************" + team_id = (known after apply) } Plan: 2 to add, 0 to change, 0 to destroy. ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── Note: You didn't use the -out option to save this plan, so Terraform can't guarantee to take exactly these actions if you run "terraform apply" now. |
apply
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
~$ terraform apply vercel_project.example: Refreshing state... [id=prj_****************] data.aws_route53_zone.example: Reading... vercel_deployment.example: Refreshing state... [id=dpl_*************] data.aws_route53_zone.example: Read complete after 2s [id=***************] Terraform used the selected providers to generate the following execution plan. Resource actions are indicated with the following symbols: + create Terraform will perform the following actions: # aws_route53_record.example will be created + resource "aws_route53_record" "example" { + allow_overwrite = (known after apply) + fqdn = (known after apply) + id = (known after apply) + name = "test" + records = [ + "cname.vercel-dns.com", ] + ttl = 300 + type = "CNAME" + zone_id = "***************" } # vercel_project_domain.example will be created + resource "vercel_project_domain" "example" { + domain = "test.hisui-app.com" + id = (known after apply) + project_id = "prj_****************" + team_id = (known after apply) } Plan: 2 to add, 0 to change, 0 to destroy. Do you want to perform these actions? Terraform will perform the actions described above. Only 'yes' will be accepted to approve. Enter a value: yes vercel_project_domain.example: Creating... aws_route53_record.example: Creating... vercel_project_domain.example: Creation complete after 1s [id=test.hisui-app.com] aws_route53_record.example: Still creating... [10s elapsed] aws_route53_record.example: Still creating... [20s elapsed] aws_route53_record.example: Still creating... [30s elapsed] aws_route53_record.example: Still creating... [40s elapsed] aws_route53_record.example: Creation complete after 41s [id=***************_test_CNAME] Apply complete! Resources: 2 added, 0 changed, 0 destroyed. |
動作確認
Vercelのコンソールにて、Project Settings > Domains を確認します
下記のように「Valid Configuration」や「Assigned to main」になっていればOK！
最後に、カスタムドメインでアプリにアクセスできるか確認します。
対象のドメイン（筆者は、https://test.hisui-app.com）にアクセスしてみましょう！
アプリが表示されればOKですー！
参考文献
Adding & Configuring a Custom Domain
Learn how to add a custom domain to your Vercel project, verify it, and correctly set the DNS or Nameserver values.
vercel.com
Troubleshooting domains
Learn about common reasons for domain misconfigurations and how to troubleshoot your domain on Vercel.
vercel.com
Terraform Registry
registry.terraform.io
Terraform Registry
registry.terraform.io
コメント