Firebase Hostingでの新しいサイトの追加からデプロイまで

前提

1. ローカル端末にFirebase CLIをインストール

# npm の場合
> npm install -g firebase-tools

# yarn の場合
> yarn add -g firebase-tools

2. Firebaseでサイトを追加

  1. Firebaseコンソールにアクセスし、該当のプロジェクトをクリック。
  2. ナビゲーションメニュー構築 ＞ Hosting の順に進み、ダッシュボードタブ内の右上にある別のサイトを追加ボタンをクリック。

  3. 「サイトを追加」モーダルのサイト欄に任意のサイト名(6文字以上)を入力し、サイトの追加ボタンをクリック。
  4. 3.で作成したサイトのカードの表示 →ボタンをクリックし、サイトの管理画面にアクセスする。

プロジェクトファイルをCloud Repositoriesから取得

※予めGCP Cloud Source Repositoriesの初期設定を実施してください！

> git clone ssh://<tc各自メールアドレス>@source.developers.google.com:2022/p/tc-common/r/tc-liff-nuxt-app
> cd tc-liff-nuxt-app

# npm の場合
> npm install

# yarn の場合
> yarn install

CLIでFirebase初期設定

# Firebaseにログイン
# (TCアカウントでログインしてください)
> firebase login:ci

# プロジェクト初期化
> firebase init

# 初期化を続けるか聞かれるので[Enter]で進める。
? Are you ready to proceed? (Y/n) Y

# ホスティングのみ選択(Spaceキー)し[Enter]
? Which Firebase features do you want to set up for this directory? ～
 ( ) Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
 ( ) Firestore: Configure security rules and indexes files for Firestore
 ( ) Functions: Configure a Cloud Functions directory and its files
>(*) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ( ) Hosting: Set up GitHub Action deploys
 ( ) Storage: Configure a security rules file for Cloud Storage
 ( ) Emulators: Set up local emulators for Firebase products

# プロジェクトをどうするか聞かれるので、既存のプロジェクトを使用するで[Enter]
? Please select an option: (Use arrow keys)
> Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

# どのプロジェクトを使用するか聞かれるので、`tc-common`で[Enter]
? Select a default Firebase project for this directory: (Use arrow keys)
> tc-common (tc-common)

# 公開するディレクトリをどこにするか聞かれるので、`dist`を入力して[Enter]
? What do you want to use as your public directory? (public) dist

# SPAとして構成するか聞かれるので[Enter]
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) N

# GitHubを使って自動Build & Deployするか聞かれるので[Enter]
? Set up automatic builds and deploys with GitHub? (y/N) N

この時点で.firebasercとfirebase.jsonが生成されたことを確認。

デプロイ先のターゲットを設定

1. プロジェクト設定

> firebase target:apply hosting <target-name> <resource-name>
パラメータ値
target-name任意の値
わかりやすいのであれば割と本気で何でも大丈夫
resource-name「Firebaseでサイトを追加」の3.でサイトに設定したサイト名

2. ホスティング設定

hostingにtargetを追記する。

{
  "hosting": {
    "target": "<1.で指定したターゲット名>",
    "public": "dist",
    "ignore": [
        ...
    ]
  }
}

デプロイ

# npm の場合
> npm run generate

# yarn の場合
> yarn generate

# Firebaseへデプロイ
> firebase deploy

ちなみに…

package.jsonに以下を追記し

{
  ～ 略 ～
  "scripts": {
    ～ 略 ～
    "deploy": "yarn generate && firebase deploy --only hosting"
  }
}

以下のコマンドを実行することで

# npm の場合
> npm run deploy

# yarn の場合
> yarn deploy

ジェネレートからデプロイまで一気にできるようにしてます！

スポンサーリンク

コメント