vueのプロジェクトをFirebaseにデプロイする
現在、firebaseをベースにしたメッセンジャーアプリ開発を目指しています。
今回は、vueのプロジェクトをFirebaseにデプロイするまでの備忘録記事です。
vue開発環境の準備
- vue-cli のインストール
$ npm install -g @vue/cli
- プロジェクトの作成
$ vue create my-salon
- ローカル環境でサーバが立ち上がることを確認
$ cd my-salon $ npm run serve
Firebase開発環境の準備
- firebase-toolsのインストール
$ npm install -g firebase-tools
- 以下のコマンドを実行後、ブラウザで自分のgoogleアカウントを選択する
$ firebase login ✔ Success! Logged in as 【自分のメールアドレス】@gmail.com ←これがでればok
Firebaseプロジェクトの作成 以下の記事を参考にコンソール画面から、Firebaseプロジェクトを作成する。 qiita.com
Firebaseの設定
$ firebase init
上記コマンドを実行後、以下の手順で進む。
- Hostingを選択
- Use an existing projectを選択
- 先ほど作成したプロジェクト名を選択
- What do you want to use as your public directory?
distと回答 - Configure as a single-page app (rewrite all urls to /index.html)?
Yesと回答 ✔ Firebase initialization complete! とでてきたら完了
Firebaseへデプロイ作業
- ワークフォルダでビルド実行
$ npm run build
- firebaseへデプロイ実行
$ firebase deploy
- デプロイされていることの確認
