TRAINING
Webサービスが動く仕組み
ホームページが表示される裏側の仕組みを、ざっくり理解する
宛先
全社員
提出者
吉田
提出日
2026年4月27日
Chapter 1
全体像
4つの技術が何をしてくれているのか、
お店を開くたとえを使って把握しましょう
SECTION 1-1
全体マップ — 4つの技術の役割
サーバー
24時間営業のレストラン
いつでも注文に応じて
料理を出してくれる「お店」
ドメイン
お店の住所・看板
「覚えやすい名前」で
場所を示す「住所」
DNS
インターネットの電話帳
名前をサーバーの場所に
変換する「電話帳」
Firebase
Firebase Hosting
なんでもやってくれる管理会社
お店の準備から運営まで
全部おまかせ
「お店を開く」にたとえると

レストラン(サーバー)を用意して、住所(ドメイン)を決め、電話帳(DNS)に住所を登録する。
その店舗運営を管理会社(Firebase Hosting)に任せると、管理の手間なく誰でも来られるお店が完成します。

SECTION 1-2
Webサイトが表示されるまでの流れ

URL(ホームページの住所)を入力
例:gonmura.com

DNS が調べる
名前 → 場所(数字の住所)に変換

サーバーに接続
ファイルを取りに行く

ブラウザ(ChromeやSafariなど、ホームページを見るアプリ)が表示
画面が組み立てられる
たとえ:電話をかける流れ

「山田さんに電話したい」→ 電話帳(DNS)で電話番号(コンピュータ用の数字の住所)を調べる →
番号に電話する(サーバーに接続する)→ 山田さんが出る(サーバーがデータを返す)→ 会話成立(ブラウザが表示)

ブラウザでURLを入力してから画面が出るまで、この4ステップが1秒以内に完了しています
Chapter 2
サーバー
24時間365日、誰かが来るのを待っている
「いつでも開いているレストラン」の正体
SECTION 2-1
サーバーとは — 24時間営業のレストラン
自分のPC

使いたい時だけ電源を入れる。
シャットダウンしたらアクセス不可。
自分だけの「自炊キッチン」。

特徴内容
稼働時間使う時だけ
アクセス(ホームページを見に来ること)自分だけ
目的個人の作業
サーバー

中身は皆さんが使っているPCと同じ。
違いは24時間つけっぱなしで、
誰からのアクセスにも応答できること。

特徴内容
稼働時間24時間365日
アクセス世界中の誰でも
目的データを届ける
サーバー = ただのPC。違いは「24時間つけっぱなしで注文に応え続ける」こと
SECTION 2-2
クラウドサーバー — ネット上のPCを借りるだけ

自前サーバー(昔の方法)

自社でPCを買って管理する

会社にサーバー用のPCを置いて、電気・空調・セキュリティを全部自分で管理。壊れたら自分で修理。

課題
高価な機器を自社で購入・保有
専任の管理者が必要
壊れたら自分で修理
急なアクセス増に対応しにくい

クラウドサーバー(今の主流)

ネット上のPCを借りるだけ

Xserverやさくらサーバーなどの会社が管理しているPCを「必要な分だけ借りる」仕組み。自分でPCを用意する必要なし。

メリット
初期費用なし、使った分だけ支払い
管理はサーバー会社にお任せ
壊れても自動で代替機に切り替え
アクセス増に合わせて簡単に拡張
AWS AWS Google Cloud Google Cloud など、ネット上のPCを「借りる」だけでサーバーが持てる時代です
Chapter 3
ドメインとDNS
住所と電話帳 — 人間が覚えやすい名前と
コンピュータが使う番号をつなぐ仕組み
SECTION 3-1
ドメインとは — インターネット上の住所
ドメインがない世界

サーバーの本当の場所は数字の羅列(IPアドレス)で表されます。
例:203.0.113.42

これを覚えてアクセスするのは現実的ではありません。

数字の住所を「覚えやすい名前」に置き換えるのがドメイン
ドメインがある世界

数字の代わりに意味のある名前でアクセスできます。
例:gonmura.com

お客様に「ホームページのアドレスは何ですか?」と聞かれたとき、それがドメインのことです
SECTION 3-2
DNS とは — インターネットの電話帳
DNSとは

正式名称:Domain Name System(ドメイン・ネーム・システム)

「gonmura.com」という名前を「203.0.113.42」という数字(IPアドレス)に変換してくれる仕組みです。
電話帳が「山田さん」→「090-xxxx-xxxx」に変換するのと同じ役割です。

名前を場所に変換する流れ


URLを入力
gonmura.com

DNSサーバーに問い合わせ
「gonmura.comの場所は?」

IPアドレスが返ってくる
「203.0.113.42ですよ」

サーバーに接続
サイトが表示される
DNSは世界中にたくさん置かれている巨大な電話帳。毎日何十億回もの「名前変換」をこなしています
SECTION 3-3
ネームサーバー — 「どの電話帳を見る?」を決める設定
ネームサーバーとは

DNS(電話帳の仕組み)の中で、実際に「このドメインの場所はここですよ」と答える担当のサーバーのこと。
ドメインを買ったあと「このドメインの問い合わせは、どのネームサーバーに聞けばいいか」を設定します。

ドメイン管理サービス(レジストラ)

ドメインを 買って所有する 場所。
例:お名前.com / Google Domains / Cloudflare Registrar など

ネームサーバー(DNS運用)

そのドメインの 問い合わせに答える 場所。
例:Cloudflare / Route 53 / Firebase / 各レジストラの標準DNS など

この2つは 別の会社にできる。「お名前.comでドメインを買って、ネームサーバーはCloudflareに向ける」みたいなことが普通に行われます
SECTION 3-4
主要なドメイン管理サービス(レジストラ)
どこでドメインを買えばいい?

国内・海外それぞれ複数の選択肢があります。サポート言語・料金・他サービスとの連携で選びます。

サービス特徴主な利用層
お名前.com国内最大手。日本語サポート・支払い手段が豊富国内企業・個人
ムームードメインGMO系。レンタルサーバーとセットで使いやすい個人・小規模サイト
Xserver ドメインXserverレンタルサーバーと相性◎国内ユーザー
Cloudflare Registrar原価販売(手数料なし)。DNSも一体運用できるエンジニア・コスト重視
Squarespace(旧Google Domains)2024年に移管。海外サービス向け海外サービス利用者
GoDaddy / Namecheap世界最大手。海外連携が豊富海外向け・グローバル
SECTION 3-5
DNSレコードの種類 — 電話帳に書く「メモ」
DNSレコードとは

ネームサーバーに登録する「このドメインの〇〇は△△ですよ」というメモ書き。種類によって書く内容と用途が違います。

種類書く内容用途・たとえ
Aレコード ドメイン → IPアドレス(数字) 一番基本の住所登録。
「gonmura.com → 203.0.113.42」
CNAME
レコード
ドメイン → 別のドメイン 別名・転送。
「www.gonmura.com → gonmura.com を見て」のように案内する
TXTレコード ドメインに テキストのメモ 所有確認・メール認証に使う。
「このサイトは私のものです」「このメールは本物です」の証明用メモ
「Google Search Console に登録してください」「メールがなりすまし扱いされる」などの場面で TXT レコードを追加することがあります
Chapter 4
サーバーの役割
サイトやデータベースは具体的にどう動いているのか
レストランのたとえで中身を覗いてみましょう
SECTION 4-1
Webサイトが動く仕組み

ユーザーがURLにアクセス
「この料理をください」

サーバーがリクエストを受け取る
ホールが注文を聞く

ページのデータを返す
料理をテーブルに運ぶ

ブラウザが画面を組み立てる
お客さんが食べる
たとえ:レストランのホールスタッフ

サーバーはレストランのようなもの。「この料理(ページ)をください」という注文に応じて、キッチンで準備して提供してくれます。

作り置きタイプ(静的サイト) — 作り置きメニューをそのまま出す

あらかじめ作っておいたページをそのまま返す。このポータルサイトもこの形式。高速で安価。

その場で作るタイプ(動的サイト) — 注文に応じてその場で調理する

アクセスのたびにサーバーが内容を組み立てて返す。ログイン状況や個人情報に合わせた表示が可能。

お客様から「サイトが表示されない」と問い合わせがあったとき、この流れのどこで止まっているかイメージできるようになります
SECTION 4-2
データベースが動く仕組み
たとえ:レストランの食材庫

データベース = レストランの食材庫。データを棚ごとに分類して保管。

データの保存

アプリが「保存して」と依頼
サーバーがデータベースに書き込む
食材庫の棚に収納される

データの取得

アプリが「〇〇を出して」と依頼
サーバーがデータベースを検索
食材庫から取り出して返す
保存されているデータの例食材庫での場所
ユーザー情報(名前・メール・パスワード)「ユーザー」棚
注文履歴(日時・商品・金額)「注文」棚
商品情報(名前・価格・在庫数)「商品」棚
営業日報や顧客リストなど、皆さんが入力しているデータもデータベースに保管されています
SECTION 4-3
サーバーの中で何が連携しているか
たとえ:レストランの構造

サーバーの中は「ホール・キッチン・食材庫」の3つが連携しています。

Webサーバー
=ホール(お客様対応)
注文を受けてキッチンに伝える
処理プログラム
=キッチン(料理担当)
ログイン確認・注文処理などを実行
データベース
=食材庫(材料保管)
データを保管し、依頼に応じて提供
ユーザーが注文
ブラウザから注文が届く
ホールが受け取る
Webサーバーが対応
キッチンが料理
処理プログラムが判断・計算
食材庫から取り出す
データベースから取得
料理を提供
ブラウザに返す
「サーバーが落ちた」→ ホール・キッチン・食材庫、どこが止まった?がイメージできればOK
SECTION 4-4
Firebase の各サービスはどこに該当する?
レストランの役割で整理すると

前のスライドの「ホール・キッチン・食材庫」の各役割を、Firebaseのどのサービスが担当しているかをマッピングします。

Firebase サービス役割レストランで言うと
Authentication ログイン・ユーザー管理 入口の 受付係(誰が来たかを確認・本人確認)
Firestore データベース(注文・ユーザー情報など) 食材庫(材料=データを保管・取り出し)
Storage 画像・動画・ファイル保管 大型倉庫(写真や動画など、サイズの大きい物を置く場所)
Functions サーバー側で動く処理プログラム キッチンの料理人(注文に応じて調理・計算する担当)
Firebaseは1つのプロジェクトの中で「受付・食材庫・倉庫・料理人」がまとめて使える便利なセット
HOSTING
Chapter 5
Firebase Hosting
ここまで学んだこと、全部自分でやるのは大変…
Firebase Hostingを使うとなぜ楽なのか
SECTION 5-1
全部自分でやるとこんなに大変
やること自分でやる場合
サーバー(PC)の用意レンタルサーバーを契約・設定
ドメイン取得ドメイン会社で購入・設定
DNS設定ドメインとサーバーを紐づけ
SSL証明書取得して定期的に更新
ファイルのアップロード専用ツールでサーバーに転送
アクセス増加への対応サーバーを増強・分散
やること自分でやる場合
世界中に速く配信CDNを契約して配信網に乗せる
セキュリティ対策攻撃検知・ファイアウォール設定
バックアップ定期的にデータを別の場所に保存
監視・障害検知24時間チェック
OS・ソフト更新セキュリティパッチを当て続ける
サーバーの管理障害対応・トラブル解消を自分で
エンジニアでも手間がかかる作業。これをまるっと引き受けてくれるのが Firebase Hosting です
SECTION 5-2
Firebase Hosting なら全部おまかせ
レストランのたとえでいうと

全部やってくれる「管理会社」。あなたは料理(サイト)を作るだけ!

やること自分でやる場合Firebase Firebase Hosting
サーバーの用意レンタルサーバー契約・設定自動で用意される
ドメイン設定ドメイン会社で購入・設定URLが自動発行される
DNS設定手動で紐づけ作業自動で設定される
通信の安全対策安全な通信の設定を自分で自動で鍵マーク付きに
障害対応・管理24時間自分で監視Googleが24時間管理

この研修サイトもFirebase Hostingと同じ種類のサービス(CloudflareCloudflare Pages)で公開されています。 もっと詳しく知りたい方は バックエンド基礎研修 も参照してください。

あなたは「Webサイトを作ってアップロード(インターネット上に送ること)する」だけ。あとは全部おまかせ!
SECTION 5-3
なぜ全部おまかせできるのか
サーバーは すでにGoogleが動かしているGoogle

「デプロイ」でサーバーが作られるのではなく、Googleの巨大なサーバー網に あなた専用の置き場が割り当てられる 仕組みです。

① プロジェクト作成時

=お店のスペースを借りる瞬間

  • Googleのサーバー網に 専用スペース を確保
  • xxx.web.app という住所(URL)を発行
  • その住所がDNSに登録される
② デプロイ時

=そのスペースに商品を並べる瞬間

  • サイトのファイルを スペースにアップロード
  • 世界中のCDN(配信網)にも自動でコピー
  • すぐにアクセスできるようになる
プロジェクト作成 = スペースを借りる、デプロイ = ファイルを置く。サーバー自体は最初からGoogleが動かしている
SECTION 5-4
自分だけの看板(ドメイン)に付け替える
仮の看板 → オリジナルの看板に

管理会社が用意してくれる xxx.web.app(または xxx.firebaseapp.com)は便利ですが、お客様に覚えてもらうなら自社ドメイン(例: gonmura.com)の方がいいですよね。その看板を自分のものに付け替えることができます。

FirebaseFirebaseの管理画面でドメインを追加
ドメイン会社の管理画面でDNS設定
(Ch3で学んだ電話帳に「新しい名前→Firebaseのサーバー」を登録)
反映を待つ
(数分〜最大48時間)

Firebase Hosting でも Firebase App Hosting(動的なアプリ向けの新しいサービス)でも、カスタムドメインの設定方法はほぼ同じです。どちらもFirebaseの管理画面からドメインを追加して、DNS設定をするだけ。

カスタムドメインの設定もコンソール画面の操作だけ。Ch3で学んだDNSの仕組みが裏で動いて、あなたのドメインとサーバーがつながります
Chapter 6
App Hosting と 自動デプロイ
動的アプリ向けの「App Hosting」と、
GitHubに上げるだけで自動で公開される仕組み
SECTION 6-1
Firebase App Hosting とは
Hosting の "キッチン付き" 版Firebase

Ch5の Firebase Hosting は「決まったメニューを並べておくだけのお店(中身が変わらないサイト)」向け。App Hosting は「Ch4で学んだキッチン(バックエンド処理)が必要な、注文ごとに料理を作るお店」向けの新しいサービスです。

 FirebaseFirebase HostingFirebaseFirebase App Hosting
向いている用途会社案内・ブログ・LP会員サイト・ECサイト・SaaS
中身静的(誰が見ても同じ)動的(人によって違う表示)
バックエンド処理なしあり(Ch4で学んだ仕組み)
デプロイ方法ファイルをアップロードGitHubと接続して自動
この研修ポータルのような単純なサイト = Hosting / 業務システムや会員サイト = App Hosting と覚えておけばOK
SECTION 6-2
バックエンドを作成して GitHub と接続
GitHub GitHub = お店の「レシピブック」をクラウド共有

GitHub は、お店のレシピや調理手順(プログラム)をクラウドにまとめて保管しておくサービス。複数のシェフ(エンジニア)が同じレシピブックを共有・更新できます。

1
バックエンドを作成
Firebase 管理画面で
「作成」ボタンを押す
2
リポジトリを選ぶ
GitHub どのレシピブックを
使うか指定
3
mainブランチ指定
正式メニューの
置き場所を指定
4
接続完了
URLが自動発行
される

用語1: リポジトリ

GitHub上の「お店1店舗分のレシピブック」。料理(サイト)を作るためのレシピ・手順がまるごと入っている。

用語2: ブランチ(main)

レシピブックの「正式版ページ」。試作中のレシピとは別に保管され、ここに載ったものがお店で出す本番メニューになる。

設定するのは最初の1回だけ。あとは GitHub の main を更新するたびに自動で反映されます
SECTION 6-3
main に push すると自動でデプロイされる
push(プッシュ)= 正式版レシピブックに反映

シェフ(エンジニア)が書いた新しいレシピを GitHub の main(正式版ページ)に push(反映)すると、管理会社(Firebase)が自動でそれを検知して、調理〜開店までを全部やってくれます。


エンジニアが
コードを修正
GitHub
mainブランチに
push

Firebaseが
変更を検知

自動でビルド
組み立て

本番URLに
自動で反映
手作業ゼロ
アップロード作業が消える
忘れない
アップロード忘れが起きない
履歴が残る
誰が・いつ・どのレシピを変えたか記録
すぐ戻せる
失敗時は前バージョンへロールバック
GitHub に上げる = 本番公開。シンプルな仕組みだから、リリース頻度を高めても事故が起きにくい
SECTION 6-4
実例:バックエンド作り直しでサイトが開けなくなった話
⚠ e-muプロジェクトで実際に起きたこと

GitHubのリポジトリ名を変更したため、Firebase App Hosting で 新しいバックエンドを作成して紐付け直した。…が、カスタムドメインの再接続を忘れていて、サイトが開けない状態になった。

Before(正常)

new.e-mu-cloud.jp
↓ DNS
Firebase 旧バックエンド
↑ GitHub接続
GitHub 旧リポジトリ

After(リポジトリ名変更後)

new.e-mu-cloud.jp ⚠旧のまま
↓ DNSは旧を向いたまま
旧バックエンド(消失)
✗ 接続が切れた
Firebase 新バックエンド ←繋ぎ直し忘れ
↑ GitHub接続(新)
GitHub 新リポジトリ

教訓:厨房を建て直したら、看板も新しい厨房に向け直す

バックエンドは「厨房(キッチン)」、カスタムドメイン(new.e-mu-cloud.jp)は「お店の看板」。厨房を新しく建て直したら、看板も新しい厨房を指すように電話帳(DNS)に登録し直さないと、お客様は古い空っぽの厨房に案内されてしまいます。Ch3で学んだDNSの仕組みがそのまま当てはまる話です。

SUMMARY
まとめ — 4つの技術の連携

ドメイン
覚えやすい住所

DNS
住所を番号に変換

サーバー
データを提供
Firebase
Firebase Hosting
ファイルを管理・公開

ブラウザに表示
あなたの画面
サーバー
ただのPC。24時間つけっぱなしで注文に応え続ける「レストラン」
ドメイン
数字の住所を覚えやすい名前に置き換える「住所・看板」
DNS
ドメイン名を数字の住所に変換する「インターネットの電話帳」
Firebase Hosting
サーバー・ドメイン・DNS・安全対策を全部おまかせできる「なんでもやってくれる管理会社」
普段使っているサービスの裏では、この4つが連携して動いています。難しい管理はクラウドにお任せ!
PDF を生成しています...

PC でご覧ください

このスライドはPC画面(横向き)での閲覧を推奨しています。