firebaseにSPAをホスティング＆無料ドメインを使用して公開する[vue.js,nuxt.js] (1/2) firebaseへのデプロイ

# 概要
　vue.jsまたはNuxt.jsで作成したSPAをfirebaseにホスティングして無料ドメインで公開するまでの手順と忘備録。まずはfirebaseにWebサイトをホスティングするまでを記載。

2019/05/08　[続きを作成しました。](https://qiita.com/nobu17/items/a671f6ffcd00eb8a137f)

# 前提
- Vue.jsまたはNuxt.jsで作成したSPAを使用。(試していないが、他のSPAフレームワークでもほぼ同じとは思われる。)
- Googleアカウントを取得済み。
- OSはWindows10(64bit)を使用。(ただしOSに依存するような箇所はほぼ無しと思われる。)
- node.js及びnpmはインストール済み。

# 手順
## 1.1.firebase環境セットアップ

[firebaseウェブサイト](https://firebase.google.com/)にアクセスして、使ってみるを選択。
(未ログインの場合は予め画面右上のアイコンからGoogleアカウントでログインする。)
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149198/bb6196ac-8e5c-efe6-67f6-59b00deb8ca5.png)

プロジェクトを追加を選択。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149198/c54c97be-5657-9055-e213-4c39196ad2a5.png)

プロジェクトの設定ダイアログが表示されるの下記を入力。
1. プロジェクト名
　　→任意の名称を入力
2. アナリティクスの地域
　　→日本を選択
3. ClodFirestoreのロケーション
   →asia-northeast1を選択 (Tokyo)
4. 各種確認項目にチェック

![3_min.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149198/b9bcafbe-5b15-5c2b-a7b4-ba683b14e84a.png)

最後にプロジェクトを作成ボタンを押下。
暫くして、下記のような完了画面が表示されればfirebaseプロジェクトの作成は完了です。
![4_min.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149198/2bb594a2-b830-a4e0-74a3-2f6e9596afd3.png)


## 1.2.firebase-toolsインストール

※下記操作はすべてコマンドプロンプトからの実行

firebaseの各種操作を行うためのツールをnpmでインストール。


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

インストールが終わったら、firebaseアカウントへのログインを行う。
ブラウザが表示されるので、googleアカウントでログインする。
なお、ログイン前に初回はエラーレポート等の送信確認同意が表示されるので、どちらかお好みで選択する。

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


ログインに成功すれば下記のような画面が表示されるので、ブラウザを閉じる。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149198/201b424a-3211-d58a-8de9-1d4052f33253.png)

以上で、firebaseを使うための準備が整ったので、次項からfirebaseに実際にデプロイするための設定を行う。

## 1.3.Webサイトのホスティング初期化設定

※下記操作はすべてコマンドプロンプトからの実行

カレントディレクトリを作成したVue.jsまたはNuxt.jsのアプリのルートに移動して下記コマンドを実行。

```
firebase init hosting
```

カレントディレクトリで初期化していいか聞かれるのでyと入力。

```

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

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

  (※カレントディレクトリがここに表示)

Before we get started, keep in mind:

  * You are currently outside your home directory

? Are you ready to proceed? (y/n)

```


プロジェクトの選択では、新規作成ではなく1.1.で作成したプロジェクトを選択する。

```
=== 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.

? Select a default Firebase project for this directory: 
i  Using project (※作成したプロジェクト名)

```

デプロイするディレクトリを聞かれるのでVueまたはNuxtでビルドして作成したhtmlファイルの出力先フォルダを指定します。
通常はdistフォルダとなるので
dist
と入力。

```
=== 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?
```


SPAとして公開するか聞かれるのでyと入力。
(Nuxt.jsの場合、nuxt.config.jsを開いてあらかじめ mode: ‘spa’,となっていることを確認すること。)

```
? Configure as a single-page app (rewrite all urls to /index.html)?
```

index.htmlを上書きするか聞かれるのでnと入力して上書きをしない。

```
? File dist/index.html already exists. Overwrite?
```

下記のような完了メッセージが表示されれば設定は終了。

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

+  Firebase initialization complete!
```

次項で実際にデプロイを行う。

## 1.4.Webサイトのデプロイ

1.3.のカレントディレクトリの状態のまま下記のコマンドを実行。

```
firebase deploy
```

デプロイが始まるので暫く待つ。
Deploy complete!と表示されたら成功。
Hosting URLに実際にブラウザでアクセスして、表示されるかを確認する。

```
=== Deploying to '(※プロジェクト名)'...

i  deploying hosting
i  hosting[(※プロジェクト名)]: beginning deploy...
i  hosting[(※プロジェクト名)]: found 18 files in dist
+  hosting[(※プロジェクト名)]: file upload complete
i  hosting[(※プロジェクト名)]: finalizing version...
+  hosting[(※プロジェクト名)]: version finalized
i  hosting[(※プロジェクト名)]: releasing new version...
+  hosting[(※プロジェクト名)]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/(※プロジェクト名)/overview
Hosting URL: https://(※プロジェクト名).firebaseapp.com
```


# まとめ
firebaseにSPAサイトをホスティングするまでの手順を記載した。
非常に簡単に公開できて、しかも無料である程度使えてしまうので凄い。
まだURLはfirebaseのものとなっているため、ドメインを取得して独自URLでアクセス可能とするための設定が必要となる。
次回はこの辺りの説明を行う。


2019/05/08　[続きを作成しました。](https://qiita.com/nobu17/items/a671f6ffcd00eb8a137f)