Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@euledge

浜松市版新型コロナウイルス対策サイトをAWSで運用する方法

Last updated at Posted at 2020-04-14

はじめに

浜松市 新型コロナウィルス感染症対策サイトのお手伝いをしています。
浜松市では市内で 2020/3/29 2020/3/28 に初の感染者が確認されてから、市内外のITコミュニティ有志により東京都の新型コロナウィルス感染症対策サイトをForkして4/1から公開を始めました。

浜松市 新型コロナウィルス感染症対策サイト

東京都のサイトはデザインや中に使用されている技術のみならずデプロイまでの運用についてもしっかり出来上がっている素晴らしいものなので地方で立ち上げる場合も非常に短時間で公開できました。
【静岡新聞】 コロナ対策で新サイト　浜松市と市内ＩＴ関連有志

これから同じように立ち上げようとする方のために主にデプロイに関しての解説をしたいと思います。

派生版を作成するには

派生版を作成する場合のノウハウについては主に下記のサイトにナレッジがまとまっていますのでこちらを参考にたちあげます。
「東京都 新型コロナ対策サイト」地域展開に向けて情報共有のナレッジ

特に派生版を作るときにまず、やることリストには技術的な記事以外にも行政とつながるための連絡方法なども書いてあるので一読することをお勧めします。

基本的なデプロイの仕組み

下表の左列に記載されたブランチが更新されると、ブランチとWebサイトの更新が自動的におこなわれます。
この自動化にはGutHub Actionsの機能が使用されています。

image.png

すでに本家サイトに用意されたワークフローにより、下記の表にあるように
developmentブランチにpushされるとdev-pages
stagingブランチにpushされるとgh-pages
masterブランチにpushされるとproduction
にHTMLがpushされます。

ブランチ HTML類がbuildされ、更新されるブランチ 目的
development dev-pages 開発用サイト
staging gh-pages ステージングサイト
master production 本番サイト

buildで出来上がったファイルは以下のような構成になりますので本番公開するにはこのフォルダが サイトのトップディレクトリ になるように配置すればWEB公開されます。
https://github.com/tokyo-metropolitan-gov/covid19/tree/production

GitHub Pagesで公開する方法

GitHub Pagesの公開機能を使用してそのままのドメインで公開しようとするとサブディレクトリになってしまいますので中で使用される相対パスがずれてしまい画像やJSが参照できず404になってしまいます。
例 https://tokyo-metropolitan-gov.github.io/covid19/
試してはいませんが、このフォルダがトップディレクトリになるようにカスタムドメインを設定すればGitHub Pagesでも公開できると思います。

GitHub Pagesで公開する場合は次の制限があります 「100GB bandwidth/month」「10 builds/hour」

自サイトやさくらインターネットVPSなどで運用する場合

上記で出来上がったproductionブランチのルート以下のフォルダを丸ごとWEBサーバーの公開フォルダにコピーします。
このフォルダがサイトのトップディレクトリ になるようにする必要があります。（試していないですが...多分）

さくらインターネットでは新型コロナ情報まとめサイト向けのサーバーを無料提供のサポートを行っています。

Netlifyで公開

東京サイトをはじめとして、多くの派生サイト（2020/4/13現在の浜松版も）ではNetlifyを使用して公開されていることが多いです。
Netlifyの無料枠は「100GB bandwidth/month」「300 build minutes/month」になります。
また、COVID-19のサポートとしてこちらから申請することで2020/3より6か月間上記制限なしで利用することができます。

Netlifyを利用したデプロイはすでに以下のような記事が出ていますのでそちらを参考にするとよいと思います。

Amazon S3 で公開

浜松版サイトではAWSからのサポートの提供の申し出があったため、現在のNetlifyでの公開を近日中にAWSを使用した公開に切り替える予定です。

そこで、どのようにしてAWSにデプロイするかを記載します。
S3バケットの作成と、そのバケットの公開設定、バケットにアクセスするためのIAMユーザーの作成は済んでいる前提です。
初めての方は下記のサイトを参考にS3バケットを用意してください。

IAMユーザーには作成したバケットに対して読み書きができるような権限を与えておきます。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:GetBucketLocation",
                "s3:ListBucket",
                "s3:DeleteObject",
                "s3:GetObject",
                "s3:PutObject"
            ],
            "Resource": [
                "arn:aws:s3:::[バケット名]/*",
                "arn:aws:s3:::[バケット名]"
            ]
        }
    ]
}

作成したバケット名とリージョンおよび、作成したIAMユーザーの Access key ID と Secret_Access_Key を後述するスクリプトで使用するため控えておいてください

GitHub Actionsの設定

GitHub ActionsではGitHubレポジトリに対しての何らかのイベントをトリガーとして何らかのアクションを実行します。

GitHub Actionsのワークフローは .github/workflowsに入っており、主にCOVID-19サイトのデプロイに関するワークフローは以下のものが用意されています。

  • developブランチにプッシュしたときにdev-pagesへデプロイするワークフローはdevelop.yml
  • stagingブランチにプッシュしたときにgh-pagesへデプロイするワークフローはstaging.yml
  • masterブランチにプッシュしたときにproductionへデプロイするワークフローはdeploy.yml

実行時には先ほど作成したIAMユーザーのACCESS_KEY_ID,SECRET_ACCESS_KEY が必要になります。
Forkしたブランチの[Settings]-[Secrets]にスクリプトに使用しているキーで保存しておきます
image.png

今回は、staging.ymlを修正してS3にデプロイする処理を加えます。(他のものも適宜ブランチ名、バケット名など変更すればOK)

.github/workflows/staging.yml
name: staging deploy

on:
  push:
    branches:
      - staging

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'

      - name: Cache dependencies
        uses: actions/cache@v1
        with:
          path: ~/.cache/yarn
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - run: yarn install --frozen-lockfile
      - run: yarn run test
      - run: yarn run generate:dev --fail-on-page-error
      - run: "echo \"User-agent: *\nDisallow: /\" > ./dist/robots.txt"

      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

      # S3デプロイのために今回追加する箇所
      - name: deploy to s3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --follow-symlinks --delete
        env:
          AWS_S3_BUCKET: '用意したバケット名'
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: 'バケットがあるリージョン'   # 東日本ならば ap-northeast-1
          SOURCE_DIR: './dist'

完成イメージ

上記のワークフローファイルをコミットしてstagingブランチにプッシュすると、コミットしたワークフローが走り出し gh-pages と S3にデプロイされます。

image.png

最後に

浜松市版新型コロナウイルス対策サイトの運営は東京サイトに比べて人数も少なく、特定の人にタスクが集中してしまう状況にあります。是非興味がありましたら気軽に下記のリンクから一緒に参加してみませんか？

浜松市 新型コロナウイルス対策サイト↓
https://stopcovid19-hamamatsu.netlify.com/
以下のURLに変更になりました
https://stopcovid19.code4hamamatsu.org/
GitHubリポジトリ
https://github.com/code-for-hamamatsu/covid19
Slack
https://join.slack.com/t/jaws-ug-hamamatsu/shared_invite/zt-dc5cgs87-cNw8QOxXeqhJnB8YB8A6Uw

リンク

浜松市 新型コロナウイルス対策サイトのコントリビューター @w2or3w さんの記事
静岡県オープンデータカタログ(csv)からCOVID-19対策サイトのデータ(json)に変換して取得するAPI
https://qiita.com/w2or3w/items/55ff3159aea0c7a9e096

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?