Hugo, Bitbucket, S3, CloudFrontで独自ドメインのhttpsブログをホスティングする(Part2)

Hugo, Bitbucket, S3, CloudFrontで独自ドメインのhttpsブログをホスティングする(Part1)の続きです。

最終目標

  • ソースをBitbucketのprivateリポジトリで管理
  • Bitbucketにpush すると 自動ビルドされてS3でホスティング
  • Route53, CertificateManager, CloudFrontにより独自ドメインかつhttps化

Part2の目標

  • Route53でドメインの取得
  • CertificateManagerでワイルドカード証明書の発行
  • S3でホスティング用のバケットを作成
  • CloudFrontでブログ配信用のディストリビューションを作成
  • サブドメインをAレコードのエイリアスとして登録

Route53でドメインの取得

既にドメインを取得している方は不要です。 同じ手順でやりたい方は下記の記事などを参考にRoute53にネームサーバーを移管しておいてください。 >お名前.comのドメインをAWSで使用する4つの方法 - Qiita

まだドメインを取得していない方は下記を参考にドメインを取得してください。

Amazon Route 53でドメインを購入する | Developers.IO

CertificateManagerでワイルドカード証明書の発行

https化に必須となります。 こちらの通りAWSのCertificateManagerは無料なので、これを利用します。 >ACM を通じた SSL/TLS 証明書のプロビジョニングは無料です。お支払いいただくのは、アプリケーションを実行するために作成した AWS リソースの料金のみです。

注意点【重要】

CloudFrontで使える証明書はバージニア北部のリージョンで作った証明書のみです。必ずバージニア北部にリージョンを切り替えてから証明書を発行してください。不安な方はhttps://console.aws.amazon.com/acm/home?region=us-east-1#/から直接バージニア北部のCertificateManagerに入ってください。

手順

  • Request a certificate -> Add domain namesより*.okash1n.comokash1n.comを登録してNext(自身のドメインに読み替えてください)

image.png (93.1 kB)

*.okash1n.comにはokash1n.comが含まれない為、一つの証明書で全て賄うには両方登録する必要があります。サブドメインしか使わない場合は不要です。また、特定のサブドメインのみの証明書を取得したい場合は、sub.okash1n.comのように指定してください。

  • DNS validationを選択してReview
  • 設定に問題が無いことを確認してConfirm and request

image.png (84.0 kB)

  • *.okash1n.comのプルダウンを開いてCreate record in Route 53をクリックしてCreate

image.png (317.8 kB)

okash1n.comの方からでも出来ますが、まったく同じレコードなので一回やれば大丈夫です。

  • Successと表示されるのでContinueする
  • Route53に自動でCNAMEが登録される。
  • 少し待つとStatusがIssuedになる

image.png (102.3 kB)

S3でホスティング用のバケットを作成

バケットの作成

  • blog.okash1n.comでバケットを作成する(全てデフォルトの設定で良いが、バケット名はサイトのドメイン名と一致する必要がある)
  • 作成後にバケットを開いてProperties -> Static website hosting からUse this bucket to host a websiteにチェックを入れる
  • Index documentindex.htmlと入力してSave

image.png (295.5 kB)

Endpointを後でCloudFrontに設定するのでメモしておく。

バケットポリシーの編集

Permissions -> Bucket Policy から下記のポリシーを設定

{
  "Version": "2008-10-17",
  "Id": "Allow Public Access",
  "Statement": [
    {
      "Sid": "1",
      "Effect": "Allow",
      "Principal": {
        "AWS": "*"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::blog.okash1n.com/*"
    }
  ]
}

This bucket has public accessと表示されるが問題ない。

CloudFrontでブログ配信用のディストリビューションを作成

  • CloudFrontを開いてCreate Distribution -> Web -> Get Startedする

以下では必要な設定のみ記載します。

Origin Settings

Default Cache Behavior Settings

  • Viewer Protocol Policy
    • Redirect HTTP to HTTPS
  • Compress Objects Automatically
    • Yes

Distribution Settings

  • Alternate Domain Names
    • blog.okash1n.com
  • SSL Certificate
    • Custom
    • CertificateManagerで作成したものを選択
  • Default Root Object
    • index.html

上記の設定をしたらCreate Distributionでディストリビューションを作成する。statusDeployedになるまで20分ほどかかる場合もあるので待つ。その間にRoute53でサブドメインを作成する為に作成中のディストリビューションからDomain Name (hogehoge.cloudfront.net)をコピーしておく。

サブドメインをAレコードのエイリアスとして登録

Route53を開いてHosted zonedからokash1n.comを選択しCreate Record Setする

  • Name
    • blog
  • Type
    • A IPv4 address
  • Alias
    • Yes
  • Alias target
    • hogehoge.cloudfront.net (先程コピーしたもの)

上記のように設定したらCreateでレコードを作成する。

続きます

Part3では

  • IAMの設定
  • Pipelines用のDockerfileを用意する
  • bitbucket-pipelines.ymlの準備
  • Pipelinesの設定
  • 自動ビルド
  • 記事の作成

をやっていきます。ついにWebに公開するのでお楽しみに。

Share Comments
comments powered by Disqus