静的サイトジェネレータ「Hugo」でブログサイトを S3 + CloudFrontでホストするまで [第4回〜HugoをGithub Action でS3にプッシュする〜]

静的サイトジェネレータ「Hugo」でブログサイトを S3 + CloudFrontでホストするまで [第4回〜HugoをGithub Action でS3にプッシュする〜]
目次

ブログ構築シリーズ


静的サイトジェネレータ「Hugo」を使って当ブロブサイトを S3 + CloudFront の構成でホストすることができましたので、 構築~デプロイまでの流れをブログ構築シリーズとして全6回でご紹介していきます。 第4回は作成したファイルをgithubにpushしただけでS3へ保存する方法を紹介します。  

1. 第1回〜Hugoの環境構築編〜 
2. 第2回〜HugoにMainroadテーマ適用編〜
3. 第3回〜Hugoを S3 + CloudFront でホストする〜 
4. 第4回〜HugoをGithub Action でS3にプッシュする〜 ☆今回はこちらを紹介します
5. 第5回〜HugoをRoute53 + お名前.comで公開する〜
6. 第6回〜HugoのSEO対策〜

 

TL;DR


本記事でわかることは以下の通りです。

☆ github への push をトリガーに S3バケットへファイルをアップロードする方法

 

構成図


全体像はこんな感じです。
今回はgithub actionとS3間の処理を紹介します。

スクリーンショット2022-07-3014.31.47.webp

 

環境


  • macOS : Monterey v12
  • docker : 20.10.16
  • OS : Rhel9

 

1. OIDCプロバイダとIAMロールの設定


こちら の記事を参考に、 github actions でAWSクレデンシャルを使用せずにgithubとS3間の処理を実現します。

公式ドキュメントでもrole-to-assumeが推奨されてましたので こちらの方式を選択しました。

 

2. github actionsの設定


Settings > Sercrets > Actions に移動し、 下記2項目の名称で値を設定しましょう。

  • AWS_ROLE_TO_ASSUME ※1の手順で作成したIAMロールのARN
  • S3_BUCKET ※アップロード先のS3URL

Actions > New Workflow からワークフローを新たに定義します。

# This is a basic workflow to help you get started with Actions

name: Deploy into technowanko.com

# Controls when the workflow will run
on:
  push:
    branches:
      - main

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # These permissions are needed to interact with GitHub's OIDC Token endpoint.
    permissions:
      id-token: write
      contents: read

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v3
        with:
          submodules: true

      # Runs a single command using the runners shell
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.100.2"
          extended: true
      
      - name: Build Hugo
        run: |
          cd www
          hugo          
      
      - name: upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: my-artifact
          path: www/public
  
  deploy:
    needs: build
    runs-on: ubuntu-latest

    # These permissions are needed to interact with GitHub's OIDC Token endpoint.
    permissions:
      id-token: write
      contents: read

    steps:
      - uses: actions/checkout@v3

      - name: Download artifacts for build
        uses: actions/download-artifact@v3
        with:
          name: my-artifact
          path: www/public # 展開先

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@master
        with:
          aws-region: ap-northeast-1
          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
          role-session-name: GitHubActions-${{ github.run_id }}
          role-duration-seconds: 900 # minimum: 900sec, maximum: iam role session duration

      - name: Upload files to the production website with the AWS CLI
        run: |
          echo "uploding to s3 ..."
          aws s3 sync www/public s3://${{ secrets.S3_BUCKET }}/ --size-only --delete
          aws cloudfront create-invalidation --region ap-northeast-1 --distribution-id E3I59QUS6FUN5Y --paths "/*"
                    

ワークフロー内でhugo buildを実行し、実行結果のみをS3にアップロードしています。 また、更新後はCloudFrontのキャッシュをクリアすることで、新規コンテンツをエンドユーザに表示させるようにします。

 

3. push


では、pushして動作確認を行います。

user@host:~/work/Blog/blog_hosted_on_s3$ pwd
/Users/hogehoge/work/Blog/blog_hosted_on_s3
user@host:~/work/Blog/blog_hosted_on_s3$ ls -1
README.md
deploy.sh*
img_to_s3/
www/
user@host:~/work/Blog/blog_hosted_on_s3$ git add . & git commit -m 'added new post' & git push origin main

github actionsで成功したことが確認できます↓

また、S3バケットで更新部分のタイムスタンプが最新になっていればS3にも正常にアップロードできていることが確認できます。 最後に、ブログURLへアクセスしコンテンツが表示されていれば成功です。

 

(おまけ)はまったポイント1


github actionsからAWSへ疎通できていない。。 なにやらクレデンシャルが読み込めないと。。 今回はクレデンシャルを使用していないが。

Credentials could not be loaded, please check your action inputs: Could not load credentials from any providers

以下のように@v1→@masterに修正する

- name: Configure AWS Credentials
  uses: aws-actions/configure-aws-credentials@master
  with:
     aws-region: ap-northeast-1
     role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
     role-session-name: GitHubActions-${{ github.run_id }}
     role-duration-seconds: 900 # minimum: 900sec, maximum: iam role session duration

 

(おまけ)はまったポイント2


ロールがうまく認証されていない。。?

Not authorized to perform sts:AssumeRoleWithWebIdentity

こちら を参考に修正することができました。

 

参考ドキュメント