vue.jsでWebアプリを作ってそれをFirebaseにデプロイするまでにやったことをまとめました。
途中躓いたところが何個かあったので、備忘録として。
環境とかバージョンとか
- Mac OS Mojave(10.14.3)
- npm 6.9.0
- vue-cli 3.5.1
- firebase 6.5.0
１．vue.jsで何かしらアプリを作る
まずはvue-cliというツールをインストールします。
こちらの記事を参考にさせてもらいました。
Vue.js を vue-cli を使ってシンプルにはじめてみる
vueには2.x系と3.x系があり、firebaseにデプロイする際の手順で微妙に違いがあるそうです。
今回は最新の3.5.1を使いますので2.x系の話は割愛してます。
$ vue --versionとかで確認しておくと吉。
$ npm run buildを実行してdist配下にデプロイする用のファイルを置いておきます。
２．firebase側の準備
Firebaseに今回作成したアプリをデプロイする用のプロジェクトを作る必要があります。
GoogleアカウントでFirebase開き、コンソールから「プロジェクトを追加」をクリックします。
そして、firebaseにログイン。
$ firebase login
ここでいろいろ英語で聞かれると思いますが、言われたとおりにハイハイ言っておきます。
（ブラウザに飛んで許可するか聞かれるはず）
ログインが終わったらプロジェクトIDをメモっておきます
$ firebase list
┌───────────┬───────────────────────┬─────────────┐
│ Name │ Project ID / Instance │ Permissions │
├───────────┼───────────────────────┼─────────────┤
│ Cash Book │ プロジェクトID │ Owner │
└───────────┴───────────────────────┴─────────────┘
次にさっきのvueのアプリがあるディレクトリまで行き、initを実行。
$ firebase init --project=[FirebaseのプロジェクトID]
AAでFIREBASEと表示され、つらつらと色々聞かれます。
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/workspace/vue/vue-cli-test/test-prj
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
Hosting: Configure and deploy Firebase Hosting sites
=== 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.
i Using project hogehoge
=== 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?
設定のあれこれを聞かれますが、基本的にはEnter連打でOK. (Y/n)で聞かれる質問はEnterを押すと大文字の方(Yes)を自動で選択してくれるようになっています。
ただし、? What do you want to use as your public directory?はvueのdistフォルダを指定しましょう。
（あとから変更可能です）
デフォルトではpublicフォルダが選択されますが、vueではdist配下にソースが格納されるのでdistに指定しなければいけません。
３．firebaseにアプリをデプロイする
$firebase deployでサーバーにアプリをデプロイします。