こんにちは！この記事は、私が初めてAWSのS3とGitHub Actionsを使って静的Webサイトをデプロイした時の備忘録です。今回はAstroを使ってWeb作成をしてみました。結論から言うと、S3を使ったCICDは想像以上に簡単でした。ここでは、私が行った手順を説明していきます。
前提条件
このガイドを進める前に、以下のツールとアカウントが必要です：
- コマンドラインインターフェース（CLI）の基本的な操作スキル
- Git（バージョン管理システム）
- AWS CLI（インストール済み）
- AWSアカウント
- GitHubアカウント
- Node.js（プロジェクトに応じたバージョン）
- 静的サイトジェネレーター（例：Astro）の基本知識
※ フレームワークは使いたいのを使ってください。
上記の準備ができていることを確認してから、以下の手順に進んでください。
AWSとGitHubを使用した静的Webサイトのデプロイ手順
1. IAMの作成
クレデンシャルの情報を取得します。
- 起動経路:
- IAM > ユーザー > アクセスキーの作成
- アクセスキーとシークレットアクセスキーを取得します。
- ユーザーにはS3のフルアクセス権限が必要です。
2. S3の作成
- 静的Webホスティングの設定を行います。
3. GitHubでの設定
-
GitHubにログイン
- ブラウザでGitHubにアクセス
-
リポジトリを作成
-
GitHub Secretsの設定確認手順
a. 該当のリポジトリに移動する
b. リポジトリの設定ページに移動
・リポジトリのメインページで、上部のタブから「Settings」をクリック
c. Secretsのページに移動する
・左側のサイドバーから「Secrets and variables」>「Actions」をクリック
d. 以下の4つのシークレットを作成します：
・AWS_ACCESS_KEY_ID
・AWS_SECRET_ACCESS_KEY
・AWS_REGION
・S3_BUCKET【参考】
各シークレットは下記の様に記入
4. GitHub Actionsワークフロー作成手順
-
GitHubリポジトリにアクセス
- ブラウザでGitHubにログインし、対象のリポジトリページを開く
-
Actionsタブに移動
- リポジトリのメインページ上部にある「Actions」タブをクリック
-
新しいワークフローの作成
- 「New workflow」ボタンをクリックし
- または「set up a workflow yourself」リンクをクリックし
-
ワークフローファイルの編集
-
.github/workflows/deploy.ymlという名前のファイルが自動的に作成されます。 - 以下のコードをコピーして、エディタに貼り付けます：
-
name: Deploy to S3
on:
push:
branches:
- main # メインブランチ名に応じて変更（例：master）
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '20' # プロジェクトに合わせて変更可能
- name: Install dependencies
run: npm ci
- name: Build Astro site
run: npm run build
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v4
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_REGION }}
- name: Deploy to S3
run: |
aws s3 sync dist/ s3://${{ secrets.S3_BUCKET }} --delete
まとめ
以上が、S3とGitHub Actionsを使った静的Webサイトのデプロイ手順です。最初は難しそうに見えましたが、実際にやってみると驚くほど簡単でした。特に、GitHub Actionsの設定さえ済ませてしまえば、あとは自動的にデプロイが行われるので、とても便利です。