はじめまして、エンジニア職へのキャリアチェンジのためカナダへ留学中のMayuです！

初めての記事で突然ですが、苦手なデプロイについて自分のメモ用に記録しておこうと思います。

まず今回デプロイしたいのが、下記を使用して作成したオンライン予約サイト。
デプロイURL: https://salon-booking-system-frontend.vercel.app/
・frontend: Vite+React（https://github.com/MayuHayakawa/salon_booking_system_frontend）
・backend: Node.js, MongoDB（https://github.com/MayuHayakawa/salon_booking_system_backend）

そしてデプロイに使用したサイトが
・frontend: Vercel
・backend: Render.com

なぜこの二つを使用したかという理由は特にありません
（というよりまだよくわかっていないという言い方の方が正しい・・・）
在学中の学校の先生に提示してもらったものをそのまま使いました。
いつかより詳しくなったらデプロイの際にどのサービスを使用するのが良いか比較もしてみたいところですが、
今はとりあえずデプロイしたい！ということで。。。

デプロイの手順は、
・Render.comでbackendのデプロイ
・Vercelでfrontendのデプロイ
で進めました。

Render.comでのbackendデプロイ方法

1) Render.comにログイン（https://render.com/）
2) 新規で「Web Service」を選択
3) デプロイしたいrepositoryを選択（frontとbackはrepositoryを分けています）
4) Name, Build Command, Start Commandを入力し、Freeを選択して（ここはお好きなプランで）[Create Web Service]をクリック
　Build Commandは npm install
　※私の場合、Start Commandはpackage.jsonファイルのscriptsに追記した node index.js となります。

5) 接続先のサーバーURLやPORT、その他必要なセキュリティパスワードが記載されている.envファイルの情報をEnviromentのSecretFilesに入力、保存
　※私の場合、Filenameを .env Contentsに.envファイルの内容をまるっとコピペしました
6) 最後に[Manual Deploy]から[Deploy latest commit]を選択し、backendのデプロイは完了
7) デプロイ完了後に、URLが表示されるためコピー（下記画像のrepositoryの下に表示されているはず）

Vercelでのfrontendデプロイ方法

1) Vercelにログイン（https://vercel.com/）
2) [Add New Project]で[project]を選択、デプロイしたいrepositoryをimport
3) Project Name（お好み）とEnvironment VariablesのNameとValue（backendのデプロイURL）の情報を記入
※私の場合、Nameは.envファイルに記載している「VITE_BASE_URL」となります

下記はbackendからデータを読み込む関数の例

4) [Deploy]をクリックするとfrontendのデプロイも完了！