Next.jsとJSON Serverのデプロイ
Next.jsはVercel、JSON ServerはHerokuを使ってデプロイします。
参考書
- typeScriptとReact/Next.jsで作る実践Webアプリケーション開発
Heroku(ヘロク)
ポイント
- テスト用バックエンドなのでスケールの必要なし
- デプロイまでの手順が簡単
- 無料で利用可能
デプロイ手順
- Herokuアカウント作成
- [Create new app]から、新しいアプリケーションを作成
- App name：ユニークなIDを設定
- [Connect to GitHub]でデプロイするソースコードのあるリポジトリを指定
リポジトリを選択するとビルドのパイプラインが走り、アプリケーションがHerokuへデプロイされます。
[View]ボタンを押すとブラウザからJSON Serverへアクセスができます。
Vercel(バーセル)
ポイント
- Next.jsの開発元が提供しているサービス
- デプロイが簡単
- サーバーレスでISRをサポートしている
手順1: 本番用の環境変数ファイル.env.productionの作成
.env.productionを作成します。
API_BASE_URL=<JSON ServerのURL>
NEXT_PUBLIC_API_BASE_PATH=/api/proxy手順2: Vercelでデプロイ
GitHubアカウントを利用することもできます。
- アカウントでログイン
- [Import]を押して、Next.jsアプリのリポジトリを選択
- デフォルトの設定で[Deploy]まで進むとビルド実行され、成功したらデプロイが完了します。
- ダッシュボードページでデプロイ先のURLをクリックして、サイトが公開されているか確認します。
失敗する場合はローカル環境でnpm run buildを実行してみて、ビルドに成功するか確認します。
まとめ
VercelもHerokuもリポジトリ指定→ビルド実行の流れは同じだということがわかりました。