静的Webサイトホスティング二重化してみる(その3)

- 1月 02, 2021

2020年中に完了させたかったのですが、結局年をまたいでしまいました。静的Webサイトホスティング冗長化の件、設定作業自体は前回の内容で完了しているのですが、コンテンツの更新で2ヶ所に更新するというのもナンセンスだし、今時FTPでファイルアップとかいう時代遅れなことをする気もないのでGitHubのmainブランチにpushしたタイミングでS3とGCSの両方にコンテンツを同期するという仕組みを準備することで更新漏れを防止するという仕組みを準備します。こうしておけばいつCloudFrontが落ちても安心ですね。(オイ

後は2021年8月13日にGitHubでパスワード運用が廃止になるらしいのでトークンを発行してパスワード運用からの切替えもしました。

GitHubにpushすれば本番リリースというのはとても楽でいいですね。確認終わったやつをmergeしてからpushすりゃ本番リリース完了サーバ再起動も発生しない。もはやWebのためにサーバという発想がなくなってきています。後はこいつをIaC化できればいいなぁ。

最終的にこんな感じになりました。

◆シリーズ

その１：AWSでCloudFront+S3構成を作る

その２：GoocleCloudでLoadBaranser+GCS構成を作りDNSでフェイルオーバ

その３：S3とGCSにGitHubActions使ってコンテンツ同期

その４：TerraformでIaC化

◆手順概要

1.AWSのIAM設定

2.GCPのサービスアカウント発行

3.GitHubの諸設定

　3-1.トークン設定

　3-2.Secretの設定

4.GitHubActionsの設定

◆手順

1.AWSのIAM設定

・コンソールでIAMから[グループ]を選択して[新しいグループの作成]をクリックする。

・[グループ名]を選択して[次のステップ]をクリックする。

・ポリシーで[S3FullAccess]と[CloudFrontFullAccess]を付与して[グループの作成]をクリックする。

・続いてユーザの作成を行う[ユーザ]を選択して[ユーザを追加]をクリックする。

・[ユーザ名]を入力し、アクセスの種類で[プログラムによるアクセス]を選択する。[次のステップ]をクリックする。

・ユーザをグループに追加セクションで先に作成したグループ名を選択して[次のステップ]をクリックする。

・タグの追加は特に何もせずに「次のステップ」をクリックする。

・確認となるので[ユーザの作成]をクリックする。

・ユーザ追加が完了するので[CSVのダウンロード]にて[アクセスキーID]と[シークレットアクセスキー]を保存しておいて[閉じる]をクリックする。

2.GCPのサービスアカウント発行

・サービスアカウント作成

$ gcloud iam service-accounts create SA-NAME \
    --display-name="SA-NAME"
Created service account [SA-NAME].

・ロール付与

$ gcloud projects add-iam-policy-binding PROJECT-ID \
  --member="serviceAccount:SA-NAME@PROJECT-ID.iam.gserviceaccount.com" \
  --role roles/storage.admin
$ gcloud iam service-accounts list

・サービスアカウントキー発行

$ cd
$ mkdir credentials
$ gcloud iam service-accounts keys create ~/credentials/static_sitekey.json \
  --iam-account SA-NAME@PROJECT-ID.iam.gserviceaccount.com

・GitHub登録用Base64エンコードのキー作成

$ cat ~/credentials/static_sitekey.json | base64

※出力されたBase64のテキストをGitHubのSecretのGCS_SA_KEYに貼り付ける

3.GitHubの諸設定

　3-1.トークン設定

・アカウントをクリックして[Setings]を選択

・[Developer Settings]を選択する

・[Personal access tokens]をクリックし[Generate new token]を選択する。

・[Note]に説明を入力し[repo]をクリックする。

・[GenerateToken]をクリックする。

・トークンが表示するのでコピーしておく。(この画面から遷移したら二度とトークンを確認するすべがないので再作成が必要となる。)

　3-2.Secretの設定

・新しくリポジトリを作成する。コンソールの右側の[New]をクリックする。

・一応、[Private]としておいた方がいい。その他はチェックを付けておくに越したことはないが任意で問題ない、以上を確認し[Create repository]をクリックする。

・該当リポジトリを選択して右上の[Settings]を選択する。

・[Secrets]を選択し[New repository secret]をクリックするとsecretの入力画面が表示されるので[Value]の箇所に設定する。

※以下を設定する。

AWS_ACCESS_KEY_ID(CSVファイルの「Access key ID」)
AWS_SECRET_ACCESS_KEY(CSVファイルの「Secret access key」)
S3_UPLOAD_BUCKET(AmazonS3で公開設定しているバケットの「バケット名」)
GCS_SA_KEY(2.GCPのサービスアカウント発行の「GitHub登録用Base64エンコードのキー」を貼付)
GCS_UPLOAD_BUCKET(GoogleCloudStorageで公開設定しているバケットの「バケット名」)

4.GitHubActionsの設定

・Git認証設定(認証確認されない様に設定)

$ git config --global user.email "youremail@example.com"
$ git config --global user.name "username"
$ vi ~/.netrc
-----------------
machine github.com
login username
password YourToken
----------------

・ディレクトリ類準備

$ git clone [Your Git Repo] html
$ cd html
$ mkdir dist
$ mkdir .github
$ mkdir .github/workflows
※distディレクトリにindex.htmlと404.htmlをアップロード
$ cd .github/workflows
$ tree -a --charset=C
.
|-- .git
|-- .github
|   `-- workflows
|-- .gitignore
`-- dist
    |-- 404.html
    `-- index.html

・WorkFlowファイル作成

$ vi staticsite_deploy.yaml
----------------------------
name: Website - Production
on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    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_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1

      - name: Sync to S3
        env:
          S3_UPLOAD_BUCKET: ${{ secrets.S3_UPLOAD_BUCKET }}
        run: |
          aws s3 sync --delete dist s3://$S3_UPLOAD_BUCKET/

      - name: Configure GCP credentials
        uses: google-github-actions/setup-gcloud@master
        with:
          service_account_key: ${{ secrets.GCS_SA_KEY }}
          project_id: ${{ secrets.GCS_PROJECT }}
          export_default_credentials: true

      - name: Sync to GCS
        env:
          GCS_UPLOAD_BUCKET: ${{ secrets.GCS_UPLOAD_BUCKET }}
        run: |
          gsutil -m rsync -R dist gs://$GCS_UPLOAD_BUCKET
----------------------------

・GitHubにpush

$ cd ../..
$ git add .
$ git commit -m '2021-01-01 GitHubActions'
$ git push origin main

・該当リポジトリの[Actions]をクリックするとジョブの状況を確認できる。

◆参考サイト

以下は色々と試行錯誤してた時の参考ですが結局はGitHubActionsに落ち着きました。

AWS単体での場合、CodePipeLineはスグレモノです。GUIですべて完結できるので非常にラクです。CloudBuildもGitHubをトリガーにできますがファイルでGCP側の制御の定義書いてやらないとだめです。CodePipeLineでディレクトリ直下のhtml等静的サイトを同期するのは簡単にできますが、CloudBuildのファイルを残さないといけなくなり、外部からCloudBuildのトリガーファイルが見えるのもよろしくないので、その辺りの制御が柔軟なGitHubActionsにしました。