前回までのおさらい
firebaseのHelloWorldと、Vue.jsのHelloWorld + 構成を軽く勉強しました。今回はVue.jsをfirebaseにデプロイします。
写経する記事
こちらです。
【Firebase】Vue.jsで作ったWebアプリを公開する方法を解説【初心者向け】 | Public Constructor
手順と図解
…といっても本当に簡単であった。
1. Firebaseコンソールにログインし、画面の指示に従ってプロジェクトを作成。
2. 作成されたプロジェクトのSDKを、vue.jsのルートのindex.htmlに張り付け
3. firebase initコマンドで、vue.jsのプロジェクトをfirebase化
注意点として、ここで指定するfirebaseの公開ディレクトリ名は、次でビルドするvue.jsの公開ディレクトリ名と一致させる必要がある。規定だとpublicとなるが、変更する場合は別の名前を入力する。
4. npm run buildでvue.jsのプロジェクトをビルド
前回のエントリで実施した通り&言及した通りだが、config/index.jsの設定を変更することで、公開ディレクトリ名を設定することができる。今回はpublicに設定する
5. firebase deployコマンドで、firebase化されたvue.jsのプロジェクトをfirebaseにデプロイ
終わり。
正直、非常に簡単にWebアプリがデプロイ出来て驚いている。これなら、簡単なアプリを手元でサクッと開発して、サクっとWebに公開できるなと思った(もちろん、深堀するとお作法などあるかもしれないが)
今後の計画
vue.js と firebaseの関係はこれまでとして、次はいよいよvue.jsでやりたいことをやっていくことにします。