VueアプリをFirebaseに爆速デプロイ!

## まえがき

筆者はエンジニアの卵で、読者も同じような境遇の方を想定していますが、「Firebaseって何」「Vue.jsって何」くらいは知っているものとして書いています。

つよつよエンジニアの方々、説明不足な点・間違っている点などありましたらコメントいただけると光栄です。



## ゴール

Vue CLIでつくったWEBアプリ（SPA）を`firebase deploy`でデプロイし、Hostingできていることを確認すること



## 環境

- Windows
- Node.js (12.18.4)
- npm (6.14.6)
- Vue CLI (2.9.6)
- Firebase CLI (8.11.2)



## もろもろインストール

#### Node.jsインストール

[Node.jsの公式サイト](https://nodejs.org/ja/)からインストールします。基本的にインストーラに従ってポチポチしていればOK

インストール完了後、任意のディレクトリで以下のコマンドを入力し、バージョンが出力が確認できればクリア

```バージョン確認
node --version
```

先程Node.jsのサイトで選択したバージョンが表示されているはず

```出力
v12.18.4
```



npmはNode.jsと一緒にインストールされているはずなのでこちらも確認

```バージョン確認
npm --version
```

```出力
6.14.6
```

「npm is 何」という方、[しまぶーのIT大学](https://www.youtube.com/c/shimabu_it/featured)というYouTubeチャンネルで概念的な解説がされているのでよきです。使い方はやりながら覚えればいいと思います。



#### Vue CLIインストール

Vue CLIは、Vueで書いたコードをブラウザが読めるようにする（「ビルド」とか言ったりする）など、Vueでアプリ開発するのに必要なコマンドラインツール。

npmでグローバルインストールします。

```任意のディレクトリで実行
npm install -g vue-cli
```

インストール確認。バージョンが出力されていることを確認出来たら成功。

自分がやったときは何故かPathが通っておらず、手動でPATHを設定しました。npmでグローバルインストールされたコマンドのありかは、自分は`C:\Users\HOGEHOGE\AppData\Roaming\npm`でした。

```
vue --version
2.9.6
```



#### Firebase CLIをインストール

firebaseにデプロイしたり、ローカルでサーバ立てたりするのに使います。

```任意のディレクトリで実行
npm install -g firebase-tools
```

インストール確認。

```
firebase --version
8.11.2
```



## Vueでプロジェクト作成

プロジェクトを作成したいディレクトリへ移動。以下のコマンドを実行すると、カレントディレクトリに「XXXXX」というプロジェクトディレクトリができます。

```XXXXXは任意のプロジェクト名
vue init webpack XXXXX
```

コマンドを実行するとアプリの設定に関していろいろ聞かれます。以下、サンプルです。

```
? Project name projectx
? Project description huge project
? Author mail@example.com
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
```

プロジェクトの作成が成功すれば、以下の表示があるはず

```
# Project initialization finished!
# ========================

To get started:

  cd XXXXX
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack
```

指示通り `XXXXX`へ移動して、`npm run dev`を実行するとローカルサーバが立ち上がるはずです。[https://localhost:8080](https://localhost:8080) にアクセスして以下の画面が立ち上がればOK。デフォルトでのポートは`8080`になっていますが、`config/index.js`で変更することができます。

![image-20200929233950387.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486031/c19dc921-0c77-9b3d-9d70-396374bcf6ff.png)


## ビルドする

`dist`を作るためにいったんビルドします。プロジェクトディレクトリ内で以下のコマンドを実行。

```
npm run build
```

ビルドがうまくいっていれば`dist`というフォルダができているはず。こいつをFirebaseにホスティングすることになります。



## Firebaseプロジェクトを作成

[Firebaseコンソール](https://console.firebase.google.com/)から新規プロジェクトを作成します。

コンソールのトップ画面の`+アプリを追加`→ウェブでプロジェクトにアプリを作成します。

Hostingを利用するので「Hostingの設定もします。」にチェック。

![image-20200930011624727.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486031/86f2ee63-82d7-f543-27e4-1cd48dbc9cca.png)




これはコピってプロジェクトのルートディレクトリに配置されている`index.html`の`<head>`内に貼り付けてください。

![image-20200930011801408.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486031/c9848038-3733-8c1f-2e4d-9307ac25e583.png)




③の「Firebase CLIのインストール」、④の「Firebase Hostingへのデプロイ」はスキップしてOK





プロジェクトディレクトリ内で以下のコマンドを実行。

```
firebase init
```

こちらでもいろいろ聞かれます。Hostingを選択。FirestoreとかFunctionsを使う場合はここでもチェックを入れます。

(ニョロボンかわいいでしょ)

![image-20200930010645548.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486031/906ae5f4-a7d4-089a-a210-eb885d75d06d.png)




「Use an existing project」を選択→先ほどFirebaseコンソールで作成したプロジェクトを選択。

![image-20200930012359976.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486031/dc752b04-a5fd-c80e-8078-a35bdd73e81a.png)




Hostingのセットアップが始まります。デプロイコマンド（`firebase deploy`）を実行したとき、ホスティングされるディレクトリを指定する。先ほどビルドを行ったときにできた`dist`がこれに該当。`dist`と入力。

![image-20200930012609132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486031/f84d48c5-ce2b-3dbc-06bc-dad534740295.png)


あとはこんな感じで答えてもらえればOK


![image-20200930012913058.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486031/f10f26f1-8c02-495c-bb50-bd332269732e.png)


これでfirebaseの設定はできているはず！さっき`<head>`に変更が加わったのでもう一度ビルドを行って、

```
npm run build
```

ローカルでサーバを立てます。[http://localhost:5000/](http://localhost:5000/)にアクセスすると、さっき見たVueのWelcomeのページが表示されているはず。

```
firebase serve
```

いちおう動作確認のために`firebase serve`をしましたが、こちらは`dist`をホスティングしているに過ぎないので、ホットリロードは使えません。基本的に`npm run dev`のほうを使って開発を行うのが便利だと思います。



それではいよいよデプロイします。プロジェクトディレクトリのルートで以下のコマンドを実行するだけでデプロイできちゃいます。

```
firebase deploy
```

```
=== Deploying to 'XXXXX'...

i  deploying hosting
i  hosting[XXXXX]: beginning deploy...
i  hosting[XXXXX]: found 9 files in dist
+  hosting[XXXXX]: file upload complete
i  hosting[XXXXX]: finalizing version...
+  hosting[XXXXX]: version finalized
i  hosting[XXXXX]: releasing new version...
+  hosting[XXXXX]: release complete

+  Deploy complete!

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

`Hosting URL: https://XXXXX.web.app`で示されているところにホスティングができているはずです！