Hugo + CloudFront + S3 + GitHub Actions でCI/CD付きブログサイトを構築してみる Part5 GitHub Actionsを実行

概要

の続きです。今回はgitHub Actionsの設定/実行/記事確認まで実施します。

この記事はそのメモやまとめです。
すでに設定済みの項目がいくつかある。
試行錯誤しながらやったので、手順として不要かもしれない。あくまでメモ用。

GitHub Actionsについて学習

今いる現場で利用はしているが、自分で構築した経験がないのでまずは概要から把握します。
以下の２つの記事を読み概要を把握しました。

完成した資材

基本的には参考サイトをもとに作成します。
github側（GitHub Secrets）の設定は済ませています。

name: Hugo

on:
  push:
    branches:
      - master
    paths:
      - "hogehoge-site/**"

defaults:
  run:
    working-directory: hogehoge-site

env:
  AWS_REGION: ap-northeast-1
  AWS_ROLE_ARN: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/github_assume_role
  AWS_TARGET_S3_BUCKET: ${{ secrets.AWS_TARGET_S3_BUCKET }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.107.0"

      - name: Build
        run: |
         pwd
         ls -la /home/runner/work/hogehoge-site_HUGO 
         ls -la /home/runner/work/hogehoge-site_HUGO/hogehoge-site_HUGO
         ls -la
         hugo

      - name: Configure AWS credentials from IAM Role
        uses: aws-actions/configure-aws-credentials@v1
        with:
          role-to-assume: ${{ env.AWS_ROLE_ARN }}
          aws-region: ${{ env.AWS_REGION }}

      - name: Upload file to S3
        run: aws s3 sync --delete public s3://${{ env.AWS_TARGET_S3_BUCKET }}

こちらのコードについては後に判明する問題の原因を探るためにデバッグ目的で書いたものです。

      - name: Build
        run: |
         pwd
         ls -la /home/runner/work/hogehoge-site_HUGO 
         ls -la /home/runner/work/hogehoge-site_HUGO/hogehoge-site_HUGO
         ls -la
         hugo

ここからは実際に記事をpushしてgithub Actionsを動かして動作を確認していく。

つまづき1

github Actionsがcheck outで失敗する。
エラー内容は

Fetching submodules
  /usr/bin/git submodule sync --recursive
  /usr/bin/git -c protocol.version=2 submodule update --init --force --recursive
  Error: fatal: No url found for submodule path 'hogehoge-site/themes/hugo-tranquilpeak-theme' in .gitmodules
  Error: The process '/usr/bin/git' failed with exit code 128

だった。これはHUGOで利用しているテーマのsubmodule化が必要だった。

Repositoryのtopで以下のコマンドを実行。

git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git hogehoge-site/themes/hugo-tranquilpeak-theme

以下のファイルが生成され、submodule化された。

.gitmodules

[submodule "hugo-tranquilpeak-theme"]
	path = hogehoge-site/themes/hugo-tranquilpeak-theme
	url = https://github.com/kakawait/hugo-tranquilpeak-theme.git

つまづき2

上記修正でgithub actionsは完走したが、ページのレイアウトがおかしい……。
白部分が多いし、ローカルで実行したときとページがぜんぜん違う。

hogehoge-site/config.toml

baseURL = 'http://example.org/'

baseURLがデフォルトのままだった……。
ここをサイトのURLに変えるとローカルで実行したときと同じレイアウトになった。

つまづき3

しかし、メイン部分の記事が表示されていない。
ブラウザのコンソールを見てみる。

403が出ていてコンテンツを読み込めていないようだ。

まずは参考サイトの「サブページが表示できない」を参考にCloudFront Functions でindex.htmlを補完してあげます。
初めて触る機能でしたので、ちょっとググりながら触りました。日本語だと「関数」と表示されています。

この変更をterraformに落とし込みます。
こちらのサイトを参考にしました。

add-index-function.js

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // Check whether the URI is missing a file name.
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    }
    // Check whether the URI is missing a file extension.
    else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }

    return request;
}

上記ファイルをcloudfrontのディストリビューション部分で読み込みます。
function_associationとresource "aws_cloudfront_function" "add-index-function"を追加しました。

~~~~~~
  default_cache_behavior {
    allowed_methods        = ["GET", "HEAD"]
    cached_methods         = ["GET", "HEAD"]
    target_origin_id       = "s3origin"
    compress               = false
    viewer_protocol_policy = "redirect-to-https"
    cache_policy_id        = "4135ea2d-6df8-44a3-9df3-4b5a84be39ad" # CachingDisabled
    #cache_policy_id  = "658327ea-f89d-4fab-a63d-7e88639e58f6" # CachingOptimized
    function_association {
      event_type   = "viewer-request"
      function_arn = aws_cloudfront_function.add-index-function.arn
    }
  }

~~~~~~

# index.htmlのためにcloudfront_functionを定義
resource "aws_cloudfront_function" "add-index-function" {
  name    = "add-index-function"
  runtime = "cloudfront-js-1.0"
  comment = "Add index.html to the path"
  publish = true
  code    = file("${path.module}/add-index-function.js")
}

上記をapplyしても変わりませんでした。
さらに以下を追加修正します。

ListBucketと${aws_s3_bucket.s3_hugo.arn}を追加してapply。

    actions = [
      "s3:GetObject",
      "s3:ListBucket"
    ]
    resources = [
      "${aws_s3_bucket.s3_hugo.arn}/*",
      "${aws_s3_bucket.s3_hugo.arn}"
    ]

これで403は消えたが、未だに記事が表示されない。

つまづき4

記事が公開されていない原因は、
記事のdraftがtrue(下書き)状態なので公開設定にされていないことが原因だった。

---
title: "My First Post"
date: 2023-04-27T08:44:14Z
draft: true
---
## テスト投稿
こんにちは

falseにしたら表示された。

---
title: "My First Post"
date: 2023-04-27T08:44:14Z
draft: false
---
## テスト投稿
こんにちは

ハマったところとか

• つまづきがかなり多く、解決するまでかなり時間がかかってしまった。

次にやること

ひとまずブログとして公開できるところまで完成しました。
ローカルで記事を書いてpushするだけで自動的に Web 公開できる環境が完成！

次は参考サイトに記載されているやつもコストをちょっと調べてみてやってみたいと思います。
WAFは個人の超小さいブログには不要だと思う……。

先にやりたいのは

• HUGOのレイアウトをいい感じに編集する
• datadogと連携させてlogを簡単に確認できるようにする
  ですので、こちらを先にやってみます。