GitHub ActionsでウェブサイトをAmazon S3にデプロイする

JungHyeonjae

2021.05.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。ジョン・ヒョンジェです！

GitHub Actionsを利用して、ReactプロジェクトをAmazon S3に自動でデプロイしてみましたので共有します。

はじめに

GitHub ActionsはGitHubリポジトリを基盤にWorkflowを自動化させることができるCI/CDのツールです。

GitHub ActionsでのWorkflowとは実行する作業とその作業を実行する条件や順序を定義したもので、YAMLに作成されます。GitHubのMarketPlaceで他の人が作成したWorkflowを使うことができ、独自のWorkflowを作成することもできます。

GitHub Actionsを使うとコードのビルド、テスト、デプロイという面倒な過程を自動化させることができるので、開発者の負担を減らすことができます。

では、実際にGitHub Actionsを使ってReactプロジェクトをAmazon S3にデプロイしてみます！

やってみましょう

ReactプロジェクトをGitHubリポジトリにアップロード

まず、Reactプロジェクトを生成して、GitHubのリポジトリにアップロードします。

(必ずしもReactでなければならないのではありません。)

Amazon S3バケットの作成

Amazon S3バケットを作成して、GitHub Actionsでデプロイする先を用意します。ここではいったんアクセスブロックを4つともオフにしました。

そして、プロパティタブに移動して「静的ウェブサイトホスティング」を有効化します。

最後にアクセス許可タブで「バケットのポリシー」を編集します。ポリシージェネレータを使って簡単にポリシーを作成することができます。

ここまですると、S3の設定は完了です。

AWS IAMユーザ作成

CLIでS3のバケットに接近するための権限を持っているユーザを作成します。

IAMコンソールに移動して、ユーザを追加します。

アクセスの種類は「プログラムによるアクセス」を選択します。

次の段階で「既存のポリジーを直接アタッチ」をクリックして、「AmazonS3FullAccess」を選択します。

タグの設定は適当にして、確認画面で「ユーザの作成」ボタンをクリックするとアクセスキーとシークレットアクセスキーの情報が出ます。これはGitHubの設定で必要なのでcsvファイルでダウンロードしておきます。

GitHubのSecrets設定

Workflowを作成するとき、IAMユーザの情報を使うためにGitHubのSecretsにIAMユーザーのアクセスキーを環境変数として登録する必要があります。

GitHubリポジトリでSettingsタブのSecretsメニューで「New repository secret」ボタンをクリックして先ほど追加したIAMユーザーのアクセスキーとシークレットアクセスキーを登録します。

ここまで設定したら、これからはWorkflowの作成しか残っていません！！

Workflow作成

Workflowファイルは .github/workflows/ディレクトリに作成します

GitHubリポジトリのActionsタブで「set up a workflow yourself」というリンクに入ると、

この画面が出ます。

ファイル名を適当に設定してデフォルトのコードを全部削除します。そして、以下のようにコードを作成します。

name: Build React on S3
on:
  push:
      branches:
        - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master  # リポジトリをチェックアウト

      - name: Install Dependencies
        run: npm install

      - name: Build
        run: npm run build  # React ビルド

      - name: Deploy  # S3にデプロイ 
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |　# S3のbucket-for-deploying-react-projectバケットにデプロイ
          aws s3 cp --recursive --region ap-northeast-1 build s3://bucket-for-deploying-react-project