静的サイトジェネレータ「Hugo」でブログサイトを S3 + CloudFrontでホストするまで [第4回〜HugoをGithub Action でS3にプッシュする〜]
![静的サイトジェネレータ「Hugo」でブログサイトを S3 + CloudFrontでホストするまで [第4回〜HugoをGithub Action でS3にプッシュする〜]](/img/thumbnails/hugo.webp)
ブログ構築シリーズ
静的サイトジェネレータ「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間の処理を紹介します。
環境
- 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
こちら を参考に修正することができました。
参考ドキュメント
- https://dev.classmethod.jp/articles/github-actions-aws-sts-credentials-iamrole/
- https://dev.classmethod.jp/articles/create-iam-id-provider-for-github-actions-with-management-console/
- https://qiita.com/hajimeni/items/0e885b752a3a571d05be#2%E3%81%A4%E7%9B%AE%E3%81%AE%E3%83%88%E3%83%A9%E3%83%83%E3%83%97
- https://github.com/marketplace/actions/configure-aws-credentials-action-for-github-actions