vue-cliでfirebaseを使う話

# はじめに
個人開発するにあたってvue-cliでなんか作ろうと思いまして。
バックエンドの環境作るのが面倒だったので、そのあたりはfirebaseに丸投げしてフロントエンドの開発に注力しようと思いました。
なので、vue-cliのプロジェクトでfirebaseを使えるように設定しました。

## 開発環境とバージョン
windows 10 
@vue/cli 4.5.15
firebase 9.22.0

### firebaseのプロジェクトを作成する
①firebaseに [ログイン](https://firebase.google.com/?hl=ja)してください。
②`プロジェクトを追加`を選択します。画面の表示に従ってプロジェクト名をつけて続行します。私は今回は'simply'という名前にしてます。
③'このプロジェクトでGoogleアナリティクスを有効にする'は有効にして続行します。
④`アカウントを選択`では`Default Account for Firebase`を選択してプロジェクトを作成します。

## Firebase Hostingを設定
### firebaseのインストール
Firebaseの`構築`の中の`Hosting`を選択し、`始める`を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/e8328c0f-db64-4089-b06b-f9b03159cba9.png)
Firebase CLIをインストールする必要があるので、コマンドプロンプトを起動して以下のコマンドを入力します。

```
npm install -g firebase-tools
```

インストールが完了したら、`次へ`を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/6d99958a-f89f-fd2c-b42a-6d41303458ea.png)
### プロジェクトの初期化
プロジェクトの初期化を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/69e7105d-716e-23c7-280b-35ec6b798050.png)
[こちら](https://qiita.com/kyrice2525/items/4b6405c1d4028aa98944)の記事で`simply`というvueプロジェクトを作っているので、こちらのディレクトリに移動します。なお、`simply`は`workspace`というフォルダ内に作っています。

```
cd workspace
cd simply
```

移動したら以下のコマンドを入力します。

```
firebase login
```

以下のような画面が出ます。firebaseの改善のために、エラーが出たときにエラー情報を送っていいですか？って聞かれてるので、`Yes`とします。

```
Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

Allow Firebase to collect CLI usage and error reporting information? (Y/n)
```

ページが開いてfirebaseにログインするように指示されるので、ログインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/b012c904-072e-fcc5-3e45-f6377d5bd5f5.png)

以下の画面が表示されるので、下にスクロールして`許可`を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/8dc2958b-29eb-0227-0e8d-41f1002af4b4.png)
成功したら以下の画面が表示されるので、ウィンドウを閉じてfirebaseの画面に戻ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/6ea110bb-9093-5b92-dd9e-963b5da3f33a.png)


先にbuildします。以下のコマンドを`simply`ディレクトリ内で入力すると`dist`というディレクトリが作られます。

```
npm run build
```

こちらのdistを後で使います。

続いて、コマンドプロンプトに以下のコマンドを入力します。

```
firebase init
```

`simply`というディレクトリでfirebaseプロジェクトを初期化するがいいか？と聞かれるので、`Yes`とします。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/87c6c251-ec03-9d6d-319b-8d146d083caf.png)
このディレクトリにどのfirebaseの機能を設定するか？を聞かれるので、`hosting: configure files for firebase hosting and (optionally) set up github action deploy.`にカーソルを合わせてスペースを押し、エンターを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/886247ae-066c-ca61-d96a-572012c105ae.png)
ここでは`Use an existing project(既存のプロジェクトを使う)`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/24d61aba-9ba4-a517-caa0-faabef75594f.png)
既存のプロジェクトが表示されるので、`simply`を選択します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/f58ffc45-a3d6-3593-5489-221485d00bb6.png)
ここで先ほどbuildして作られた`dist`を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/e0aa3fdb-195c-e6e1-4e88-f0975efec847.png)

シングルページアプリケーションとして構成するかを問われるので、`N`とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/ceffa185-691b-4052-a105-963c108f69c2.png)
「GitHubで自動ビルドとデプロイを設定しますか？」と問われるので、`y`とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/19bcc6d7-66e1-28be-7ea1-ae629c831208.png)
「ファイルpublic / index.htmlはすでに存在します。 上書きしますか？」と問われるので、`N`とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/e6a5bade-5e11-28e4-4141-ea533b0e6665.png)
`GitHub`のwebが立ち上がって`Authorize Firebase CLI`と聞かれるので、`Authorize Firebase`を選択します。
`どのGitHubリポジトリにGitHubワークフローを設定しますか？ `と聞かれるので、`ユーザー名/リポジトリ名`を入力します。今回はsimplyに設定するので、`ユーザー名/simply`とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/61a6d765-71dd-88df-296f-ff1e7d82a19d.png)
`すべてのデプロイの前にビルドスクリプトを実行するようにワークフローを設定しますか？`と聞かれるので、`y`とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/6f2fa92a-a33d-2ecc-4925-b6f4b24b4963.png)
`すべてのデプロイの前にどのスクリプトを実行する必要がありますか？`と聞かれるので、画面に表示されている通り`npm ci && npm run build`を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/9117d204-2c82-72e8-0235-e6992a849dd4.png)
`PRがマージされたときに、サイトのライブチャネルへの自動展開を設定しますか？`と聞かれるので、`y`としておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/2d8834d6-2bc4-20d3-ebca-089ce7cdb72b.png)
`サイトのライブチャネルに関連付けられているGitHubブランチの名前は何ですか？`と聞かれるので、`master`としておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/2e870b6f-5e6e-2f79-5af0-bc90277a0cd8.png)
成功しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/163a2247-8d30-ecab-bdf7-bd05dc8d645f.png)



続いて、forebase Hostingへのデプロイを行います。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/0026146f-6c87-f324-b770-1234a5123129.png)
以下のコマンドをコマンドプロンプトに入力します。`simply`ディレクトリ内で行います。

```
firebase deploy
```

以下の画面が表示されたらデプロイ成功です。`Hosting URL`を開いてみましょう。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/a75ce58b-fb2c-490f-17b5-ade4dbb1e345.png)
vueの画面が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102063/6638c5ee-5997-8b24-6c38-f55f2b6c21ab.png)