このレッスンで学ぶこと
講座プラットフォームがひとまず完成したので、このセクションからは公開前の作業を進めていきます。アプリを公開することを別名で デプロイメント(Deployment) と呼びます。本動画ではそれが何を意味するのかを全体像として説明します。
そもそも何を公開するのか
今、Next.js でフロントエンドとバックエンドを作ってきました。このアプリは現状、ローカル環境という「自分のパソコンの中」でしか動作していません。これを、外部の公開サーバー にアップロードして、そのサーバーから他のユーザーに配信してもらう作業が「デプロイ」です。
Vercelとは
今回は Vercel を使っていきます。VercelはNext.jsの開発元で、Next.jsをシンプルにデプロイできるホスティングサービスを提供しています。
昔と今の公開手法
- 昔: レンタルサーバーを借りてWordPressなどをアップロード
- 今: Vercelのようなホスティングサービスを使うのが主流
Vercelは何のサーバーを使っているのか
Vercelは実際には AWS 上で動いています。つまり「VercelにNext.jsをデプロイする」ということは、実質「AWSにデプロイする」とほぼ同じ意味になります。Vercelは AWSのラッパー (包み込んで使いやすくしたもの)と言われています。
自分でAWSにNext.jsのフル機能を使える状態でデプロイするのは難しいため、Vercelはその手間を詩取ってくれます。GitHubのリポジトリさえあればボタンひとつで公開できるため、インフラに詳しくないエンジニアや非エンジニアの方にもおすすめです。
Vercelの料金
商用利用の場合、月額20ドル(約3,500円)がかかります。今回のように決済機能付きの講座プラットフォームは商用利用にあたるため、この支払いが必要です。
コストを抑えたい場合の代替
- Cloudflare Workers: 無料枠も手厚いが、Windowsだと動作が不安定なことがあるため、主にMacユーザー向き
- Netlify: Mac・Windowsのどちらでもデプロイ可能。Vercelよりやや安価で、無料枠でも商用利用できる
ただし、Next.jsのアップデートがあった際にフル機能をすぐに使いたい場合は、開発元ではないNetlifyやCloudflareだと対応が遅れることがあります。そういったメンテナンスを避けたい場合はVercelを選んだほうが無難です。
Next.js以外のサービスはデプロイ不要
よくある質問として「Tursoやbunny.net、Better Authも一緒にデプロイするの?」というものがありますが、結論からいうと 不要 です。
- Better Auth: ライブラリなので、ビルド時にコード内にバンドルされる
- Stripe / Turso / bunny.net: それぞれ外部サービスとして独自のサーバー上で動いているため、Next.jsからAPI経由で呼び出すだけでよい
つまり、自分で作ったアプリ(ここではNext.jsのコードベース)だけをデプロイすればOKということです。
次のステップ
いきなりVercelにデプロイするのではなく、まずは以下のような 公開前の最適化 を行っていきます。
- セキュリティチェック
- パフォーマンスチェック
- ベストプラクティスに沿った最適化
公開とは何か、そしてなぜVercelを選ぶのかを頭に入れた状態で、次回以降の実装に進んでいきましょう。