FIrebase Hosting入門: 静的コンテンツをデプロイするだけ

Firebase Hostingを使いました。
私のフロントエンド勉強がてら、静的コンテンツをDeployしただけです。認証やDB等は使っていません。

# 手順
## 1. プロジェクト作成
下記URLからFirebaseのプロジェクト作成。

https://console.firebase.google.com/u/0/

### 1.1. プロジェクト作成
「プロジェクトを作成」ボタンクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/acad4f64-d98a-53d5-fe9d-f396052c28c4.png)

### 1.2. プロジェクト名定義
プロジェクト名を入力して「続行」クリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/6daceb71-24e3-ac51-9e67-f97c824a67ac.png)

### 1.3. Google Analytics除外
「このプロジェクトでGoogleアナリティクスを有効にする」をOFFにして「プロジェクトを作成」ボタンクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/89504596-01ea-5c55-803b-4fc34877776a.png)

## 2. FirebaseWebアプリ追加
Webアイコン`</>`をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/3b1116fa-6acf-1dfe-93f0-5b6bf5939b0a.png)

「アプリのニックネーム」を入力して「このアプリのFirebase Hostingも設定します。」をONにして「アプリを登録」ボタンクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/590b85f2-adf0-715b-c02e-554e032b54ed.png)

## 3. Node.js関連
以下の環境を構築(Node.jsやnpmは事前インストール済)。

|種類|Version|備考|
|:-:|:-:|:--|
|node|16.17.0|nvmで管理|
|npm|8.18.0||
|firebase-tools|11.8.0|global|
|firebase|9.9.3|local|

### 3.1. Firebase SDKインストール
ターミナルからディレクトリを対象に移動して`npm install firebase`でインストール。

```shell
# 対象のディレクトリで実行
npm install firebase
```

### 3.2. Firebase CLIインストール
ターミナルからFirebase CLIを`npm install -g firebase-tools`でインストール。

```shell
# 対象のディレクトリで実行
npm install -g firebase-tools
```

## 4. Firebase設定
### 4.1. Firebaseログイン
ターミナルからFirebaseログイン。

```shell
firebase login
```

### 4.2. 初期化
#### 4.2.1. 初期化
Firebase初期化。

```shell
firebase init
```

#### 4.2.2. 機能選択
`firebase init`すると以下のプロンプトを聞かれます。
スペースで対象を選択してEnter。今回は以下の2つを選択。

- Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
- Emulators: Set up local emulators for Firebase products

```shell

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/<path>

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deplo
ys, 
Emulators: Set up local emulators for Firebase products
```

### 4.2.3. Project Setup
続けてProject Setupについて聞かれます。
`?` から始まる行がプロンプトで `>`を選択。今回は、既存プロジェクトを使用し、プロジェクト名を選択。

```shell
=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? 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 

? Select a default Firebase project for this directory: (Use arrow keys)
❯ test-20220823 (test-20220823) 
```

### 4.2.4. Hosting Setup 
`public`ディレクトリを公開。自動で`public`フォルダと`404.html`と`index.html`が作成されました。
(Node．js開発詳しくないのでわからないのですが)普通は先に作っておくのかもしれません。
`?` から始まる行がプロンプトで、行末に入力した内容があります。

```shell
=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

 What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) N
? Set up automatic builds and deploys with GitHub? No
✔  Wrote public/404.html
✔  Wrote public/index.html
```


### 4.2.5. Emulators Setup
Emulateorが何をしてくれるか知らないままセットアップしました。多分ローカルでテストできるツールのことかと思います。
`?` から始まる行がプロンプトで、行末に入力した内容があります。

```shell
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. Hosting Emulator
? Which port do you want to use for the hosting emulator? 5000
? Would you like to enable the Emulator UI? Yes
? Which port do you want to use for the Emulator UI (leave empty to use any available port)? 
? Would you like to download the emulators now? Yes
i  ui: downloading ui-v1.9.0.zip...

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!
```

## 5. ローカルテスト
`public`フォルダにHTMLなどWebコンテンツを移動し、以下のコマンドでローカルテスト。

```shell
firebase serve --only hosting

⚠  hosting: Port 5000 is not available. Trying another port...
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5005
```

ブラウザで http://localhost:5005 からアクセスできます。

## 6. Deploy
以下のコマンドでクラウドへDeployします。

```shell
firebaswe deploy

=== Deploying to 'test-20220823'...

i  deploying hosting
i  hosting[test-20220823]: beginning deploy...
i  hosting[test-20220823]: found 27 files in public
✔  hosting[test-20220823]: file upload complete
i  hosting[test-20220823]: finalizing version...
✔  hosting[test-20220823]: version finalized
i  hosting[test-20220823]: releasing new version...
✔  hosting[test-20220823]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/test-20220823/overview
Hosting URL: https://test-20220823.web.app
```

デプロイが成功し、https://test-20220823.web.app からアクセスができます。

## 7. 削除(Option)
削除は以下のコマンド。サイト名は今回の例だと`test-20220823`。このあとにConsoleから削除ができるようです。
私はよくわからず、Projectごと削除しましたが、まだWebページが生きていました(時間が経てば死ぬ？)。

```shell
firebase hosting:disable <サイト名>
```

参考。

https://stackoverflow.com/questions/42591099/how-do-i-remove-a-hosted-site-from-firebase