概要
手短に伝えると以下の流れ。
（React, TypeScript, Vite, yarnで開発。npmへの置き換えも多分可能）
- Netlifyに登録
- yarnコマンドなどでbuild
- buildして出てきたフォルダ (dist) をそのまま手動で上げる
- 環境変数を設定
- 完成
- (オプション) ドメイン名を
{被らない任意の文字}.netlify.appという制約で無料で好きに変えられる
(備考) Netlifyはデフォルトでhttpsになっていて優秀です
背景
フロントエンドもそろそろ勉強しておこうということで、React + TypeScript + Vite + yarnで簡単なSPA (シングルページアプリケーション) に挑戦しました。
開発が終わっていざデプロイしようと思ったら、意外と手間取ってしまったので記録しておこうと思います。
ここでは、いろいろ試して、最終的に手動デプロイで上手くいった方法を紹介します。
デプロイ初心者の僕が、色々試行錯誤して1時間ほど右往左往しているうちに、やっとNetlifyにデプロイできた、最初の方法です。
Netlifyに登録
僕はGitHubで連携させて登録しました。他にもGitLabとか色々あるみたいです。
yarnコマンドなどでデプロイ
一旦Netlifyから離れて、自分の開発した環境でbuildします。(yarn build)
buildして出てきたフォルダ (yarnだとdistが自動で出てくる) を使います。
このbuild段階でできているか確認したかったら、そのままでは見られないので以下の記事を参考に serve -s build で確かめます。
(生成したフォルダ名がdistなら、serve -s dist)
もしserveがインストールされていなければ、npm install -g serveをしてから実行します。
Production BuildしたReactアプリをローカル環境で実行する
buildして出てきたフォルダをそのまま手動で上げる
このフォルダで何をあげたらいいのか悩みました。（ここで時間を溶かしました、、）
結論から言うと、手動で上げるなら先ほど生成したフォルダ (distフォルダ) をアップロードします。
アップロードできたら、プレビューで確認します。
環境変数を設定
例えば、viteを使っているなら先頭にVITE_をつけるなどがありますが、少なくともNetlifyへの手動デプロイでは開発環境で動く変数名のままで大丈夫です。（のはずです）
完成
数十秒待つとURLが表示されます。
(オプション) 無料でドメイン名を変更する
{被らない任意の文字}.netlify.app の制約の中で好きに変えられます。制約なく、自分の独自ドメインを確保して設定する方法もあるみたいですが、僕は面倒だったのでこのくらいが妥協点かなと思いました。
制約はあるにしても、ドメイン名を選べるのいいですよね
以上です。何かあれば更新します。