Help us understand the problem. What is going on with this article?

自分の住んでいる市の新型コロナウイルス対策サイトを作った話

re-sagami-covid19.png

こんにちは!

東京都 新型コロナウイルス感染症対策サイトのコードがGitHubに載っているのはご存知でしょうか?ここからGithubでコードの確認ができるのでまだみたことがない方は、一度見てみてください。
また、Issueは誰でも参加できるので、できそうなものがあれば行ってみるのも良いかもしれません。(私は、簡単なIssueをいつもやっています。)ここに貢献方法が書いてあるので参考にしながらやってみてはいかがでしょうか?
今回、私の住んでいる市の新型コロナウイルス感染症対策サイトを作るにあたっていろいろあったので書いていこうと思う。

作ったサイト

今回、私は東京都の新型コロナウイルス感染症対策サイトを編集(?)していて自分の住んでいる市にもこんなにきれいにグラフと書かれているサイトがあったら良いのになと思いました。作り始めたときは、本当に完成するのかと少し悩んだのですが時間もあったので作ってしまいました。
私の住んでいる市は、神奈川県相模原市です。なので、今回作成したサイトは、相模原市の新型コロナウイルス感染症対策サイトとなっています。
下記にリンクを貼っておきます。見ていただけるとありがたいです👍

相模原市 新型コロナウイルス感染症対策サイト

Netlify

サイトのホスティング

今回、サイトのホスティングを行ったサービスにNetlifyを利用しました。他にもいろいろありますが、東京都のGitHubでもNetlifyを利用して作成しているようでしたので今回は、Netlifyを利用しました。
今回、GitHubに更新があると自動的にNetlifyでも更新されるようにデプロイしました。そのため、Build Command には、yarn install; yarn run generate;echo -e “User-agent: *\nDisallow: /” > ./dist/robots.txtと入力することにより自動的にビルドし始めます。(この方法では、robots.txtのファイルが"User-Agent: *\nDisallow: / "となりSEOで巡回するさいDisallowとなります。)これは、とても便利なのですが困ったことに無償版ではビルド時間が300分までと指定されています、なのでこんなビルドコマンドを利用していると何回も更新しているうちに時間がなくなってしまいます...解決方法として以下の方法があります。

Covid19-Support

なんとNetlifyでは、コロナに関連するサイトを作成しているチームに時間制限を無くしてくれる(他にもいくつか特典がありますが...)というサポートを行ってくれています。このサポートは、自分的にはとてもありがたかったです。もし、サポートを受けたいという方は、ここにリンクを貼っておくので是非参加してみてはいかがでしょうか?(コロナ関連以外のサイトをホスティングしてはいけません 笑)
私は、申請をしてから翌日には審査に通ってメールでサポートつけといたよみたいなのがメールできました。

Google Analytics

自分的にはかなり悩みました。つけても良いのですが、自分のコードがGitHubでクローンされたときその人がそのまま私のIDを利用されてしまうかもしれないと思いました。東京都の方を見ると.envに書いているようで.gitnoreで.envはアップロードされないようになっていました。(初期でそうなりますが...)
自分のサイトは、NetlifyでGitHubのコードをそのままホスティングするので、仕方なくmasterブランチ(公開用)で.gitnoreから.envを消去して、.envにトラッキングIDを書き込み、今のところは動作させています。(どなたか解決方法をご存知の方は教えてください)

Google Search Console に気づかれるまで

この内容は新しく作成しました。(2020年12月30日)

サイトを作ったのは良いもののGoogleの検索結果に載らなくては、見てもらえません。
なので、自分の作っているブログに記事を書いたりQiitaに記事を書いたりしました。(リクエストもしました)
で、Qiitaに記事を書いてから半日ぐらいですぐにサイトがGoogleに登録されました!(Qitaすご〜い!!)実は、過去にも自分のブログで、最初のころは、Googleに載らなかったのですがQiitaにサイトのドメインを貼ったところすぐにGoogleに登録されました。なんか、すごいなと思いました。最初のころはGoogle検索に載らなくてとてつもなく頑張っていたのがなんか懐かしいです笑
もし、自分のサイトをGoogle検索に載っけたいという方は、自分サイトの仕様を紹介した記事を、サイトのドメインを貼り付けながらQiitaで紹介するのが良いかもしれないです。

ちなみに、自分のブログはこちらから是非みてください笑(似たような内容を違った視点から来ています)

ドメインを購入しました

この内容は新しく作成しました。(2021年1月2日)

あけましておめでとうございます!笑
netlify.appというドメインは少しダサいなと思いましたのでドメインを購入しました。(お名前.comさんで購入させていただきました。(comドメインがとても安かったので...))
本当は、GitHub Student Pack で.techとか.meドメインが無料だからそれで良いかなと思っていたのですが.comドメインの安さに購入してしまいました。この記事のURLは、全て更新しました。
ドメインを購入したのでnetlify.appの旧ドメインでアクセスをするとAnalyticsの結果がばらついてめんどくさいのでリダイレクトさせました。Netlifyのリダイレクト方法は、_redirectsを書いて、staticフォルダの中に入れるだけです。

http://sagamihara-stopcovid19.netlify.app/*  https://sagamihara-stopcovid19.com/:splat  301!
https://sagamihara-stopcovid19.netlify.app/*  https://sagamihara-stopcovid19.com/:splat  301!

_redirectsは、このように書くだけです。とても楽です。あと、お名前.comのNSのままだとSSL通信にならないのでNetlifyのNSに変更すると自動的にAレコード(CNAMEだったかも)を設定してくれます。Let's Encryptも利用できます。Let's Encrypt について、一つ気になったのですが、中間認証局名が変わっていました。最初見た時、「Let's Encryptじゃない!」と思ってなんか優越感みたいのに浸ったのですが笑、発行しているのがLet's Encryptで流石にそうかと思いました。
CloudflareのSSLを利用すると通称は、cloudflareのURL(プランによっては、変更できるみたい)になっていますが無駄にECC(楕円曲線暗号!←かっこいい名前なので言わせてください笑)で暗号化されます。ちょっとかっこいいです。

相模原市新型コロナウイルス感染症対策サイト(Cloudflare) 自分の運営しているブログ(Netlify)
スクリーンショット 2021-01-02 14.25.07.png スクリーンショット 2021-01-02 14.25.42.png

最後に

こんな感じで私は、自分の住んでいる市の新型コロナウイルス感染症対策サイトをデプロイしました。まだ、私の作ったサイトをみていない方は、下記からみてください!

相模原市 新型コロナウイルス感染症対策サイト

コロナの感染者数は増えているので、今から新しく自分の住んでいる市のサイトを作っても遅くないのではないでしょうか?作ってみようと思われた方は、この記事を参考にしていただけると幸いです。

コロナに注意しながら、良いお年を〜〜〜 😊

Murayu0225
都内のある普通の高校に通っている高校2年生です。 暇なときに記事を書いています。 GCPずーっと使ってます笑
https://assistant-app.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away