【Github】個人ブログ構築してみた 開発デプロイ手順編
こんにちは。
今回は、Hugoで作成しているブログサイトを開発・デプロイする手順を紹介します。
開発やデプロイで重要なことは、正常なサイトをデプロイすることです。
構想した手順では、人的ミスを減らすこと、バージョニング競合の防止にフォーカスをおいて、なるべく正常なサイトをデプロイできるような作業手順を構築しました。
開発・デプロイの全体像
まず実装したブログ基盤システムは下記の通りとなります。
静的サイトジェネレーターHugoを使用してブログを作成し、AWSをホストサーバーとして使用します。
そのうち、ブログを追加・編集しようとしたとき、開発者の作業範囲は赤枠となります。
さらに開発・デプロイ手順にフォーカスすると、以下の流れになります。
① Githubから最新バージョンをClone
② ローカルで記事を追加・編集し、静的サイトをビルド
③ 静的サイトの検証を行い、GitHubにPush
④ GitHub Actionsで最新バージョンを自動デプロイ
基本的に、Hugoのプロジェクトや静的サイトはGithub上で管理します。
Github上のプロジェクトをローカル上にCloneし、ローカル環境で開発し、最新バージョンのプロジェクトをPushすることで、AWS側にも最新静的サイトをデプロイしていきます。
Githubから最新バージョンをClone
本開発・デプロイシステムでは、Gtihub上最新バージョンとAWS側にデプロイされた静的サイトが常に最新状態で同期した状態となっています。
したがって、Github上の最新バージョンレポジトリをCloneしてローカル側で開発を行います。
git clone <Githubレポジトリ パス>'
ローカルで記事を追加・編集し、静的サイトをビルド
レポジトリをクローンしたら、Hugoプロジェクトを修正します。
ここでは、詳細のHugoプロジェクトの修正方法は省きますが、筆者は良く下記のフォルダを編集・確認します。
・ 「content」フォルダ：
ブログの各記事のベースファイルが格納される。
・ 「Public/postまたはposts」フォルダ：
デプロイ後、ブログの各記事の静的サイトファイルが格納される。
※「content」フォルダのベースファイルを元に、ビルドして作成されたもの。
ローカルでの表示テストには、
hugo server
を使用します。
ビルドには、
hugo
を実行します。
静的サイトの検証を行い、GitHubにPush
ビルドした静的サイト含む、HugoプロジェクトをGithub上にプッシュします。
なお、Gitのコミット時、静的テストが本番要件を満たしているかを、Git Hooksを使用して検証します。
不適格な場合は、commitが途中で止まります。
git add .
git commit -m "更新情報"
//静的サイトが不適格であればcommitが停止される。
git push origin main
GitHub Actionsで最新バージョンを自動デプロイ
GitHub Actionsを用いて、最新バージョンの静的サイトをAWS（S3）にデプロイを自動化します。
今回の構成では、GitHubリポジトリにプッシュがあった際に、Public上の静的ページをデプロイするように、GitHub Actionsでトリガー設定します。
この設定により、前セクションの「git push」コマンドの数分後にAWS（S3）に最新静的ページが反映されます。
name: Deploy to S3
on:
push:
branches:
- main # mainブランチにpushされたときに実行
jobs:
deploy:
runs-on: ubuntu-latest # GitHubが用意するUbuntuマシン上で実行
steps:
- name: Checkout source code
uses: actions/checkout@v3 # ソースコードを取得
- name: Sync to S3
uses: jakejarvis/s3-sync-action@v0.5.1 # S3同期アクション
with:
args: --delete # ファイルをS3と同期（S3上を一旦削除して再デプロイする）
env:
AWS_S3_BUCKET: ${{ secrets.AWS_BUCKET_NAME }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: your-region
SOURCE_DIR: ./public/ #public上の静的ページのみデプロイ
※S3へのアクセスにはAWSの認証情報（Bucket, Access Key、Secret Access Key）は、GitHubの Secrets に登録しておきます。
ちなみに料金は個人利用（Free）だと、2000分/月 無料です。
仮にオーバーしたとしても、オーバーしたタイミングで自動でActionsの動きが停止されるのでコスト管理も安全です。
参照：Github Actions - Github Docs
おわりに
静的ページの開発・デプロイ方法を整理してきました。
開発・デプロイ時に大事なこととして、正常なプロダクトをデプロイすることだと思います。
それを達成するべく、人的ミスを減らすこと、バージョニング競合の防止にフォーカスをおいて、手順を整備しました。
ある程度、手順や確認項目を自動化することで、ストレスなしで開発できる点もいいところだと思いました。
それでは。
Tags