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

2021.05.28

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

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
  • nameではaction名を定義します。
  • onはイベントトリガーで、この場合ではmasterブランチにpushイベントが発生すると、このactionを実行するように作成しました。
  • jobsでは実行させる作業を定義します。各作業はsteps内に作成します。
  • buildではjobsが実行される環境を設定します。

作成が終わったら、「Start commit」ボタンをクリックするとコードで作成した内容が自動に実行されます。

Actionsタブで実行過程を見ることができます。

実行に成功して、先ほど作成したS3のバケットにこのようにファイルがアップロードされています。

そして、バケットウェブサイトエンドポイントのアドレスに接続すると、Reactウェブサイトが出ることが確認できます。

最後に

GitHub ActionsとAmazon S3を連携して静的ウェブサイトをデプロイしてみました!!

ReactやVueで作ったウェブサイトをデプロイしようとしたら、この方法でとても簡単にできると思います。

CI/CDツールはGitHub Actions以外にもCircle CI, Travis CI, Jenkinsなどがありますので、それらのツールも参考してみたらいいと思います。