見出し画像

S3の静的ウェブサイトホスティングでGitHub ActionsのCI/CD環境を構築する

金山 雄星 / Yusei Kanayama

おはようございます。金山雄星です。
今回はGitHub Actionsを用いて、S3でホスティングをしているWEBサイトのソースコードがGitHubでマージされた時に自動デプロイする環境を構築する方法を解説します。

はじめに

サードパーティーのGithubアクションが公開されていたりしますが、
AWS公式から出ているこちらをもちいてAWS CLIを利用したいとおもいます。


今回の要件

静的WEBサイト（ビルド不要なHTML,CSS,JSで構成されたシンプルなWEBサイト）を、S3+CloudFront（+ACMでSSL化）の構成でホスティングしていることを想定しています。

GitHubのブランチとデプロイ環境の対応は以下の通りです。

・mainブランチ：本番環境（S3+CloudFront）
・developブランチ：ステージング環境（S3の静的ウェブサイトホスティング機能を利用）

各featureブランチで開発
↓
developブランチにマージ、ステージング環境に自動デプロイ
↓
ステージンク環境でテスト
↓
問題なければmainにマージ、本番環境に自動デプロイ

のシンプルな流れです。

GitHub Actionsを設定していく

これらの設定はGitHubのGUI上で可能です。

公式ドキュメントはこちら
https://docs.github.com/ja/actions

ymlファイルを作成

Actionsのページの「set up a workflow yourself」から下記の2つのファイルを作成してCommitしてください！

ステージング環境デプロイ用（deploy-staging.yml）

name: Deploy to Staging

on:
  pull_request:
    types:
      - closed
    branches:
      - develop

jobs:
  deploy:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - 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: ${{ vars.AWS_REGION }}

      - name: Deploy to S3
        run: |
          aws s3 sync . s3://${{ vars.STAGING_BUCKET_NAME }} --delete --exclude ".git/*" --exclude ".github/*" --exclude ".gitignore" --exclude "README.md"

本番環境デプロイ用（deploy-production.yml）

name: Deploy to Production

on:
  pull_request:
    types:
      - closed
    branches:
      - main

jobs:
  deploy:
    if: github.event.pull_request.merged == true
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - 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: ${{ vars.AWS_REGION }}

      - name: Deploy to S3
        run: |
          aws s3 sync . s3://${{ vars.PRODUCTION_BUCKET_NAME }} --delete --exclude ".git/*" --exclude ".github/*" --exclude ".gitignore" --exclude "README.md"

      - name: Clear CloudFront cache
        run: aws cloudfront create-invalidation --distribution-id ${{ vars.DISTRIBUTION_ID }} --paths "/*"

※ 以前、aws s3コマンドで --deleteのオプションをつけ忘れていてファイルがたまり続けていたことがあったので注意です💦

※ 「.」にしているディレクトリや　--excludeオプションは適宜変更してください〜

環境変数を設定

GitHubの当該リポジトリのページの
Settings > Security(サイドバー) > Secrets and variables > Actions
で設定できます。

Secretsは一度登録したら見えなくなり、Variablesは登録しても内容が見えますし変更可能な仕様となっております。

今回は、AWSのクレデンシャルをSecretsに、バケット名などはVariablesに登録しましょう！

AWSのクレデンシャルを作成方法はこちらを参照

権限強めなポリシーはやめておいたほうがいいですね。
できれば、IAM ポリシーでS3のバケット限定に設定しましょう。

正しく設定できるとこんな感じ


これで、無事マージをトリガーにSTGと本番環境に自動デプロイできる設定が完了しました。

おわりに

CI/CDっていいですよね！！
FTPやSSHでscpする時間は、定期的にCSVをダウンロードしてエクセルに貼り付ける作業の次に、退屈な時間だとおもってます。この世からなくなったほうがいい。

調べたり実装したりしてる時間があったら手動でやったほうが早いんじゃないか？というツッコミはご勘弁を。。

以上、ギークかなやまがお送りしました。
お疲れ様でした！

金山雄星


いいなと思ったら応援しよう！