最近書いたコードはGithubにプッシュをして何かしらのツールでデプロイすることを心がけています。

折角毎日朝起きてコードを書いているのにも関わらず、それを証明するものがTwitterしかないのは心許ないですよね。

それであれば普通に使ったことのあるGithubに草を生やし、作ったアプリは誰でも触れるようにしていきたいと思いました。

今回はGithub経由でNetlifyにデプロイしたいと思います。

netlifyのコマンドをインストールする

まずコマンドをインストールします。

npm install -g netlify-cli

インストール出来たか確認するためバージョンを見ます

netlify -v

Reactのプロジェクトを立ち上げる

次にデプロイするReactの準備をします。
定番の方法でやります。

npm create-react-app ~~~~~

それから今作ったディレクトリに移動します

cd ~~~~~

一応インストール出来ているか立ち上げて確認します。

npm start

これでReactの公式ページが見れたらここまで問題ないです。

gitに上げる準備

ここは簡潔にまとめてしまいます。

git init
git add -A
git commit -m "first commit"
git remote add origin https://github.com/ユーザー名/プロジェクト名.git
git push -u origin master

これでgitへのpushは成功しました。

netlifyでプロジェクトを立ち上げ

ここからnetlifyにログイン/サインアップしてください。
githubアカウントで登録するのが楽だと思います。

ログインするとトップページの真ん中に

があると思うので、ここをクリックします。

それからGithubとnetliryを連携します。

New site from Gitをクリックした後のページに
- Github
- GitLab
- BitBuchet
の3つから連携する画面になるので今回はGithubを選択してインストールまで進めていってください。

完了したらもう一度同じ手順でGitHubでプロジェクトを立ち上げて下さい。

次は3つの中からGithubを選択するとGItHubにあるリモートリポジトリが表示されるので、先ほど作ったプロジェクト名のリポジトリを選択してください。

そしたらCreate a new siteと表示され、色々いじれる画面に遷移したと思います。

しかし今回はどこもいじらずDeploy Siteをクリックしてください。

完了

そしたら次の画面で

このような場所があると思います。
立ち上げた直後は緑のPublishedが黄色で表示されるので緑なるまで待ちます。

緑になったらeloquent-~~~~~.netlify.appをクリックして下さい。

これで無事Reactのサイトを表示出来たら成功です。

まとめ

どうでしたでしょうか？
Firebaseなどよりも簡単に立ち上げる事が出来たのではないでしょか？

少しセットアップを加えるだけでGithubに草を生やしつつプロジェクトを公開できるのでオススメです！

今後はGit操作なしでnetlifyに立ち上げたりFIrebaseで立ち上げる方法を書いていきたいと思います！

追記

別プロジェクトをデプロイしようとしたらyarn buildあたりで引っかかった。ログを確認すると

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

とありデプロイ出来なかった。

そのため上の1文で検索してみた所、vercelで似た感じで引っかかていた人を見つけ、それを参考にしたら1発で修正できた。

https://masahiro.me/2021/03/treating-warnings-as-errors-because-process-env-ci-true/

同じようにnetlifyのbuild commandをyarn buildからCI='' npm run build に変更したら無事にデプロイが完了した。