ykokw.xyz blog logo

Blog Posts

No results for 'undefined'Powered by Algolia

HTTPSのブログを構築するまでのメモ

環境

  • Hugo: 静的サイトジェネレーター
  • 独自ドメイン: お名前.com
  • AWS S3: コンテンツ置き場
  • Route 53: DNS
  • ACM: SSL証明書取得
  • Cloudfront: CDN
  • IAM: アカウント管理
  • Circle CI: CIツール
  • Github: リポジトリ

Hugoのセットアップ

Quick startやっておけば大丈夫

独自ドメイン取得

  • お名前.comで取得

    • 取得したいドメインとプランを選ぶだけ。
  • Route 53だけでもよさそう

    • お名前.comで取得したドメインを、Route 53で捌く設定が必要になってくる

S3のセットアップ

(AWSのアカウントがある前提)

  • S3を開いて、ブログ用のバケットを作成

    • ブログのドメインと同じバケット名を作成
    • プロパティを開いて、静的ウェブホスティングを有効にする
    • インデックスドキュメントは index.html
    • Hugoでビルドしたときに生成されるはず
    • ウェブホスティング用のエンドポイントが表示されるので、メモしておく
    • パブリックに読み取りができるポリシーをバケットに設定
{
  "Version": "2008-10-17",
  "Id": "Allow Public Access to All Objects",
  "Statement": [
    {
      "Sid": "1",
      "Effect": "Allow",
      "Principal": {
        "AWS": "*"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*"
    }
  ]
}

コンテンツのデプロイ(ローカル編)

ローカルからS3にアップロードしてみる

IAMでユーザー作成

デプロイ用のユーザーをIAMで作成しておく あとでCircle CIでも、このユーザーのAPIキーを設定する

  • グループを作成
  • グループ用のポリシーを作成

    • S3の操作ができる権限を設定
{
  "Version": "2012-10-17",
    "Statement": [
    {
      "Sid": "1",
      "Effect": "Allow",
      "Action": [
        "s3:GetBucketLocation",
        "s3:GetObject",
        "s3:GetObjectVersion",
        "s3:ListBucket",
        "s3:ListObjects",
        "s3:PutObject",
        "s3:DeleteObject"
      ],
      "Resource": [
        "arn:aws:s3:::<YOUR_BUCKET_NAME>",
        "arn:aws:s3:::<YOUR_BUCKET_NAME>/*"
      ]
    }
  ]
}
  • 作成したグループに属するユーザーを作成

    • アクセスIDとシークレットキーが表示されるのでメモしておく

aws cliインストール

  • pipが使えれば pip install awscli --upgrade --user を実行するとインストールできる
  • pipが使えない場合は sudo curl -kL https://bootstrap.pypa.io/get-pip.py | sudo python を実行すると使えるようになる
  • AWS CLIのパス設定をしないとaws コマンドが使えない

    • pipでインストールされたものがどこにあるか調べる
    • macOSだと ~/Library/Python/x.x/bin みたい(pyenvつかっているとかだとわからない)
  • .bash_profile などにaws コマンドのパスを追加

    • x.x はPythonのバージョンで、 which pythonpython -V でわかる
export PATH=~/Library/Python/x.x/bin:$PATH

環境変数設定

PATHにつづいて、APIキーも環境変数で設定しておく

$ cat ~/.bash_profile
export AWS_ACCESS_KEY_ID=<YOUR_ACCESS_KEY_ID>
export AWS_SECRET_ACCESS_KEY=<YOUR_SECRET_ACCESS_KEY>
export PATH=~/Library/Python/x.x/bin:$PATH

S3へのデプロイ

  • hugo コマンドでpublicフォルダ(ビルドされたHTMLがあるフォルダ)を作成
  • AWS CLIでS3にアップロード
aws s3 sync public/ s3://<YOUR_BUCKET_NAME>/ --delete
  • 成功すると、ウェブホスティング用のエンドポイントにブラウザでアクセス
  • デプロイ内容が表示される

Route 53の設定

  • S3のチュートリアルを参考に、ステップ3・4を実施

    • チュートリアルでは example.comwww.example.com に対応しているが、今回は blog.ykokw.xyz だけで対応した

Route 53のホストゾーンを作成、設定する

  • 取得したドメイン用のホストゾーンを作成

    • デフォルトでNSレコードとSOAレコードが作成されるのでそのまま
    • ホストゾーンの詳細を開くと、ドメインのネームサーバーが表示されるのでメモしておく

エイリアスレコードを作成

  • blog.ykokw.xyz にアクセスしてきたら作成していたS3バケットにルーティングするように、エイリアスレコードを追加
  • macOSでdigの結果が全然返ってこなかったけど、ブラウザで http://blog.ykokw.xyz にアクセスしたらブログが表示された

お名前.comでの設定

やり方がいくつかあるみたい。。。

を両方試していたのだが、最初のやり方で、 ykokw.xyz ドメインのネームサーバーをRoute 53のものに切り替えたので、 お名前.com側でレコード設定しても意味がないように思えてきた。。。 一度設定したお名前.com側のレコードを削除

ACMでSSL証明書作成

  • Cloudfrontに設定するSSL証明書を作成
  • ドメイン管理者としてメールを受け取れる必要そうだったが、お名前.comメールの使い方がわからなくてつまずいてた
  • メール認証の代わりに、CNAMEsを作成してバリデーションを行う方法に切り替えたら一瞬だった

Cloudfront設定

  • Cloudfrontを開いて、Distributionを作成する
  • Origin domain nameで、S3バケットがサジェストされるが、ウェブホスティング用のエンドポイントを指定する

  • SSL証明書は、ACMで作成した独自ドメイン用のものを利用する
  • Distributionのstatusがdeployedになるまでしばらく待つ

Route53の設定変更

  • 作成していたS3のバケットへのエイリアスレコードを、Cloudfrontのdistributionを向くように設定変更するだけ
  • ここまでで https://blog.ykokw.xyz にアクセスできるようになる

Circle CIのセットアップ

config.yml作成

上のQiitaを参考に作成

version: 2
jobs:
  build:
    docker:
      - image: amothic/alpine-hugo:latest
    working_directory: ~/project
    steps:
      - checkout
      - run:
          name: Submodule init
          command: |
            git submodule init
            git submodule update
      - run:
          name: Build
          command: |
            HUGO_ENV=production hugo -v
      - run:
          name: Sync S3
          command: |
            aws s3 sync public s3://<YOUR_BUCKET_NAME>/ --delete
      - run:
          name: Create invalidation
          command: |
            aws configure set preview.cloudfront true
            aws cloudfront create-invalidation --distribution-id <YOUR_DISTRIBUTION_ID> --paths "/*"

IAMユーザーのポリシー追加

S3へのデプロイ後に、Cloudfrontのキャッシュを削除しているので Circle CI用のユーザーが所属するグループにポリシーを追加する

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation"
            ],
            "Resource": "*"
        }
    ]
}

デプロイ

  • Circle CIのconfigファイル込みでgithub にpushする
  • Circle CIからプロジェクトを追加(ベースはotherで)して、ビルドを実行する

    • AWS CLIの環境変数を設定していないのでエラーになる
    • プロジェクト設定 > Environment variablesでAWS のAPIキーをローカル同様に設定
  • 再ビルドをして成功するか確認
  • 成功したら、 https://blog.ykokw.xyz にブラウザでアクセス

感想

  • 雑にいろんなブログとQiita、ときどき公式ドキュメントを見ながら構築した

    • 各ツールの知識を後追いでいれていければ
    • 特にRoute 53(というかDNS)とCircle CI 2.0
  • テンプレートカスタマイズとエラーページ作成はすぐやりたい
  • staging環境みたいなのがほしいときどうするんだろう

参考文献


This content is built with Gatsby