github action で S3 にreact 静的サイトの内容をプッシュする

はじめに

前回の記事ではS3,ACM,Cloudfront などを使って、お名前ドットコムから無料で取得したドメインにindex.htmlを表示するところまで行いました。今回はindex.html ではなく、gitjhubに何かしらの静的ホームページをいれておいて、github action を使って

今回は、こちらのSite の記事を参照にさせていただきました。

https://dev.classmethod.jp/articles/deploy-web-site-with-github-actions

想定する構成

  1. AWSアカウントと適切な権限を持つIAMユーザーを作成(これは今回は別途作成します)
  2. S3バケットが作成されており、静的ホスティングを有効にする。(静的ホスティングを有効にする箇所のみ行います。前回の記事で作成したのでそれを使います)
  3. CloudFrontディストリビューションが設定されており、S3バケットをオリジンとして使用している。(これは前回の記事で設定済)
  4. Route 53でcosicosilife.netドメイン(お名前ドットコムで無料で取得したが設定されており、CloudFrontディストリビューションに紐付けられている。これも設定済みです)
  5. ACMでSSL/TLS証明書が発行されている。(これも設定済み)

S3で静的ホスティングを有効にする

前回の記事で 設定した S3の設定から静的ウェブサイトホスティングを有効にします

わかりにくいのですが、バケット名をクリックして、プロパティのタブをクリックしたら一番下にあります

静的ウェブサイトホスティングで「編集」をクリック

下記の静的ウェブサイトホスティングを「有効にする」にチェックして

インデックスドキュメントをindex.js としてください

設定が完了したら 「変更を保存」をクリック

成功すれば下記のようになります。

Github のレポジトリを作成

github のアカウントは持っているものと想定します。新しいレポジトリを作成して適当にファイルを入れておきます。下記のように適当なレポジトリを作ってください

今回はパブリックレポジトリとします。Create repository ボタンを押します。

よろしかったら今回のコードはgit clone してお使いください

https://github.com/david-daisuke/s3-static-page

レポジトリを作成して、何かファイルを入れます。今回はindex.html のみをいれました

IAM ユーザの作成 と キーの作成

今回はS3のバケットは前回のものと同じものを使いますが、IAMユーザはS3バケットのために作成します。IAMの設定で「ユーザの作成」をクリックします

ユーザ名は適当なものを設定して「次へ」をクリック

このIAMに対する許可のオプションは「ポリシーを直接アタッチする」を選択して

AmazonS3FullAccessを選択します。

内容を確認して作成します。ユーザーの作成をクリックしてください

問題泣ければユーザが作成されるはずです、作成されたユーザーをクリックしてみましょう

当該ユーザーでアクセスキーを作成をクリック

github が外部アプリケーションのため、ユースケースでは「サードパーティーサービス」を選択

上記のレコメンデーションを理解し、、、、についてチェックして「次へ」ボタン

githubのために生成するキーなので、「s3-static-site-for-github」などのわかりやすい名前を付けておき、「アクセスキーを作成」ボタンをクリックします

アクセスキーとシークレットは人に知られないようにしましょう。CSVでもダウンロードできますが、必ず人目につかないところに保管してください

Github Action のシークレットの設定

さきほど、IAMで生成したシークレットをgithub Action に設定します。先ほど作成したレポジトリから,Secrets and variables でActions を選択。Actions secrets and variables からNew repository secret をクリックします

二つキーを作成します

一つは  AWS_ACCESS_KEY_ID   で IAMのユーザの アクセスキーを投入します

もう一つは AWS_SECRET_ACCESS_KEY  で IAMユーザーのシークレットを投入します

下記のように、正常に登録されたことを確認します。これらが後程設定する、yml ファイルで利用されます

GitHub Actionsワークフローの作成

レポジトリの Actions から  setup workflow yourself をクリックしてください

./github/workflows/main.yml でGithub Actions のフローを作成します。このフローはビルドとS3へのふぃあるのプッシュに使われる一連の動作を記述したものであるとお考え下さい

下記のコードを入力してください。

name: Build React on S3
on:
  push:
      branches:
        - main
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: |
          aws s3 cp --recursive --region ap-northeast-1 build s3://s3-for-david-react-app

上記コード説明 main.yml

難しいので詳しく説明します。大まかな流れとしては、下記の4つとなります

  • リポジトリのコードをチェックアウト
  • プロジェクトの依存関係をインストール
  • Reactアプリケーションをビルド
  • ビルドされたファイルをAWS S3バケットにデプロイ

チェックアウト Checkout

name: このワークフローの名前です。「Build React on S3」としています。on: このワークフローが実行されるトリガーイベントを定義します。

  • push: コードがリポジトリにプッシュされたときにトリガーされます。
    • branches: 特定のブランチにプッシュされたときのみトリガーされます。この場合、mainブランチです。

jobs: ワークフロー内で実行されるジョブの定義です。この例ではbuildという名前のジョブが1つあります。

依存性のインストール Install Dependencies

name: ステップの名前です。「Install Dependencies」としています。run: 実行するコマンドです。ここでは、プロジェクトの依存関係をインストールするためにnpm installを実行します。

name: ステップの名前です。「Build」としています。run: 実行するコマンドです。ここでは、Reactアプリケーションをビルドするためにnpm run buildを実行します。

ビルド Build

name: ステップの名前です。「Build」としています。run: 実行するコマンドです。ここでは、Reactアプリケーションをビルドするためにnpm run buildを実行します。

実装 Deploy

name: ステップの名前です。「Deploy」としています。env: 環境変数を設定します。ここではAWSのアクセスキーとシークレットアクセスキーをGitHub Secretsから取得します。

  • AWS_ACCESS_KEY_ID: $${{ secrets.AWS_ACCESS_KEY_ID }}
  • AWS_SECRET_ACCESS_KEY: $${{ secrets.AWS_SECRET_ACCESS_KEY }}

run: 実行するコマンドです。ここでは、ビルド成果物をAWS S3バケットにコピーするためにaws s3 cpコマンドを実行します。

  • --recursive: ディレクトリ内の全ファイルを再帰的にコピーします。
  • --region: S3バケットのリージョンを指定します。この例ではap-northeast-1(東京)です。
  • build: コピーするローカルディレクトリです。
  • s3://s3-for-david-react-app: コピー先のS3バケットです。

上記問題なければ、Commit changesで commitしましょう

Actions から進捗を確認できます

問題なく終了すれば 緑色になります

前回の記事で、無料で取得したドメインに証明書が設定されているので、下記のようにブラウザでReact の画面を見ることができるはずです

npm start とかやる必要ないの?どうしてサーバーでnpm start していないのに画面が表示されるのでしょうか?

、、、、と疑問に思う人もいると思います。ビルドの段階で、npm start を打鍵せずに npm build を打鍵すると、静的ファイルのみを生成します。実際にS3のバケットに生成されたものは、静的ファイルのみです

Reactの動作:

  • React自体は、ブラウザ上で動作するクライアントサイドのJavaScriptライブラリです。npm run buildで生成された静的ファイルは、ブラウザに読み込まれ、Reactがクライアントサイドで動的にコンポーネントをレンダリングします。
  • つまり、S3バケットにアップロードされた静的ファイルは、ブラウザがそれをダウンロードし、JavaScriptが実行されることで動的なUIを生成します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です