Vue3＋Firebaseでアプリをつくる①環境構築

## はじめに
前回書籍を片手にVueでTODOアプリを作成しました。

https://qiita.com/yorocovich/items/8e12fad0f6d89b480b5f

https://qiita.com/yorocovich/items/83e4a42dea2112c07768

今回は、バックエンドにFirebaseを使用してWebアプリケーションを構築していきます。
本記事では、環境構築に焦点を当て、以下の内容を扱います：

1. Vueプロジェクトの作成
2. Firebaseプロジェクトの作成
3. VueとFirebaseの連携
4. プロジェクトのビルドとデプロイ

## 0.開発環境
OS:Windows 11 Home 23H2
エディタ:VSCode
Node.js:v20.16.0
npm:10.8.1

## 1. Vueプロジェクトの作成
### 1-1. プロジェクトを作成したいフォルダに移動します
### 1-2. コマンドを実行してVueプロジェクトを作成します
```winbatch:Vueプロジェクトの作成
> npm create vue@latest
```
`vue@latest`でプロジェクトを作るのは公式で推奨されている[^1]ようですが、このブログを書いている現在ではほとんどサンプルがないです。でもどうせ勉強なんだからということでこのまま突き進みます。

### 1-3. Vueプロジェクトを作成する
プロジェクト名は`my-vue3-booklending`にしました。オプションは次の画像の通りです。
※ネット情報はJSが多かったので、TypeScriptは入れませんでした。Routerを使うのでYes、あとは前回と同じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/21751275-50f3-82ca-14ee-8597365da6c0.png)

### 1-4. プロジェクトフォルダに移動し、必要なパッケージをインストールします

```winbatch:firebaseのインストール
> cd my-vue3-booklending
> npm install 
> npm run format
> npm run dev
```

### 1-5. VITEで起動することを確認する

## 2.Firebaseプロジェクトの作成
### 2-1. Firebase公式サイトにアクセスしてFirebaseプロジェクトの作成を行う

https://firebase.google.com/?hl=ja

### 2-2. プランを選択する
今回は無料のSparkプランを使います。
これ以降の手順はSparkプランになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/ab945fec-4826-6c09-0931-c99819ed3972.png)

### 2-3. プロジェクトを作成する
今回は`my-firebase-booklending`でプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/a30d0fb0-c372-db0e-e79b-283e1b67f764.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/3e93bb4a-a866-f6fc-418e-c9f507031251.png)

Googleアナリティクスの設定については、とりあえず「あり」で設定しました。
※今後の実装で失念する可能性あり。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/1c6b6bba-1137-f325-7204-cb571a6d40dc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/9f65abe3-f6da-7248-a910-9b9b76b622c8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/65a2e40d-7d18-1f88-5a69-b3319cb5fbd5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/ff767d06-576c-f9f6-2012-12b30dd6d9fe.png)

プロジェクトができました。

### 2-4. ウェブアプリを作成する
ウェブアプリをクリックして機能を追加する。
アプリのニックネームは`booklending`で、Firebase Hostingも設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/a4099e6f-4847-d2f1-9f7d-f7db9a83cdee.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/8ea1e730-671a-1a4e-b245-21a07f649a32.png)

ここで表示される設定情報はアプリ側で設定するのでコピーしてどこかにおいておくことを推奨します。
※いつでもFirebaseコンソールから確認可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/7f0daa1d-fe43-a56b-f2b9-f3ecabef0f70.png)

## 3.VueとFirebaseの連携
### 3-1. 環境変数の設定
先ほどの設定を安全に管理するためにプロジェクトのルートディレクトリに.envファイルを作成して、Firebaseの設定情報を記入します。

```sh:(pj-root)/.env
VITE_API_KEY="Firebaseでアプリ登録したときのapiKey"
VITE_AUTH_DOMAIN="Firebaseでアプリ登録したときのauthDomain"
VITE_PROJECT_ID="Firebaseでアプリ登録したときのprojectId"
VITE_STORAGE_BUCKET="Firebaseでアプリ登録したときのstorageBucket"
VITE_MESSAGING_SENDER_ID="Firebaseでアプリ登録したときのmessagingSenderId"
VITE_APP_ID="Firebaseでアプリ登録したときのappId"
VITE_MEASUREMENT_ID="Firebaseでアプリ登録したときのmeasurementId"
```

:::note warn
Githubを使っている場合、API_KEYなどが公開されてしまわないよう.gitignoreにenvを追加する。

```sh:(pj-root)/.gitignoreに追加
# Environment
/.env
```
:::

### 3-2. Firebaseモジュールをインストールする
プロジェクトのルートディレクトリで以下のコマンドを実行してFirebaaseモジュールをインストールする。
```winbatch:Firebaseモジュールのインストール
> npm install firebase --save
```

### 3-3. Firebase初期化ファイルを作成する
scr直下にfirebaseフォルダを作成してinit.jsを作成します。

```js:(pj-root)/scr/firebase/init.js
import { initializeApp } from 'firebase/app'
import { getAnalytics } from 'firebase/analytics'

const firebaseConfig = {
  // envから取得
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
  measurementId: import.meta.env.VITE_MEASUREMENT_ID
}

// Initialize Firebase
const app = initializeApp(firebaseConfig)
const analytics = getAnalytics(app)

export { analytics }
```
先ほどの`.env`ファイルを読み込んでいます。

### 3-4. initファイルを読み込む
とりあえずmain.jsでinit.jsを読み込む
```js:(jp-root)/src/main.js
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './firebase/init' // 追加

const app = createApp(App)

app.use(router)

app.mount('#app')
```

## 4.プロジェクトのビルドとデプロイ
### 4-1.プロジェクトのビルド
プロジェクトのルートディレクトリで以下のコマンドを実行してビルドします。

```winbatch:プロジェクトのビルド
> npm run build
```

これにより、distディレクトリにビルドされたファイルが生成されます。

### 4-2. Firebase CLIのインストール
Firebase CLIをインストールして、ログインする。

```winbatch:Firebase CLIのインストール＆ログイン
> npm install -g firebase-tools

> rem Firebaseにログインする(Googleアカウント)
> firebase login
```

### 4-3. Firebaseプロジェクトを初期化する
```winbatch:Firebase 初期化
> firebase init
```

```winbatch:参考
     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

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

  (root-directory)\my-vue3-booklending

? Are you ready to proceed? Yes
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to
confirm your choices. Firestore: Configure security rules and indexes files for Firestore, Hosting: Configure
files for Firebase Hosting and (optionally) set up GitHub Action deploys

=== 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 an existing project
? Select a default Firebase project for this directory: my-firebase-booklending
i  Using project my-firebase-booklending

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? firestore.rules

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json

=== 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)? Yes
? Set up automatic builds and deploys with GitHub? No
+  Wrote public/index.html

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

+  Firebase initialization complete!
```

### 4-4. Hostingのリダイレクト先を設定する
firebase.jsonファイルを開き、以下のように設定を更新します:

```json:firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```
この設定により、distディレクトリがデプロイ対象となり、
ルートがindex.htmlにリダイレクトされます。

### 4-5. プロジェクトをデプロイする
```winbatch:
> firebase deploy
```

```winbatch:参考
=== Deploying to 'my-firebase-booklending'...

i  deploying firestore, hosting
i  firestore: reading indexes from firestore.indexes.json...
i  cloud.firestore: checking firestore.rules for compilation errors...
+  cloud.firestore: rules file firestore.rules compiled successfully
i  firestore: deploying indexes...
+  firestore: deployed indexes in firestore.indexes.json successfully for (default) database
i  firestore: latest version of firestore.rules already up to date, skipping upload...
i  hosting[my-firebase-booklending]: beginning deploy...
i  hosting[my-firebase-booklending]: found 6 files in dist
+  hosting[my-firebase-booklending]: file upload complete
+  firestore: released rules firestore.rules to cloud.firestore
i  hosting[my-firebase-booklending]: finalizing version...
+  hosting[my-firebase-booklending]: version finalized
i  hosting[my-firebase-booklending]: releasing new version...
+  hosting[my-firebase-booklending]: release complete

+  Deploy complete!
```

デプロイが完了したら、表示されたHosting URLにアクセスして、Vueの初期画面が表示されることを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/2215d436-ea86-4db0-f1f6-188ec75637d3.png)

これで環境構築は完了です。次回は、この環境を使ってアプリケーションの機能を実装していきます。

## おわりに
おわりに、というか免責事項に近いのですが・・・
VueもFirebaseもほぼ初めてなのでここまで構築するのに、正直プロジェクトを何度作り直してトライ＆エラーしたのかわかりません！
なので、この通り進めて「できひんやんけ！」となった場合は、あきらめてトライ＆エラーを楽しみましょう！

[^1]:https://ja.vuejs.org/guide/quick-start#creating-a-vue-application