Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

GitHub ActionsでAWS S3に自動でデプロイする(静的ファイルのディレクトリを丸ごとアップロードする)

例えばこんなときに便利

  • Web開発で画像などをassetsstaticといった名前のディレクトリにまとめている
  • それらのファイルはS3でホスティングする

やり方の解説

※以下はS3のバケットを公開設定にして画像等をホスティングする想定ですが、公開設定にしないことも可能です。

Step.1 静的ファイルを1つのディレクトリにまとめる

  • ホスティングするディレクトリstatic-filesを作成
  • サンプル画像yakiniku.jpgを作成
  • 例外的にアップロードしないサンプルファイルREADME.mdを作成(任意)
  • GitHub Actionsのワークフローを書くworkflow.ymlを作成
tree.txt
your-project-dir
├── .github
│   └── workflows
│       └── workflow.yml
└── static-files
    ├── README.md
    └── yakiniku.jpg

Step.2 事前準備

詳細は省略します。

  • GitHub Actions用のIAMユーザーを作成
  • GitHubのSecretsに上記IAMユーザーのシークレットを登録
  • S3のバケットをprojectname-static-filesという名前で作成(ホスティングする場合は公開設定にする)
    • 実際にはS3のバケット名はグローバルでユニークにする必要がある公式ドキュメント

Step.3 GitHub Actionsのワークフローを書く

解説の前に、まずは全体を載せます。

github/workflows/workflow.yml
name: s3-deploy-sample
on:
  pull_request:
    branches:
      - master
    types: [opened, synchronize, closed] #他のjobがある想定でこの設定にしている

jobs:
  UploadStaticFiles:
    name: Upload static files
    if: github.event.pull_request.merged == true #マージされたときのみこのjobを実行する
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: "Configure AWS credentials"
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_DEV_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_DEV_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1
      - name: S3 sync
        working-directory: static-files
        run: aws s3 sync . s3://projectname-static-files --delete --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude "README.md"

  AnotherJob:
    # 以下省略

ポイント

実際にS3へアップロードしているの部分は以下です。

github/workflows/workflow.yml
      - name: S3 sync
        working-directory: static-files
        run: aws s3 sync . s3://projectname-static-files --delete --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude "README.md"

working-directoryでカレントディレクトリをstatic-filesにした上で、

aws s3 syncを使用してカレントディレクトリとバケットを同期させています。

※他のいくつかの記事(Google検索結果)ではaws s3 cpを用いていますが、cpではファイルの追加はされますが、削除を行うことができません。

オプションの解説

  • --deleteは、バケットには存在するがディレクトリにはないファイルがあった場合に、バケットのファイルを削除する
  • --grants {}は、ファイルのアクセス権限を設定する
    • バケットの公開設定を変更しただけではファイルは公開されない。ファイルごとにアクセス権限を設定する必要がある
    • read=uri=http://acs.amazonaws.com/groups/global/AllUsersPublic Readにする定義済みURI(公式ドキュメントの「Amazon S3 の定義済みグループ」を参照)
  • --exclude {}は、例外的にアップロードしないファイルを指定する

実際に試したGitHubレポジトリはこちら

https://github.com/tippy3/github-actions-s3-deploy

実は公開されているアクションもある

https://github.com/opspresso/action-s3-sync

AWSのクレデンシャルの設定とs3 syncをまとめて行うアクションが既に存在します。やってることは全く同じです。

Usageを見る限り、上記で紹介したオプションも使えそうです。特に理由がなければこれを利用するのが良さそうですね。

ただし私は1つのワークフロー内でdev, stg, prdと環境を分け、それぞれ異なるAWSアカウント・S3バケット名を使いたかったため、上記の方法を取りました(リポジトリ参照)

tippy
SRE. 業務ではAWS, k8s, GitHub Actionsを活用したインフラ構築・運用をしています。
zozotech
70億人のファッションを技術の力で変えていく
https://tech.zozo.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away