東京都新型コロナウイルス感染症対策サイトをforkしてnetlifyでdev環境を立ち上げる手順

プログラム全般

「東京都 新型コロナウイルス感染症対策サイト 」(以下対策サイト)をforkして作った北海道版の「北海道 新型コロナウイルスまとめサイト」がリリースされました。

東京都 新型コロナウイルス感染症 対策サイト
2020/09/18 更新: 当サイトは新型コロナウイルス感染症 (COVID-19) に関する最新情報を提供するために、東京都が開設したものです。
tokyo-metropolitan-gov/covid19
東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website - tokyo-metropolitan-gov/covid19

北海道出身の私も関わらせていただいていて、その際に開発用のdev環境立ち上げを行いました。

その際の手順、ノウハウを共有します。

東京都以外の各地方版を作ろうとされている方、とりあえず興味があって動かしてみたい方のご参考になれば幸いです。

なお、この手順は私が勝手に公開されているコードを読んで調査したものなので、間違っている可能性があります。もし気がついた方はご指摘いただけると助かります。

前提

  • 各種アカウントは作成済

説明する事

  • 対策サイトのリポジトリをフォークして、コミットすると自動デプロイされる開発環境の構築方法
  • ↑の仕組み

手順1 forkする

東京都のGitHubリポジトリをforkします。

tokyo-metropolitan-gov/covid19
東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website - tokyo-metropolitan-gov/covid19

↑にアクセスして、

右上の「fork」ボタンをクリックします。

GitHubの設定によっては、どのアカウントのリポジトリするか聞かれますので、適切なものを選んでください。

ちょっと待つと、forkしたリポジトリが作成されます。

以降はこちらのリポジトリに対して操作を行います。

手順2 GitHubActionを有効にする

対策サイトの仕組みとして、CIではGitHubActionsを使っています。(最新ですね!

forkした直後はGitHubActionsが無効になっているので、まずは有効にしてください。

こうなればOK

手順3 NetlifyとGitHubを連携する

Netlifyで設定をします。

Netlify: All-in-one platform for automating modern web projects
Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.

ログインしたら、「New site from Git」を選択

GitHubを選択

forkしたリポジトリを選択

「dev-pages」ブランチを選択

「Deploy site」ボタンをポチッとな

ちょっと待つと、URLが発行されるのでクリック

サイトが立ち上がりました!

手順4 実際に変更を加える

このままではただ動かしただけなので、実際に修正を加えてみます。

わかりやすいように、ヘッダーの文字列を変えてみます。

tokyo-metropolitan-gov/covid19
東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website - tokyo-metropolitan-gov/covid19

※私がforkした時点での変更箇所です。がんがん更新されているので、↑ではなくなる可能性があります。

この時、developmentブランチを更新するようにしてください。

更新の仕方は、GitHub上で直接更新しても、ローカルにcloneしてpushしても、pullRequest経由でも何でも構いません。

pushされたタイミングでGitHubActionsが走って

ちょっと待つとGitHubActionsは終了して、

手順3のURLに反映されます。すごい!

仕組みの解説

アーキテクチャとしては、基本的にNuxt.jsを使っていて、API呼び出し等はありません。(今のところ)

また、Nuxt.jsにはSSRの機能もありますが、静的サイトとしてしか使っていないようです。(Nuxtの設定ではuniversal なのですが、responseを見た限り、SSRしてないっぽい)

そのため、最終的には静的サイト用に吐き出したhtml、js、cssをどこかのサーバにホスティング(配置)するだけで動かす事が可能です。

ホスティング先は何でも構わないのですが、まずは対策サイトの運用に合わせてNetlifyで動かすと楽ちんだと思います。(北海道版ではさくらインターネットさんのサーバにホスティングしています。)

GitHubActionsの設定はここで定義されています。

tokyo-metropolitan-gov/covid19
東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website - tokyo-metropolitan-gov/covid19

developmentブランチにコミットされた時に動くGitHubActionsはこれです。

Build software better, together
GitHub is where people build software. More than 50 million people use GitHub to discover, fork, and contribute to over 100 million projects.

ポイントは、

yarn run generate:deploy --fail-on-page-error

まずここで、静的サイト用のファイルを生成しています。

具体的にはpackage.jsonで

 "generate:deploy": "nuxt-ts generate",

と定義されているので、nuxtのgenerateコマンドが実行されています。

ここで生成されたファイル類を、

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

ここで、dev-pagesブランチにコミットしています。

dev-pagesブランチとNetlifyは手順3の設定をする事で、コミットされたタイミングで自動でNetlifyにデプロイされますので、これで

develpmentブランチ->dev-pagesブランチ->Netlify

という自動デプロイフローが完成します。

注意点

master(production)ブランチを公開するとクロール対象になる

developmentとstagingのGitHubActions内で、UserAgentによるクロールを拒否するrobots.txtを生成する処理があります。

      - run: "echo \"User-agent: *\nDisallow *\" > ./dist/robots.txt"

本番用のmasterブランチの処理では上記処理が無いため、クロール対象になります。

重複サイト扱いになって大丈夫だとは思いますが、本家の対策サイトに影響が出ないとは言い切れないので、masterブランチの公開は少し慎重になった方が良さそうです。

※masterに対するコミットで、productionブランチにgenerateした結果が反映されますので、netlifyで指定するのはproductionブランチになります。

GoogleAnalyticsのidが直コミットされている

tokyo-metropolitan-gov/covid19
東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website - tokyo-metropolitan-gov/covid19

AnalyticsのIDは直接コミットされているため、forkした先でもそのまま有効になっています。

ですので、このまま立ち上げて実行すると、対策サイトのGoogleAnalyticsにアクセスデータが飛んでいきます。

対策サイト側でもドメインでフィルタリングはしていると思いますが、idを自分のに変えるなり、削除するなりした方がbetterです。

Netlifyの制限

ここまでできてるなら、本番もNetlifyで良いのでは?と思うかもしれませんが、無料プランの場合制限があります。

Netlify Pricing and Plans
Get simple pricing for every project. Our plans include value for developers and enterprise teams alike. Learn more about our monthly plans, the features, and m
  • アクセス量に制限
  • メンバー数に制限

なので、このまま無料プランで公開して運用して大丈夫かは検討が必要です。(対策サイトさんがどうなっているかはわかりません)

ただ、少なくても本番公開する前の開発段階では全然大丈夫なので、まずはNetlifyを使う、で問題無いと思います。

まとめ

ひとまず開発をするための土台を整える手順を説明してみました。

良くないニュースが続きますが、少しでも現状をよくするためのお役に立てれば、と思います。

コメント

タイトルとURLをコピーしました