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

other

久しぶりの投稿となります。

投稿していない間、学校の試験がありました。
また、学校の試験後、東京都の新型コロナウイルス感染症対策サイトを見ていて「自分の住んでいる市でも同じものを作ろうかな」と思いました。

なので作ってしまいました!リンクはこちら

今回の記事では、作成するにあったって参考にしたリンクなどがあるのでそれを紹介したいと思います。(かなり急いで作ったのでミスがあるかもしれません。ミスがあれば、コメント欄にて教えてください。)

利用したサービス

GitHub
Netlify
VSCode
とかいろいろ

東京都のものをフォークする

まずは、東京都の新型コロナウイルスのコードをフォークしないと始まらないのでまずはここからフォークします。

その後、GitHub Desktopを利用してDevelopmentブランチを自分の端末にクローンします。(GitHub Desktopの利用方法に関しては調べて使ってください)

完了したらVSCode(自由になんでも良いので編集ソフトを使う)でクローンしたファイルを編集して独自のものにしていきます。

Netlifyを利用

Netlifyで公開

Netlifyは静的サイトのホスティングを行うものです。東京都のサイトの方もNetlifyを利用しているので同じものを利用した方が楽なのでNetlifyを利用しました。

まずは、ここからNetlifyにアクセスします。初回の方はサインアップ利用したことがある方はサインインです。(GitHubでログインしてください)ログインすると下記の写真のようにどのプロジェクトを利用するか聞かれるので先ほどクローンしたものを選択します。

選択するといろいろ出てくるので下記のように設定します。ここの設定が重要です。

Branch to deploydevelopment
Build commandyarn install; yarn run generate;echo -e “User-agent: *\nDisallow: /” > ./dist/robots.txt
Public directorydist

設定が完了したらデプロイが始まるので完了するのを待ちます。
デプロイ中は、Building。完了すると、Completed。

完了したのちに写真の囲まれた部分のリンクを選択すると、何も変更していなければ東京都のものが表示されます。変更した方は、変更された状態のものが表示されます。(変更後にPage not found となってしまっている場合は、Deploy logを確認してeslintなどにエラーが出ていないか確認をしてください。eslintの解決方法に関しては後述します。)

初期状態だとURLのリンクがダサいので設定から変更できま流ので変更することをおすすめします。
「○○○.netlify.app」の○○○部分のみ変更できます。

NetlifyのCovid-19 Support を利用する

Netlifyには、無料版では利用制限がついています。一応、何もしなければ無料枠を超えないように自動的に設定されます。ステータスがwaitingとなっているものをデプロイする(無料枠では、同時に3つまでしかデプロイできません)と700円かかるので自動的にでデプロイが始まるまで待っていててください。

一番苦しいのが無料枠ではデプロイ時間が300分しかできません。この条件が一番厳しです。なのでここからNetlifyに申請するとデプロイ時間に制限がなくなります。その他にもいろいろ制限がなくなります。(コロナ関係以外のサイトのデプロイはしてはいけません笑)
申請をしてから翌日には審査が通りました!対応がとても早かったです。

yarnを利用する

yarnなどを利用してデプロイすることもできます。これは独自の端末を利用してlocalhostで構築するものなので時間制限がありません。
yarnの利用方法を説明すると長くなってしまうので。簡単に説明します。

まずは、ここからnodeとyarnをインストールします。(インストール方法は調べてください)

インストールしたらコマンドプロントを利用して下記のように入力します。GitHubでクローンしたファイルのディレクトリは、GitHub Desktopを利用しているのであればDocument>GitHubの中にあると思います。

cd "GitHubでクローンしたファイルのディレクトリ"

次に、

yarn install

最後に、

yarn dev

で構築完了です。http://localhost:3000 にアクセスしてサイトが開けることを確認してください。

詳しくは、ここを参考にしてください。

lint エラーになった場合

lint error となってしまうことがあります。これは、プログラムの形があっていないためになります。

deploy logにでてくるエラー文の最後の方に–fixで修正可能かどうかがでてきます。修正可能であることがわかったら修正していきます。

コマンドプロントにて下記のように入力します。

cd "GitHubでクローンしたファイルのディレクトリ"
yarn install //既に実行済みの場合はスキップ
yarn lint --fix

これにて完了です。

完了したら、GitHubにアップロードします。
まずは、最初にステータス確認します。

git status
git add .
git commit -m "コメントを入力"
git push

git pushと入力するとアカウント名を聞かれるので入力して完了です。

最後に

相模原市新型コロナウイルス感染症対策サイトをまだ見ていないという方は、こちらから是非見てください。
本家の東京都新型コロナウイルス感染症対策サイトは、こちらから確認してください。

もう少し細かく内容を知りたいというかたは、Qiitaにてもう少し違う視点から記事を書きましたので、こちらか読んでみてください!


この記事に関してご質問・訂正がある場合には、コメント欄にてお知らせください。
その他のことに関しましては、こちらから行ってください。


コメント

この記事を書いた人

このサイトの管理者。現在、学生。
NiziU大好き。RIO推し!
プログラミングは、趣味程度に。相模原市 新型コロナウイルス感染症対策サイトを作成・運用中(下記のホームアイコンより閲覧できます)

yuuuuu_mmmmuをフォローする
other
Assistant App blog
タイトルとURLをコピーしました