XEROTTA

新入社員の学び / Google Cloud初級者 / 講座9

GOOGLE CLOUD BASICS / COURSE 09

ローカル環境で動作を確認する

publicフォルダーと設定ファイルを区別し、公開前にlocalhostで動作確認できる。

アニメと具体例手順付き演習成果物とレビュー進捗保存・完了チェック

まずは、図でつかもう

1 / 4

矢印を追い、各ポイントを押して確認しましょう。

01 / GOOGLE CLOUD BASICS

学習目標と所要時間

publicフォルダーと設定ファイルを区別し、公開前にlocalhostで動作確認できる。

第9章 / 全14章目安 75分（説明・演習・確認）

前提：前章までのファイルと学習記録を用意します。

この教材は受講者本人が操作するための教育ページです。契約・課金変更・外部連携・リソース作成は自動実行しません。外部手順は条件を理解した受講者本人が実施します。
ローカル環境で動作を確認するの学習内容を表した仕組みのイメージ図

02 / GOOGLE CLOUD BASICS

説明：仕組みと具体例

この章の考え方

詳しく見る

ローカルは自分のPC上、localhost（127.0.0.1）はそのPC自身を指します。ローカル確認はインターネット公開ではありません。Firebase Hostingエミュレーターは公開時に近い配信を手元で試す道具です。この課題はHostingのみで、Javaを必要とする他のエミュレーターは追加しません。

具体的な仕組み

詳しく見る

配布ZIPのfirebase-siteを作業ルートにします。その直下にfirebase.json、public/index.html、public/styles.css、public/assets/cafe.svgがあります。publicは公開してよいファイルだけを置く場所です。設定のpublic:"public"とフォルダー名を合わせ、作業ルート全体を公開対象にしません。

使うときの判断

詳しく見る

初期化はfirebase init hostingで行えます。既存の専用プロジェクトを選び、publicディレクトリはpublic、SPAはNo、自動GitHub公開はNo、index.htmlの上書きはNoとします。SPAは画面遷移をJavaScript側で扱う構成で、この静的課題では使いません。配布のfirebase.jsonと照合し、設定ができたらHostingだけを起動します。

構成と権限

詳しく見る

コマンドは毎回すべてを実行するのではなく、OSに合う移動例を1つ選びます。ZIPの展開で親フォルダーが増えた場合は実際の場所へ変更します。成功時は一覧にfirebase.jsonとpublicが見えます。No such file／パスが存在しない場合はFinder・エクスプローラーで展開先を確認し、まだfirebase initやdeployは実行しません。

03 / GOOGLE CLOUD BASICS

場面で学ぶ：ローカル環境で動作を確認する

場面を順に追う解説アニメです。初期状態は停止しています。「次の場面」でゆっくり読むか、自動再生を選べます。動きを減らすOS設定では手動で進めます。

学ぶこと
仕組み
実践の手順
振り返り
場面

04 / GOOGLE CLOUD BASICS

操作手順：一つずつ確かめる

  1. ZIP内firebase-siteをエディターで開き、ターミナルの場所も同じにする。WindowsはGet-LocationとGet-ChildItem、macOSはpwdとlsでfirebase.jsonのある場所か確認する。
  2. firebase init hostingを1度実行する。プロジェクト一覧で専用IDを選び、上記の回答を選ぶ。既存ファイルを上書きしない。
  3. firebase.jsonを下の全文と比較し、publicとemulatorsのhost・portを確認する。
  4. firebase emulators:start --only hostingを実行する。起動ログのHostingのURLを開き、127.0.0.1:5000で確認する。
  5. 画像・メニュー・狭い幅・存在しないURLの404を確認し、ターミナルでCtrl+Cを押して停止する。

Windows PowerShell：ZIPをダウンロードフォルダー直下へ展開した場合の移動例。実際の場所が違えば変更

Set-Location "$HOME\Downloads\google-cloud-basics-sample\firebase-site"
Get-Location
Get-ChildItem

macOSターミナル：同じ展開先の場合。実際の場所が違えば変更

cd "$HOME/Downloads/google-cloud-basics-sample/firebase-site"
pwd
ls

firebase-site直下：firebase.json全文

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {"source": "**/*.html", "headers": [{"key": "Cache-Control", "value": "no-cache"}]},
      {"source": "**/*.css", "headers": [{"key": "Cache-Control", "value": "max-age=300"}]}
    ]
  },
  "emulators": {"hosting": {"host": "127.0.0.1", "port": 5000}}
}

同じ場所：初期化とローカル配信

firebase init hosting
firebase emulators:start --only hosting

05 / GOOGLE CLOUD BASICS

演習：自分で変え、結果を残す

画像を一度だけ間違った名前で参照し、開発者ツールに404が出ることを確認して修正する。公開前点検表に結果を残す。

提出するもの

対象と目的／使用環境／変更した内容／期待した結果／実際の結果／失敗時に確かめたこと／まだ未実施のことを記録してください。スクリーンショットに認証情報や請求の個人情報を含めません。

07 / GOOGLE CLOUD BASICS

完了チェックと学習記録

説明できたこと、実際に確認したことだけをチェックします。学習進捗と下のメモは、このブラウザーのローカルストレージへ保存し、外部送信しません。別端末とは同期せず、サイトデータ削除・プライベートモード・保存禁止では保持できない場合があります。秘密情報は記入しないでください。

08 / GOOGLE CLOUD BASICS

よくある失敗と対処

  • Port5000が使用中：他の自分の開発サーバーを停止するか、設定を5001へ変更してログのURLを開く。
  • 初期化で上書きした：バックアップか配布ZIPのindex.htmlへ戻す。

09 / GOOGLE CLOUD BASICS

確認日と公式資料

公式情報の確認日：2026年10月25日（日本時間）。画面・上限・契約条件は変わるため、実行前にも公式資料と自分の契約を確認してください。ログや画面の例は説明用で、実環境の操作結果ではありません。

講師向け：事前準備・つまずき・評価基準 →