{ "componentChunkName": "component---src-templates-post-js", "path": "/untitled-2/", "result": {"data":{"ghostPost":{"id":"Ghost__Post__60faaf3a3986b000013a3ba2","title":"Terraformを使いAWSにSSL通信と独自ドメインを使ったStatic websiteを構築する話し(GitHub Actionsもあるよ)","slug":"untitled-2","featured":false,"feature_image":null,"excerpt":"\nざっくりしたいこと\nVue.js でできたStatic websiteを独自ドメイン with SSLで公開する\n\nSSL証明書の発行、サブドメイン作成などもすべて、できる限りTerraformで作成する\n\n使用技術:\n・Vue.js\n\n・Terraform(v0.12.26)\n\n・GitHub Actions\n\nその他実行環境:\n * aws-cli/2.0.19\n * Python/3.8.3\n * Linux/5.4.0–37-generic botocore/2.0.0dev23\n\nVue.js\nStatic websiteの作成\n\nTerraform\n前提: State用のS3は作成済み。ドメインはRoute53で取得済み。\nDeployで作ったものはすべて壊せるようにしたい\n\nS3,Cloud Front,ACM,Route53あたりをTerraformで触っていく。\n\n以下のことをすべてTerraformで自動化する\n\nS3:Privateで作成＆Force Deleteの有効化\n\nblog-terraform-aws-static-site-s3.tfGitHub G","custom_excerpt":null,"visibility":"public","created_at_pretty":"23 July, 2021","published_at_pretty":"24 June, 2020","updated_at_pretty":"20 August, 2021","created_at":"2021-07-23T20:59:54.000+09:00","published_at":"2020-06-25T00:00:00.000+09:00","updated_at":"2021-08-20T21:36:22.000+09:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Kohei Kondo","slug":"kooooohe","bio":null,"profile_image":"https://ghost.tech.anti-pattern.co.jp/content/images/2022/04/MVIMG_20180910_102813.png","twitter":"@kooooohe_","facebook":null,"website":null}],"primary_author":{"name":"Kohei Kondo","slug":"kooooohe","bio":null,"profile_image":"https://ghost.tech.anti-pattern.co.jp/content/images/2022/04/MVIMG_20180910_102813.png","twitter":"@kooooohe_","facebook":null,"website":null},"primary_tag":{"name":"Terraform","slug":"terraform","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},"tags":[{"name":"Terraform","slug":"terraform","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"AWS","slug":"aws","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"},{"name":"GitHub Actions","slug":"github-actions","description":null,"feature_image":null,"meta_description":null,"meta_title":null,"visibility":"public"}],"plaintext":"\nざっくりしたいこと\nVue.js でできたStatic websiteを独自ドメイン with SSLで公開する\n\nSSL証明書の発行、サブドメイン作成などもすべて、できる限りTerraformで作成する\n\n使用技術:\n・Vue.js\n\n・Terraform(v0.12.26)\n\n・GitHub Actions\n\nその他実行環境:\n * aws-cli/2.0.19\n * Python/3.8.3\n * Linux/5.4.0–37-generic botocore/2.0.0dev23\n\nVue.js\nStatic websiteの作成\n\nTerraform\n前提: State用のS3は作成済み。ドメインはRoute53で取得済み。\nDeployで作ったものはすべて壊せるようにしたい\n\nS3,Cloud Front,ACM,Route53あたりをTerraformで触っていく。\n\n以下のことをすべてTerraformで自動化する\n\nS3:Privateで作成＆Force Deleteの有効化\n\nblog-terraform-aws-static-site-s3.tfGitHub Gist: instantly share code, notes,\nand snippets.Gist262588213843476\n[https://gist.github.com/kooooohe/1d6e4b92f7990002307589b3c4f8421d]]resource \"aws_s3_bucket\" \"site\" {\n bucket = var.bucket_name\n acl = \"private\"\n tags = {\n name = var.tag\n }\n force_destroy = true\n versioning {\n enabled = true\n }\n}\n\nresource \"aws_s3_bucket_policy\" \"site\" {\n bucket = aws_s3_bucket.site.id\n policy = data.aws_iam_policy_document.s3_site_policy.json\n}\n\ndata \"aws_iam_policy_document\" \"s3_site_policy\" {\n statement {\n actions = [\"s3:GetObject\"]\n resources = [\"${aws_s3_bucket.site.arn}/*\"]\n\n principals {\n type = \"AWS\"\n identifiers = [aws_cloudfront_origin_access_identity.site.iam_arn]\n }\n }\n}\n\n\n\nCloudFront:作成した(S3,証明書,Domain)と紐づけていく、存在しないページはすべて/index.htmlにリダイレクト\n\nblog-terraform-aws-static-site-cloud-front.tfGitHub Gist: instantly share code,\nnotes, and snippets.Gist262588213843476\n[https://gist.github.com/kooooohe/183a76378bfcae4b83378336741e4514]locals {\n s3_origin_id = \"s3-origin-${var.site_domain}\"\n}\n\nresource \"aws_cloudfront_origin_access_identity\" \"site\" {\n comment = var.site_domain\n}\n\nresource \"aws_cloudfront_distribution\" \"site\" {\n tags = {\n name = var.tag\n }\n origin {\n\n domain_name = aws_s3_bucket.site.bucket_regional_domain_name\n origin_id = local.s3_origin_id\n\n s3_origin_config {\n origin_access_identity = aws_cloudfront_origin_access_identity.site.cloudfront_access_identity_path\n }\n }\n\n enabled = true\n is_ipv6_enabled = true\n comment = var.site_domain\n default_root_object = \"index.html\"\n\n default_cache_behavior {\n allowed_methods = [\"GET\", \"HEAD\"]\n cached_methods = [\"GET\", \"HEAD\"]\n target_origin_id = local.s3_origin_id\n\n forwarded_values {\n query_string = false\n cookies {\n forward = \"none\"\n }\n }\n\n viewer_protocol_policy = \"redirect-to-https\"\n min_ttl = 0\n default_ttl = 3600\n max_ttl = 86400\n }\n\n restrictions {\n geo_restriction {\n restriction_type = \"none\"\n }\n }\n\n custom_error_response {\n error_caching_min_ttl = 3000\n error_code = 404\n response_code = 200\n response_page_path = \"/index.html\"\n }\n\n custom_error_response {\n error_caching_min_ttl = 3000\n error_code = 403\n response_code = 200\n response_page_path = \"/index.html\"\n }\n\n\n\n price_class = \"PriceClass_200\"\n\n # CloudFrontドメインの証明書を利用\n //viewer_certificate {\n // cloudfront_default_certificate = true\n //}\n\n\n aliases = [var.site_domain]\n\n viewer_certificate {\n acm_certificate_arn = aws_acm_certificate_validation.acm_cert.certificate_arn\n ssl_support_method = \"sni-only\"\n minimum_protocol_version = \"TLSv1\"\n }\n}\n\n\nRoute53: 取得済みの独自ドメインから指定のサブドメインのHost Zoneを作成し、NSレコードを追加する。その後、作成したCloud Frontへ\n\nblog-terraform-aws-static-site-dns.tfGitHub Gist: instantly share code, notes,\nand snippets.Gist262588213843476\n[https://gist.github.com/kooooohe/b71e48d6d645cbcf28fe47d40cc79c43]data \"aws_route53_zone\" \"root_domain\" {\n name = var.root_domain\n}\n\nresource \"aws_route53_zone\" \"sub_domain\" {\n name = var.site_domain\n tags = {\n name = var.tag\n }\n}\n\nresource \"aws_route53_record\" \"root_domain\" {\n depends_on = [aws_route53_zone.sub_domain]\n allow_overwrite = true\n name = var.site_domain\n ttl = 30\n type = \"NS\"\n zone_id = data.aws_route53_zone.root_domain.zone_id\n\n records = [\n aws_route53_zone.sub_domain.name_servers.0,\n aws_route53_zone.sub_domain.name_servers.1,\n aws_route53_zone.sub_domain.name_servers.2,\n aws_route53_zone.sub_domain.name_servers.3,\n ]\n}\n\nresource \"aws_route53_record\" \"sub_domain\" {\n zone_id = aws_route53_zone.sub_domain.zone_id\n name = aws_route53_zone.sub_domain.name\n type = \"A\"\n\n alias {\n name = aws_cloudfront_distribution.site.domain_name\n zone_id = aws_cloudfront_distribution.site.hosted_zone_id\n evaluate_target_health = false\n }\n}\n\n\n\nACM:ワイルドカード証明書を発行し、認証する\n\nblog-terraform-aws-static-site-acm.tfGitHub Gist: instantly share code, notes,\nand snippets.Gist262588213843476\n[https://gist.github.com/kooooohe/219bff811fa617a4d7e7f636b82874fe]\nresource \"aws_acm_certificate\" \"acm_cert\" {\n provider = aws.us-east-1\n domain_name = var.root_domain\n subject_alternative_names = [\"*.${var.root_domain}\"]\n validation_method = \"DNS\"\n\n lifecycle {\n create_before_destroy = true\n }\n\n tags = {\n name = var.tag\n }\n}\n\n\nresource \"aws_route53_record\" \"cert_validation\" {\n allow_overwrite = true\n zone_id = data.aws_route53_zone.root_domain.id\n name = aws_acm_certificate.acm_cert.domain_validation_options.0.resource_record_name\n type = aws_acm_certificate.acm_cert.domain_validation_options.0.resource_record_type\n records = [aws_acm_certificate.acm_cert.domain_validation_options.0.resource_record_value]\n ttl = 60\n}\n\nresource \"aws_route53_record\" \"cert_validation_alt\" {\n allow_overwrite = true\n zone_id = data.aws_route53_zone.root_domain.id\n name = aws_acm_certificate.acm_cert.domain_validation_options.1.resource_record_name\n type = aws_acm_certificate.acm_cert.domain_validation_options.1.resource_record_type\n records = [aws_acm_certificate.acm_cert.domain_validation_options.1.resource_record_value]\n ttl = 60\n}\n\n\n\nresource \"aws_acm_certificate_validation\" \"acm_cert\" {\n provider = aws.us-east-1\n certificate_arn = aws_acm_certificate.acm_cert.arn\n validation_record_fqdns = [aws_route53_record.cert_validation.fqdn, aws_route53_record.cert_validation_alt.fqdn]\n}\n\n\n完成物\nGitHub - kooooohe/aws-static-site-terraformContribute to\nkooooohe/aws-static-site-terraform development by creating an account on\nGitHub.\nGitHubkooooohe [https://github.com/kooooohe/aws-static-site-terraform]\n\nStateはローカルに保存するように作ってあるので、下記のようなファイルを作れば作成済みのS3に保存されるようになる\n\nmain.tf\n\n```json\nterraform {\n backend \"s3\" {\n bucket = \"mybucket\"\n key = \"path/to/my/key\"\n region = \"us-east-1\"\n }\n }\n```\n\n特にModule化とかはしていないが、variables.tfの値を変更すればそれぞれのドメインで同等の環境を誰でも作ることができるようにはしてある。\n\nGitHub Actions\nS3のファイル更新とCloud Frontのキャッシュ削除をGitHub Actionsで行う。\n\n※S3の更新からのLambda発火でinvalidation作成とかもやろうと思ったのだが、こっちのほうがシンプルなので採用\n\nblog-terraform-aws-static-site-actions.ymlGitHub Gist: instantly share code,\nnotes, and snippets.Gist262588213843476\n[https://gist.github.com/kooooohe/2ce9cc174d29fae4f8ea92b8e8fd536c]name: Deploy Production\n\non:\n push:\n branches: [ master ]\n\njobs:\n build:\n\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [14.x]\n\n steps:\n - uses: actions/checkout@v2\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v1\n with:\n node-version: ${{ matrix.node-version }}\n - run: yarn install\n - run: yarn build\n\n - name: Configure AWS credentials\n uses: aws-actions/configure-aws-credentials@v1\n with:\n aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}\n aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n aws-region: ap-northeast-1\n - run: aws s3 sync ./dist/ s3://${{ secrets.BUCKET_NAME }}/ --delete --exact-timestamps\n - run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID}} --paths \"/*\"","html":"

ざっくりしたいこと

Vue.js でできたStatic websiteを独自ドメイン with SSLで公開する

SSL証明書の発行、サブドメイン作成などもすべて、できる限りTerraformで作成する

使用技術:

・Vue.js

・Terraform(v0.12.26)

・GitHub Actions

その他実行環境:

\n

Vue.js

Static websiteの作成

Terraform

前提: State用のS3は作成済み。ドメインはRoute53で取得済み。
Deployで作ったものはすべて壊せるようにしたい

S3,Cloud Front,ACM,Route53あたりをTerraformで触っていく。

以下のことをすべてTerraformで自動化する

S3:Privateで作成＆Force Deleteの有効化

blog-terraform-aws-static-site-s3.tf
GitHub Gist: instantly share code, notes, and snippets.
Gist262588213843476
]
resource "aws_s3_bucket" "site" {\n  bucket = var.bucket_name\n  acl    = "private"\n  tags = {\n    name = var.tag\n  }\n  force_destroy = true\n  versioning {\n    enabled = true\n  }\n}\n\nresource "aws_s3_bucket_policy" "site" {\n  bucket = aws_s3_bucket.site.id\n  policy = data.aws_iam_policy_document.s3_site_policy.json\n}\n\ndata "aws_iam_policy_document" "s3_site_policy" {\n  statement {\n    actions   = ["s3:GetObject"]\n    resources = ["${aws_s3_bucket.site.arn}/*"]\n\n    principals {\n      type        = "AWS"\n      identifiers = [aws_cloudfront_origin_access_identity.site.iam_arn]\n    }\n  }\n}\n\n
\n

CloudFront:作成した(S3,証明書,Domain)と紐づけていく、存在しないページはすべて/index.htmlにリダイレクト

blog-terraform-aws-static-site-cloud-front.tf
GitHub Gist: instantly share code, notes, and snippets.
Gist262588213843476
locals {\n  s3_origin_id = "s3-origin-${var.site_domain}"\n}\n\nresource "aws_cloudfront_origin_access_identity" "site" {\n  comment = var.site_domain\n}\n\nresource "aws_cloudfront_distribution" "site" {\n  tags = {\n    name = var.tag\n  }\n  origin {\n\n    domain_name = aws_s3_bucket.site.bucket_regional_domain_name\n    origin_id   = local.s3_origin_id\n\n    s3_origin_config {\n      origin_access_identity = aws_cloudfront_origin_access_identity.site.cloudfront_access_identity_path\n    }\n  }\n\n  enabled             = true\n  is_ipv6_enabled     = true\n  comment             = var.site_domain\n  default_root_object = "index.html"\n\n  default_cache_behavior {\n    allowed_methods  = ["GET", "HEAD"]\n    cached_methods   = ["GET", "HEAD"]\n    target_origin_id = local.s3_origin_id\n\n    forwarded_values {\n      query_string = false\n      cookies {\n        forward = "none"\n      }\n    }\n\n    viewer_protocol_policy = "redirect-to-https"\n    min_ttl                = 0\n    default_ttl            = 3600\n    max_ttl                = 86400\n  }\n\n  restrictions {\n    geo_restriction {\n      restriction_type = "none"\n    }\n  }\n\n  custom_error_response {\n    error_caching_min_ttl = 3000\n    error_code            = 404\n    response_code         = 200\n    response_page_path    = "/index.html"\n  }\n\n  custom_error_response {\n    error_caching_min_ttl = 3000\n    error_code            = 403\n    response_code         = 200\n    response_page_path    = "/index.html"\n  }\n\n\n\n  price_class = "PriceClass_200"\n\n  # CloudFrontドメインの証明書を利用\n  //viewer_certificate {\n  //  cloudfront_default_certificate = true\n  //}\n\n\n  aliases = [var.site_domain]\n\n  viewer_certificate {\n    acm_certificate_arn      = aws_acm_certificate_validation.acm_cert.certificate_arn\n    ssl_support_method       = "sni-only"\n    minimum_protocol_version = "TLSv1"\n  }\n}\n
\n

Route53: 取得済みの独自ドメインから指定のサブドメインのHost Zoneを作成し、NSレコードを追加する。その後、作成したCloud Frontへ

blog-terraform-aws-static-site-dns.tf
GitHub Gist: instantly share code, notes, and snippets.
Gist262588213843476
data "aws_route53_zone" "root_domain" {\n  name = var.root_domain\n}\n\nresource "aws_route53_zone" "sub_domain" {\n  name = var.site_domain\n  tags = {\n    name = var.tag\n  }\n}\n\nresource "aws_route53_record" "root_domain" {\n  depends_on      = [aws_route53_zone.sub_domain]\n  allow_overwrite = true\n  name            = var.site_domain\n  ttl             = 30\n  type            = "NS"\n  zone_id         = data.aws_route53_zone.root_domain.zone_id\n\n  records = [\n    aws_route53_zone.sub_domain.name_servers.0,\n    aws_route53_zone.sub_domain.name_servers.1,\n    aws_route53_zone.sub_domain.name_servers.2,\n    aws_route53_zone.sub_domain.name_servers.3,\n  ]\n}\n\nresource "aws_route53_record" "sub_domain" {\n  zone_id = aws_route53_zone.sub_domain.zone_id\n  name    = aws_route53_zone.sub_domain.name\n  type    = "A"\n\n  alias {\n    name                   = aws_cloudfront_distribution.site.domain_name\n    zone_id                = aws_cloudfront_distribution.site.hosted_zone_id\n    evaluate_target_health = false\n  }\n}\n\n
\n

ACM:ワイルドカード証明書を発行し、認証する

blog-terraform-aws-static-site-acm.tf
GitHub Gist: instantly share code, notes, and snippets.
Gist262588213843476
\nresource "aws_acm_certificate" "acm_cert" {\n  provider                  = aws.us-east-1\n  domain_name               = var.root_domain\n  subject_alternative_names = ["*.${var.root_domain}"]\n  validation_method         = "DNS"\n\n  lifecycle {\n    create_before_destroy = true\n  }\n\n  tags = {\n    name = var.tag\n  }\n}\n\n\nresource "aws_route53_record" "cert_validation" {\n  allow_overwrite = true\n  zone_id         = data.aws_route53_zone.root_domain.id\n  name            = aws_acm_certificate.acm_cert.domain_validation_options.0.resource_record_name\n  type            = aws_acm_certificate.acm_cert.domain_validation_options.0.resource_record_type\n  records         = [aws_acm_certificate.acm_cert.domain_validation_options.0.resource_record_value]\n  ttl             = 60\n}\n\nresource "aws_route53_record" "cert_validation_alt" {\n  allow_overwrite = true\n  zone_id         = data.aws_route53_zone.root_domain.id\n  name            = aws_acm_certificate.acm_cert.domain_validation_options.1.resource_record_name\n  type            = aws_acm_certificate.acm_cert.domain_validation_options.1.resource_record_type\n  records         = [aws_acm_certificate.acm_cert.domain_validation_options.1.resource_record_value]\n  ttl             = 60\n}\n\n\n\nresource "aws_acm_certificate_validation" "acm_cert" {\n  provider                = aws.us-east-1\n  certificate_arn         = aws_acm_certificate.acm_cert.arn\n  validation_record_fqdns = [aws_route53_record.cert_validation.fqdn, aws_route53_record.cert_validation_alt.fqdn]\n}\n
\n

完成物

GitHub - kooooohe/aws-static-site-terraform
Contribute to kooooohe/aws-static-site-terraform development by creating an account on GitHub.
GitHubkooooohe

Stateはローカルに保存するように作ってあるので、下記のようなファイルを作れば作成済みのS3に保存されるようになる

main.tf

```json\nterraform {\n  backend \"s3\" {\n      bucket = \"mybucket\"\n      key    = \"path/to/my/key\"\n      region = \"us-east-1\"\n      }\n   }\n```

特にModule化とかはしていないが、variables.tfの値を変更すればそれぞれのドメインで同等の環境を誰でも作ることができるようにはしてある。

GitHub Actions

S3のファイル更新とCloud Frontのキャッシュ削除をGitHub Actionsで行う。

※S3の更新からのLambda発火でinvalidation作成とかもやろうと思ったのだが、こっちのほうがシンプルなので採用

blog-terraform-aws-static-site-actions.yml
GitHub Gist: instantly share code, notes, and snippets.
Gist262588213843476
name: Deploy Production\n\non:\n  push:\n    branches: [ master ]\n\njobs:\n  build:\n\n    runs-on: ubuntu-latest\n\n    strategy:\n      matrix:\n        node-version: [14.x]\n\n    steps:\n    - uses: actions/checkout@v2\n    - name: Use Node.js ${{ matrix.node-version }}\n      uses: actions/setup-node@v1\n      with:\n        node-version: ${{ matrix.node-version }}\n    - run: yarn install\n    - run: yarn build\n\n    - name: Configure AWS credentials\n      uses: aws-actions/configure-aws-credentials@v1\n      with:\n        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}\n        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n        aws-region: ap-northeast-1\n    - run: aws s3 sync ./dist/ s3://${{ secrets.BUCKET_NAME }}/ --delete --exact-timestamps\n    - run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID}} --paths "/*" \n\n
\n","url":"https://ghost.tech.anti-pattern.co.jp/untitled-2/","canonical_url":null,"uuid":"8a2c04ea-cf4f-4f0d-b66c-578c97bfb776","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"60faaf3a3986b000013a3ba2","reading_time":5}},"pageContext":{"slug":"untitled-2"}}, "staticQueryHashes": ["176528973","2358152166","2561578252","2731221146","4145280475"]}