Firebase Hosting は、アプリの静的アセット (HTML、CSS、JavaScript、メディア ファイルなど) をホストするだけでなく、動的コンテンツを提供し、マイクロサービスをホストするための高速、安全、かつ信頼性の高い方法を提供します。
当社のプロダクション グレードのホスティングは、グローバルなコンテンツ配信ネットワーク (CDN) によって支えられています。 Hosting はデフォルトで SSL 経由でコンテンツを提供し、独自のカスタム ドメインまたはプロジェクトのサブドメインでweb.app
およびfirebaseapp.com
で無料で使用できます。
あなたが始める前に
Firebase Hosting をセットアップする前に、Firebase プロジェクトを作成する必要があります。
ステップ 1 : Firebase CLI をインストールする
CLIのインストール方法または最新バージョンへの更新方法については、Firebase CLI のドキュメントを参照してください。
ステップ 2 : プロジェクトを初期化する
ローカル プロジェクト ファイルを Firebase プロジェクトに接続するには、ローカル プロジェクト ディレクトリのルートから次のコマンドを実行します。
firebase init hosting
プロジェクトの初期化中に、Firebase CLI プロンプトから:
ローカル プロジェクト ディレクトリに接続する Firebase プロジェクトを選択します。
選択した Firebase プロジェクトは、ローカル プロジェクト ディレクトリの「デフォルト」の Firebase プロジェクトです。追加の Firebase プロジェクトをローカル プロジェクト ディレクトリに接続するには、プロジェクト エイリアスを設定します。
パブリック ルート ディレクトリとして使用するディレクトリを指定します。
このディレクトリには、
index.html
ファイルや、Firebase Hosting にデプロイするその他のアセットなど、公開されているすべての静的ファイルが含まれています。public ルート ディレクトリのデフォルトは
public
です。ここでパブリック ルート ディレクトリを指定することも、後で
firebase.json
構成ファイルで指定することもできます。デフォルトを選択し、
public
というディレクトリがまだない場合は、Firebase によって作成されます。
パブリック ルート ディレクトリに有効な
index.html
ファイルまたは404.html
ファイルがまだない場合は、Firebase によって作成されます。
サイトの構成を選択します。
1 ページのアプリを作成することを選択した場合、Firebase は自動的に書き換え構成を追加します。
初期化の最後に、Firebase は自動的に 2 つのファイルを作成し、ローカル アプリ ディレクトリのルートに追加します。
プロジェクト構成をリストする
firebase.json
構成ファイル。このファイルの詳細については、ホスティング動作の構成ページをご覧ください。プロジェクト エイリアスを格納する
.firebaserc
ファイル。
ステップ 3 : サイトにデプロイする
サイトにデプロイするには、ローカル プロジェクト ディレクトリのルートから次のコマンドを実行します。
firebase deploy --only hosting
このコマンドは、Hosting のコンテンツと構成を、Firebase でプロビジョニングされた次のサブドメインにデプロイします。
-
PROJECT_ID .web.app
-
PROJECT_ID .firebaseapp.com
サイトの展開とローカルでのテストの詳細については、こちらをご覧ください。
次のステップ
これで、あなたのサイトを世界と共有する準備が整いました!
あなたのサイトを改善し続けてください。ローカルでテストし、一時的なプレビュー URL で変更を共有してから、実際のサイトにデプロイします。このステップバイステップ ガイドに従ってください。
さらなるホスティング機能について学びます。
Firebase CLIの完全なドキュメントをご覧ください。
アプリを起動する準備をします。
- Google Cloud Console でプロジェクトの予算アラートを設定します。
- Firebase コンソールで使用状況と請求のダッシュボードを監視して、複数の Firebase サービスにわたるプロジェクトの使用状況の全体像を把握します。より詳細な使用状況については、ホスティング使用状況ダッシュボードにアクセスすることもできます。
- Firebase の起動チェックリストを確認します。