はじめに

コロナウイルス感染症対策サイトに貢献したかったのですが、
この機会にAWSのCloud9を使ってみようかなと思ったので備忘録です。
ご意見、改善点あれば教えて下さい。

また、内容の殆どは @FPC_COMMUNITY さんの
東京都 新型コロナウイルス対策サイトへの貢献方法を解説
の記事を参考にさせていただいています。

事前準備

準備が必要なのはAWS　Cloud9 の会員登録です。
以下の記事を参考にさせていただきました。
Cloud9の使い方と便利機能！最強プログラミング開発環境（IDE）
まずはワークスペースの作成までできたらOKです。
EC2のインスタンスはメモリが大きいものを選ぶと無難です。
デフォルトのt2.microではメモリ不足で今後作業に影響が出る可能性があります。

あとはGit hubは登録しておいて下さい。

環境構築

Gitからプロジェクトをフォークする

Cloud9 の準備ができたら今度はGitからソースを持ってきます。

東京都 新型コロナウイルス対策サイトのGitHubページを開いて下さい。
https://github.com/tokyo-metropolitan-gov/covid19

↑の画面が表示されたら、画面右上の赤枠で囲んである[Fork]ボタンを押下します。

↑自身のアカウントにForkしてきたプロジェクトが表示されます。

Cloud9にCloneしてくる

Forkしたきたプロジェクトの[Clone or Download]ボタンを押下します。(↑画面右側赤枠部分)

↑の画面が出たら赤枠で囲んだボタンを押下してリンクをコピーします。

Cloud９に移動して自身のワークスペースを開きます。

↑画面のターミナル(赤枠部分)に以下のコマンドを入力します。

$ git clone コピーしたGithubリポジトリのURL

すると↓のようにGithubからソースがコピーされます(赤枠)。

yarn 導入

Cloneしたディレクトリに移動し、ターミナルで以下のコマンドを入力します。

$ npm install -g yarn

$ yarn install

最後にサーバを起動します。
ターミナルで以下のコマンドを入力します。

$ yarn dev

ターミナルに↑の赤枠のような記述が出れば準備はOK

最後にCloud9画面上部の[Preview]→[Preview Running Application]を押下します

プレビューが表示されれば環境構築は完了です👏
後は煮るなり焼くなり好きにやって下さい！
今日はここ迄。