AI活用

Claude Codeで作ったサイトを世界に公開する——デプロイという関門

Claude Codeで作ったサイトをVercelとSupabaseを使って世界に公開する方法。デプロイサービスの選び方から、Vercel+Supabaseの組み合わせのメリットまで詳しく解説します。

#AI#デプロイ#Vercel#Supabase#Claude Code#サイト制作

Claude Codeで作ったサイトを世界に公開する

こんにちは、hitechpapaです。

今日は、サイトやブログを作り、いよいよインターネットという世界にデプロイ(公開)するまでの過程についてお話ししたいと思います。

ローカルから世界へ

Claude Codeが一生懸命サイトを作ってくれて、自分の好みに合うように修正作業を重ねていくと、ある瞬間、「おお、これなら世に出しても大丈夫だ」と思えるタイミングがやってきます。心の準備ができる瞬間です。それまではローカル環境(自分のパソコン上)でしか見られなかったサイトを、いよいよ世界に送り出す時が来たということです。

デプロイ(deploy)とは、簡単に言えば、自分のパソコンだけで動いていたサイトをインターネットに接続されたサーバーにアップロードして、誰でもアクセスできるようにする作業のことです。アドレスバーにURLを入力すれば、世界中どこからでも自分のサイトにアクセスできるようになるわけです。開発の中で最もワクワクする瞬間でもあり、同時に「本当にこのままで大丈夫かな?」という緊張感が共存する瞬間でもあります。

デプロイサービスの2つの選択肢

韓国の場合、サイトをデプロイする際に大きく2つの選択肢があります。

1つ目は、韓国国内企業のクラウドやサーバーを利用する方法です。韓国にも大手企業が運営するクラウドサービスがいくつかあります。韓国語のサポートが充実しており、国内のデータセンターを使用するため、韓国のユーザーを対象としたサービスであればレスポンス速度の面で有利になることがあります。また、韓国の法律に準拠したデータ管理ができるというメリットもあります。

2つ目は、海外(主にアメリカ)企業のクラウドやサーバーを利用する方法です。世界中で広く使われているサービスのほとんどがこちらに該当します。グローバルなサービスを目指すなら、エコシステムやリファレンスの面でこちらの方がはるかに充実しています。

おそらく日本でも同じような2つの選択肢があるのではないかと思います。日本にも国内のクラウドやホスティングサービスがありますし、同時にAWSやGoogle Cloudといったグローバルサービスも広く使われていますよね。

どちらが良い、悪いというよりも、状況によってそれぞれのメリット・デメリットがあるので、自分のサイト運営計画に合わせて選べば良いと思います。

世界の主要クラウド・サーバーサービス

海外が提供するサービスは本当に多くの種類があり、有名な企業も数多く存在します。世界的に有名なサービスをカテゴリー別に整理してみましょう。

大手クラウドインフラ(Big 3)

この3社で世界のクラウドインフラ市場の約63%以上を占めています。

  • Amazon Web Services (AWS) — 市場シェア約30%。最も歴史があり最大のクラウドサービスで、200以上のサービスを提供しています。
  • Microsoft Azure — 市場シェア約20%。法人向けソリューションとAIサービスに強みがあります。
  • Google Cloud Platform (GCP) — 市場シェア約13%。データ分析や機械学習の分野で特に強いです。

その他の主要クラウドサービス

  • Alibaba Cloud — アジア市場最大のクラウド、グローバルシェア約4%
  • Oracle Cloud — データベースとエンタープライズソリューションに特化
  • IBM Cloud — ハイブリッドクラウドとAI(Watson)分野に強み
  • DigitalOcean — 開発者フレンドリーでシンプルなクラウドサービス

フロントエンドデプロイ・ホスティング特化

  • Vercel — Next.jsの開発元が運営、フロントエンドデプロイに最適化
  • Netlify — JAMstackベースのサイトデプロイに特化
  • Cloudflare Pages — CDNとセキュリティに強みを持つデプロイプラットフォーム
  • GitHub Pages — 静的サイトを無料でホスティング

バックエンド・データベースサービス

  • Supabase — Firebaseのオープンソース代替として、PostgreSQLベースのバックエンドサービス
  • Firebase (Google) — モバイル・Webアプリ向けの統合バックエンドプラットフォーム
  • PlanetScale — サーバーレスMySQLデータベースプラットフォーム
  • Railway — バックエンドデプロイとデータベースを手軽に管理

私の選択:Vercel + Supabase

これだけ多くのサービスがある中で、私はVercelとSupabaseの組み合わせを選んでサイトを運営しています。この組み合わせを選んだのにはそれなりの理由があります。

Vercelのメリット

  • Next.jsとの完璧な互換性:VercelはNext.jsを作った会社なので、Next.jsプロジェクトをデプロイする際に最も最適化された環境を提供してくれます。私もNext.jsで開発しているので、自然な選択でした。
  • 簡単なデプロイ:GitHubリポジトリと連携しておけば、コードをプッシュ(push)するたびに自動的にデプロイが行われます。複雑なサーバー設定なしに、数クリックでサイトを世界に公開できます。
  • グローバルCDN:世界中に分散されたサーバー(Edge Network)を通じて、どこからアクセスしても高速な表示を実現します。
  • プレビューデプロイ:コードを修正するたびにプレビュー用のURLが自動生成されるので、本番サイトに反映する前に変更内容を確認できます。

Supabaseのメリット

  • PostgreSQLベース:世界で最も信頼されているオープンソースデータベースであるPostgreSQLを基盤としており、安定性と拡張性に優れています。
  • オールインワンバックエンド:データベースだけでなく、認証(Auth)、ストレージ(ファイル保存)、リアルタイム機能まで1つのプラットフォームで提供されます。別途バックエンドサーバーを構築する必要がありません。
  • オープンソース:Firebaseと違いオープンソースなので、必要であれば自分のサーバーにインストールして運用することも可能です。
  • 直感的なダッシュボード:Supabase Studioという管理画面でデータベーステーブルをビジュアルに管理でき、SQLに詳しくなくても比較的簡単にデータを扱えます。

この組み合わせが特に良い理由

VercelとSupabaseは競合関係ではなく、互いを補完し合う関係です。Vercelがフロントエンド(ユーザーが見る画面)を、Supabaseがバックエンド(データの保存・処理)を担当し、2つを合わせればフルスタック(Full-stack)Webアプリケーションを構築できます。さらに、VercelのマーケットプレイスでSupabase連携が公式にサポートされており、環境変数の設定などが自動的に同期される便利さもあります。

何よりも、私のようにClaude Codeを活用して開発する個人開発者にとっては、複雑なサーバー管理なしにコーディングだけに集中できるという点が最大の魅力でした。

無料プランと有料プラン

そんなわけで、私はこの組み合わせでサイトを運営しており、今のところ大きな問題なく使えています。1つ知っておいていただきたいのは、VercelもSupabaseも無料プラン(Free Tier)を提供していますが、無料プランは非商用(個人の趣味)用途に限定されているということです。商用目的でサイトを運営するなら、有料プランを利用する必要があります。私も毎月料金を支払って使っています。

最初は「無料でできるのに、なぜお金を払わないといけないの?」と思うかもしれませんが、安定したサービス運営と商用利用のためには必要な投資だと考えています。従来のようにサーバーを自分で構築・管理するコストと比べれば、はるかにリーズナブルでもあります。

まとめ

サイトを作ることも大切ですが、それを世界に公開するデプロイの過程も開発の重要な一部です。昔はサーバーを自分で購入して、Linuxをインストールして、ネットワークを設定するなど、デプロイ自体が1つの大きなプロジェクトでした。しかし今はVercelやSupabaseといったサービスのおかげで、コーディング初心者でも自分が作ったサイトを比較的簡単に世界に公開できる時代になりました。

もちろん、デプロイの過程でもドメイン設定、DNS管理、環境変数の設定など、新しく学ぶべきことはあります。しかし、こうした部分もClaude Codeと一緒なら1つずつ解決していけます。私も最初は何も分かりませんでしたが、1つずつぶつかりながら学んでいき、今では複数のサイトを運営しています。

次回は、実際のデプロイの手順をステップバイステップでさらに詳しくご紹介したいと思います。最後まで読んでいただき、ありがとうございました!

シェア: