Vercelでフルスタックアプリを無料デプロイ｜Next.jsとSupabaseで本格Webアプリを公開する手順
「ログイン機能もデータ保存もある本格的なWebアプリを、自分のURLで世界に公開してみたい」。そんな夢みたいなことが、なんとサーバー代0円で実現できちゃいます。今回つくっていくのは、ユーザー登録ができて、ログインができて、入力したデータがちゃんと保存される、そんなフルスタックアプリです。完成すると https://あなたのアプリ名.vercel.app のような専用URLが手に入って、スマホからでもパソコンからでもアクセスできる状態になります。
しかも使うのはVercel・Next.js・Supabaseという、いま世界中のクリエイターが愛用している組み合わせ。コードを書いたらGitHubに置くだけで、あとは勝手に本番公開まで進んでくれます。手元に作りかけのアプリがある人も、これから作る人も、この記事を読み終わるころには公開ボタンを押す準備が整っているはずです。それでは、いっしょに本格Webアプリを世界に届けてみましょう！
Vercel × Next.js × Supabase で何ができちゃうの？
まずは「この3つを組み合わせると何がうれしいのか」から見ていきます。ここがイメージできると、あとの手順がぐっと理解しやすくなります。
この3つを組み合わせると「フルスタックアプリ」が完成する
フルスタックアプリというのは、画面に見えている部分(フロントエンド)と、裏側でデータを保存したりユーザーを管理したりする部分(バックエンド)の両方がそろったアプリのことです。ふつうこの裏側を自分で用意しようとすると、サーバーを借りてデータベースを設定して、と一気にハードルが上がります。でもVercelとNext.jsとSupabaseを組み合わせれば、その面倒な部分をぜんぶおまかせできて、あなたはアプリの中身づくりに集中できちゃいます。
役割分担を知るとスッキリわかる
3つそれぞれに役割があります。Vercelは、つくったアプリを世界に公開してくれるホスティングの担当です。Next.jsはそのアプリ本体をつくるためのフレームワークで、画面もちょっとしたサーバー処理も書けます。そしてSupabaseが、データを保存するデータベースと、ログイン機能をまるごと提供してくれる裏方さんです。さらにGitHubがソースコードの保管庫になっていて、ここにコードを置くとVercelが自動で公開してくれる、という連携になっています。この役割分担を頭に入れておくと、どの作業がどこに効いているのかが迷子になりません。
全部無料枠でMVPが0円運用できる
うれしいのは、ぜんぶ無料枠からスタートできること。Vercelの無料プラン(Hobby)は月100GBの通信量まで使えて、個人の作品づくりには十分すぎる広さです。Supabaseの無料枠もデータベース500MB、ファイル保存1GB、月間アクティブユーザー5万人まで対応していて、最初の試作(MVP)なら完全に0円で動かせちゃいます。アプリが育って人気が出てきてから、必要に応じて有料プランに上げていけばいいので、お財布にやさしくスタートできるのが最高ですね。
公開に必要なものをそろえよう
つくりはじめる前に、必要な道具をそろえておきましょう。といっても、どれも無料で数分あれば準備できるものばかりです。
3つのアカウントを作る
最初に用意するのは、GitHub・Vercel・Supabaseの3つのアカウントです。ありがたいことに、VercelもSupabaseも「Continue with GitHub」というボタンからGitHubアカウントでそのままログインできちゃいます。なのでまずGitHubのアカウントだけ作っておけば、残りの2つは連携ログインで一気に準備完了。バラバラにパスワードを管理しなくていいので、ここはGitHub起点で進めるのがおすすめです。
手元に用意するNext.jsプロジェクト
公開する中身となるNext.jsのプロジェクトも用意します。まだ無い人は、ターミナルで次のコマンドを打つだけで、土台が一瞬で出来上がります。
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
これでTypeScriptもスタイリング用のTailwind CSSも入った状態のプロジェクトが生まれます。npm run dev と打ってブラウザで localhost:3000 を開けば、さっそく初期画面が表示されますよ。
cd my-app
入れておくパッケージ
SupabaseとNext.jsをつなぐための部品も入れておきます。プロジェクトのフォルダで次のコマンドを実行してください。
npm install @supabase/supabase-js @supabase/ssr@supabase/supabase-js がSupabaseとやりとりするための本体で、@supabase/ssr はNext.jsのサーバー側とブラウザ側でログイン状態をうまく共有してくれる便利な相棒です。この2つさえあれば、認証もデータベースもバッチリ扱えるようになります。
5つのStepで本番公開してみよう
ここからが本番です。といっても身構えなくて大丈夫。たった5つのStepで、あなたのアプリが世界に飛び立ちます。順番にいきましょう。
Step1 GitHubにプロジェクトをpushする
まずは手元のプロジェクトをGitHubに置きます。GitHubで新しいリポジトリを作って、ターミナルから git push でコードをアップロードするだけ。この置き場所が、これから先「コードを更新したら自動で公開される」仕組みのスタート地点になります。ここがちゃんとできていれば、もう半分終わったようなものです。
Step2 VercelとGitHubリポジトリを連携する
次にVercelを開いて「Add New Project」を押し、さっきpushしたリポジトリを選んで「Import」します。Vercelがプロジェクトの種類を自動で判別してくれるので、設定はほとんどデフォルトのままでOK。これでVercelとあなたのコードがつながりました。以降はGitHubにコードを更新するたびに、Vercelが勝手に最新版を公開してくれるようになります。
Step3 Supabaseプロジェクトを作って連携する
続いてSupabaseで「New Project」を押し、プロジェクト名・データベースのパスワード・リージョンを決めて作成します。リージョンは日本からのアクセスが速くなる「Northeast Asia (Tokyo)」を選ぶのがおすすめです。作成には2分ほどかかるので、その間にお茶でも飲んで待ちましょう。さらにVercel側の「Settings」から「Browse Marketplace」を開いてSupabaseを連携させておくと、後の設定がうんとラクになります。
Step4 環境変数を設定する
ここがちょっとだけ大事なところ。アプリがSupabaseと話せるように、2つの合言葉(環境変数)を教えてあげます。Supabaseの「Settings」→「API」を開くと、プロジェクトのURLと公開鍵(anon key)が確認できるので、それをVercelの環境変数に登録します。登録する名前はこの2つです。
NEXT_PUBLIC_SUPABASE_URL=https://あなたの値.supabase.co
NEXT_PUBLIC_ という頭文字がついた変数は、ブラウザからも見える設定になります。公開しても安全な anon key にはこれを付けますが、もうひとつ存在する service role key という秘密の鍵には絶対に付けないでくださいね。これだけ気をつければ安心です。
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
Step5 Deployボタンで本番公開する
最後にVercelの「Deploy」ボタンをポチッと押します。あとはVercelがビルドして公開まで自動でやってくれるので、しばらく待つと完了です。発行された https://○○○.vercel.app のURLを開いてみてください。あなたのアプリが世界に公開されている瞬間です。おめでとうございます、これでもう立派な公開アプリの作者ですね！
ログインとデータ保存も動かしてみよう
公開できたら、いよいよ本格Webアプリらしい「ログイン」と「データ保存」を動かしてみましょう。ここまでくると、ぐっとアプリらしくなってワクワクしてきますよ。
Supabaseクライアントを2種類用意する
Next.jsではブラウザ側とサーバー側でSupabaseをつなぐためのClientを分けて用意します。ブラウザ用は lib/supabase/client.ts に次のように書きます。
import { createBrowserClient } from "@supabase/ssr";export function createClient() {
サーバー側でもほぼ同じように createServerClient を使って用意します。こうしておくと、画面の操作でも裏側の処理でも、どちらからでもSupabaseを安全に呼び出せるようになります。
return createBrowserClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);
}
認証でログイン機能をつける
ログイン機能はSupabaseのAuthという仕組みにおまかせできちゃいます。うれしいのは、ユーザー情報を保存する専用のテーブルを自分で作らなくていいこと。Supabaseが裏でユーザー管理をぜんぶ引き受けてくれます。たとえばGoogleアカウントでのログインなら、次の一行を呼び出すだけで実現できます。
await supabase.auth.signInWithOAuth({ provider: "google" });これだけでGoogleのログイン画面に飛んで、戻ってきたらログイン完了。メールアドレスとパスワードでの登録機能も同じくらい手軽に追加できるので、好きな方を選んでみてください。
データベース操作でデータを保存・取得する
データの読み書きも直感的です。たとえば todos というテーブルからデータを全部取り出したいときは、次のように書きます。
const { data } = await supabase.from("todos").select("*");保存したいときは insert、消したいときは delete というふうに、やりたいことがそのまま英単語でつながっていく書き心地です。SQLを細かく書かなくても、メソッドをつなげるだけでデータベースが操作できちゃうので、はじめての人でもスラスラ書けるようになります。
もっと便利にするカスタマイズTips
基本の公開ができたら、あとは自分好みにアップグレードしていく楽しい時間です。ここではよく使うカスタマイズと、先回りで知っておくと得するポイントを紹介します。
RLSで自分のデータだけ守る
anon keyをブラウザから使う構成なので、RLS(行レベルセキュリティ)という設定をしておくと安心感が段違いになります。これは「自分のデータだけ読み書きできて、他人のデータには触れない」というルールをデータベース側に設定する仕組みです。Supabaseの画面からテーブルごとに有効にして、次のようなポリシーを追加します。
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;CREATE POLICY "本人だけ閲覧可"
これでログインしているユーザーが自分の情報だけを見られるようになります。公開アプリでは、ここをしっかり設定しておくのが安心への近道です。
ON profiles FOR SELECT
USING (auth.uid() = id);
画像アップロードや独自ドメインで本格化する
Supabaseにはファイルを保存するストレージ機能もあるので、プロフィール画像のアップロードなんかも追加できちゃいます。さらにVercelでは自分で取得したドメインをつなぐこともできて、あなたのアプリ.com のようなオリジナルのURLで公開すれば、一気に本格的なサービスの雰囲気に。作品として人に見せるときの説得力がぐっと増しますよ。
つまずきやすいポイントを先回りで回避する
最後に、知っておくと得する小さなコツをいくつか。環境変数の鍵をコピペするとき、うっかり改行が混ざると動かなくなることがあるので、貼り付けたら余計な空白がないか確認しましょう。それから、Vercelの無料プランではサーバー処理が10秒で打ち切られるので、ものすごく時間のかかる処理は向いていません。また、Supabaseの無料プロジェクトは1週間アクセスがないとお休みモードに入るので、たまに開いてあげると元気に動き続けてくれます。このあたりを先回りで知っておけば、安心してアプリづくりを楽しめます。
まとめ
今回は、Vercel・Next.js・Supabaseを組み合わせて、ログインもデータ保存もできる本格Webアプリを0円で公開する手順を見てきました。GitHubにpushして、Vercelと連携して、Supabaseをつないで環境変数を設定して、Deployボタンを押す。このたった5ステップで、あなたのアプリが世界に飛び立ちました。さらに認証とデータベースを足せば、もう立派なフルスタックアプリです。
ここまでできたら、あとはアイデア次第でどんどん育てていけちゃいます。ぜひあなただけのWebアプリを公開して、その手応えを味わってみてくださいね。この記事が役に立ったら、スキ♡やフォローでこっそり応援してもらえるとつくるんがとっても喜びます！
※この続きは読者特典です
🎁【読者限定特典】豪華4大特典を無料プレゼント
この記事を読んでくれたあなたへ、AI副業ツール・プロンプト集・ロードマップ・タイトルテンプレを無料でお届けします。
✅ note自動投稿ツール（AIが記事を全自動生成・投稿）
✅ AI副業プロンプト集50選（そのままコピペで使えるプロンプト集）
✅ 月5万円副業ロードマップ（ゼロから月5万の具体的な行動手順）
✅ noteタイトルテンプレ100選（PVが伸びるタイトルの型100種）
👇 今すぐ受け取る（完全無料）
https://note-reader-gifts.pages.dev/?src=tsukurun&aid=287037498315&pid=nd182c4e7dee2
