最近書いたコードは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 に変更したら無事にデプロイが完了した。