AIでサイト開発を始めると、レンタルサーバー、VPS、クラウド、Vercel、Netlify、Cloudflare、Supabase、Firebase、データベース、ストレージ、CDN、DNSなど、知らない言葉が一気に増えます。
ひとつひとつ調べると、説明は出てきます。
でも、初心者にとっては全部が「サーバーっぽい何か」に見えます。
その結果、
「結局どれを使えばいいの？」
「XServerとVercelは何が違うの？」
「Supabaseはサーバーなの？」
「Cloudflareは何をしている場所なの？」
「AIに作ってもらったアプリはどこに置けばいいの？」
という状態になります。
この記事では、細かい技術仕様ではなく、サイト開発で出てくる場所の全体像を整理します。
まず、サーバーは「置き場所」と考える
サーバーという言葉を難しく感じる時は、まず「置き場所」と考えると分かりやすいです。
サイトを作る時には、いろいろなものを置く場所が必要です。
- HTML、CSS、JavaScriptなどの表示ファイル
- 画像や動画
- 問い合わせフォームの処理
- 会員情報
- 記事データ
- 決済情報
- ログイン状態
- メール送信の仕組み
これらを全部ひとつの場所に置くこともできます。
でも、最近のサイト開発では、役割ごとに置き場所を分けることが増えています。
だから、サーバーの種類が多く見えるのです。
実際には、「何でもできる巨大な箱」がたくさんあるというより、
表示する場所、保存する場所、処理する場所、守る場所が分かれている
と考えると理解しやすくなります。
自分のパソコンは、作業場
まず、自分のパソコンです。
これは本番サーバーではありません。
自分のパソコンは、作業場です。
AIにコードを書いてもらう。
ローカルで表示を確認する。
文章や画像を準備する。
エラーを確認する。
こういう場所です。
ここで動いているものは、基本的に自分しか見られません。
だから、自分のパソコンで見えているからといって、本番サイトに出ているわけではありません。
ここを混同すると、
「直したのに本番に出ていない」
「ローカルでは見えるのに公開URLでは見えない」
という混乱が起きます。
自分のパソコンは、あくまで下書きと確認の場所です。
GitHubは、コードと履歴を置く場所
GitHubは、サイトを表示するサーバーとは少し違います。
GitHubは、コードと変更履歴を置く場所です。
本でいうなら、原稿と改訂履歴を保管している場所です。
GitHubに置くことで、
- どのファイルを変えたか分かる
- いつ何を変えたか分かる
- 前の状態に戻せる
- 別の作業をbranchで分けられる
- 本番反映前にPRで確認できる
ようになります。
共同開発をしない人にもGitHubは必要です。
なぜなら、AIにサイト開発を任せるほど、戻れる状態が必要になるからです。
GitHubは「公開する場所」というより、まずは「壊しても戻れるようにする場所」と考えてください。
レンタルサーバーは、昔ながらの分かりやすい置き場所
XServerのようなレンタルサーバーは、多くの人にとって馴染みのあるサーバーです。
イメージとしては、サイト用の部屋を借りるようなものです。
HTMLやPHP、WordPress、画像ファイルなどを置いて、公開します。
向いているのは、
- WordPressサイト
- LP
- 会社サイト
- シンプルなブログ
- PHPで動く既存サイト
などです。
レンタルサーバーは、管理画面が分かりやすく、昔から情報も多いです。
一方で、AIで作るようなNext.jsアプリ、会員サイト、ログイン、リアルタイム処理、外部API連携が増えてくると、少し扱いづらくなることがあります。
レンタルサーバーは悪いものではありません。
ただし、最近のAI開発アプリをそのまま置く場所としては、必ずしも一番楽とは限りません。
VPSは、自分で管理する自由度の高いサーバー
VPSは、Virtual Private Server の略です。
ざっくり言うと、インターネット上に自分用の小さなパソコンを借りるようなものです。
自由度は高いです。
自分でいろいろ設定できます。
でも、その分、自分で面倒を見る必要があります。
- セキュリティ
- OSの更新
- サーバー設定
- アプリの起動管理
- SSL
- 障害対応
こういうものを自分で扱う必要が出ます。
エンジニアにとっては便利です。
でも、AIでサイト開発を始めたばかりの人が、いきなりVPSを使うと、コード以外の管理で詰まりやすいです。
VPSは「自由だけど、管理責任もある場所」です。
VercelやNetlifyは、フロントエンドを公開しやすい場所
VercelやNetlifyのようなサービスは、最近のWebサイトやWebアプリを公開しやすい場所です。
特に、Next.jsやReactなどで作ったサイトと相性が良いです。
GitHubと連携しておくと、
コードをGitHubにpushする。
自動でビルドされる。
公開URLに反映される。
という流れを作れます。
AIで作ったサイトを公開する時、この流れはかなり便利です。
ただし、万能ではありません。
データベースやメール送信、決済、会員情報などは、別のサービスと組み合わせることも多いです。
VercelやNetlifyは、主に「サイトやアプリの表側を公開する場所」と考えると分かりやすいです。
Cloudflareは、守る・速くする・配る場所
Cloudflareは少し分かりにくいです。
なぜなら、できることが多いからです。
ざっくり言うと、Cloudflareはサイトを守ったり、速くしたり、世界中へ配ったりする場所です。
たとえば、
- DNSを管理する
- CDNで表示を速くする
- 不正アクセスから守る
- 静的サイトを配信する
- Workerで小さな処理を動かす
こういうことができます。
初心者にとっては、全部を理解する必要はありません。
まずは、
ドメインや表示速度、防御、軽い処理に関わる場所
と考えておけば十分です。
AI開発が進むと、Cloudflareのようなサービスはかなり重要になります。
ただ、最初から全部使いこなそうとすると混乱します。
SupabaseやFirebaseは、データを持つ裏側
SupabaseやFirebaseは、ざっくり言うとアプリの裏側を用意してくれるサービスです。
特に、
- ユーザー登録
- ログイン
- データベース
- ファイル保存
- 簡単なAPI
- リアルタイム更新
などに関わります。
AIで会員サイトや業務アプリを作る時、フロントエンドだけでは足りません。
誰がログインしているのか。
どの記事を見られるのか。
どの講座を購入したのか。
どのデータを保存するのか。
こういう情報を持つ場所が必要です。
その役割を担うのが、SupabaseやFirebaseのようなサービスです。
これらは「サイトを置く場所」というより、「アプリの記憶や会員情報を持つ場所」と考えると分かりやすいです。
データベースは、情報を整理して保存する場所
データベースは、情報を整理して保存する場所です。
ブログ記事。
会員情報。
購入履歴。
レッスンの進捗。
問い合わせ内容。
こういうものを入れておきます。
WordPressなら、裏側にデータベースがあります。
Noahのような会員サイトでも、記事や講座、ユーザー情報はデータベースに保存されます。
AIでサイトを作る時は、見た目だけ作れても、データをどこに保存するかを決めないと運用できません。
つまり、サイト開発では「画面」と「データ」を分けて考える必要があります。
ストレージは、画像やファイルを置く場所
ストレージは、画像、PDF、動画、音声ファイルなどを置く場所です。
データベースが「情報を整理して保存する場所」だとすれば、ストレージは「ファイルを置く倉庫」です。
たとえば、
- サムネイル画像
- 講座資料PDF
- アップロード画像
- 音声ファイル
- 添付ファイル
などです。
全部をサイト本体に置くこともできますが、運用が大きくなるとストレージを分ける方が安全です。
DNSは、住所を案内する場所
DNSは、ドメインとサーバーをつなぐ案内板です。
たとえば、example.com にアクセスした時、どのサーバーを見に行けばいいかを案内します。
DNSは普段あまり意識しません。
でも、サイト公開やドメイン変更の時には重要です。
AIでサイトを作っていても、DNS設定が間違っていると、コードが正しくてもサイトは表示されません。
これは、家は建っているのに住所案内が間違っているようなものです。
最初に全部を理解しなくていい
ここまで読むと、逆に難しく感じるかもしれません。
でも、最初から全部を理解する必要はありません。
大事なのは、役割で見ることです。
| 役割 | 代表的な場所 |
|---|---|
| 作業する場所 | 自分のパソコン、Codex、エディタ |
| 履歴を残す場所 | GitHub |
| 表側を公開する場所 | Vercel、Netlify、Cloudflare Pages、レンタルサーバー |
| データを保存する場所 | データベース、Supabase、Firebase |
| 画像や資料を置く場所 | ストレージ |
| ドメインを案内する場所 | DNS、Cloudflareなど |
| サイトを守る・速くする場所 | CDN、Cloudflareなど |
こう分けるだけで、かなり見通しが良くなります。
AIに任せる前に、どこを触っているか分かるようにする
AIに開発を任せる時、怖いのはAIがコードを書けることではありません。
自分が、AIにどこを触らせているか分からないことです。
フロントエンドを触っているのか。
データベースを触っているのか。
DNSを触っているのか。
メール送信を触っているのか。
決済を触っているのか。
ここが分からないままAIに任せると、何か壊れた時に原因が追えません。
逆に、ざっくり役割が分かっていれば、AIへの指示も変わります。
「Vercel側の表示確認だけして」
「GitHub上のPR差分だけ見て」
「Supabaseのデータは触らず、表示側だけ直して」
「DNS設定は触らず、コード側のリンクだけ確認して」
こういう指示ができるようになります。
小さな確認ワーク
自分のサイトについて、次の5つを書き出してみてください。
- コードはどこに置いていますか。
- 本番サイトはどこで公開されていますか。
- 会員情報や記事データはどこに保存されていますか。
- 画像やPDFはどこに置いていますか。
- ドメインはどこで管理していますか。
この5つが分かると、AIにサイト開発を任せる時の事故は減ります。
逆に、ここが分からないまま開発を進めると、直したい場所と触っている場所がズレやすくなります。
サーバーの種類を全部覚える必要はありません。
まずは、自分のサイトがどの場所を使っているのか。
そこから確認すれば十分です。
関連して読んでおきたい記事
AIでサイトを作る時代は、コードを書けるかどうかだけではなく、どこに何が置かれているかを見られる人が強くなります。
自分のサイトの置き場所が分かれば、AIに任せる範囲も、エンジニアに相談する範囲も、かなり明確になります。