技術メモ

習得したIT技術の備忘録

【Firebase】Hostingにデプロイする方法

Firebase 開発環境 Nuxt.js

FirebaseのHostingにデプロイする方法を紹介します。

１．事前準備

(1)Firebaseにログイン

①firebaseにアクセスする
firebase.google.com

②「使ってみる」を押下する
firebaseトップページ

③googleアカウントでログインする
googleログイン画面
Firebaseにログイン完了です
firebaseログイン後トップページ

(2)Firebaseにプロジェクトを作成

①「プロジェクトを作成」を押下する

firebaseログイン後トップページ

②プロジェクト名を入力する
プロジェクト名入力画面

③「続行」を押下する
googleアナリティクス同意画面

④「プロジェクトを作成」を押下する
googleアナリティクス構成画面
プロジェクトが作成されます
プロジェクト作成完了

２．Firebase Hostingにデプロイする

(1)Firebase CLI*1 をインストールする

　npm から Firebase CLI をインストールするには、次のコマンドを実行します。

　npm install -g firebase-tools

　※Node.js v8.0.0 以降が必要です

(2)Firebase CLI にログインする

ログインするには、次のコマンドを実行します。

firebase login

成功すると以下の表示になります。

firebase login
Already logged in as XXXXXXXX(ログインしたアカウント)@gmail.com

(3)Firebase プロジェクトを初期化する

プロジェクトを初期化するには、アプリのディレクトリ内から次のコマンドを実行します。

firebase init

(4)公開ルート ディレクトリを指定する

firebase.json の以下を修正する

  "hosting": {
    "public": "public",  ⇒　"(公開したいディレクトリ)"

(5)サイトにデプロイする

ローカル プロジェクト ディレクトリのルートから次のコマンドを実行します。

firebase deploy

デプロイに成功すると以下の内容が表示されます。

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/XXXX(プロジェクト名)/overview
Hosting URL: https://XXXX(プロジェクト名).web.app

Hosting URLにアクセスすると公開された内容を確認できます。

参考サイト

Firebase Hosting を使ってみる

firebasehostingを使いnuxt SPAをデプロイするまで（firebase-toolsフルセット）。 - Qiita

*1:Firebase プロジェクトの管理、表示、デプロイを行うさまざまなツールを提供します