node.js, vue-cliのインストール
下記よりインストールし、コマンドが通るようになること。
https://nodejs.org/ja/download/
$ node -v
バージョン
$ npm -v
バージョン
次に、vue-cliをインストール。
$ npm install -g vue-cli
Vueプロジェクトの作成・起動
下記のコマンドにてVueプロジェクトを作成し、プロジェクトフォルダに移動しておく。
※対話形式で基本的にすべてyesを選択する。また、npmかyarnはどちらでもよい。
$ vue init webpack vue-firebase-sample
$ cd vue-firebase-sample
次に、作成したプロジェクトをローカルで起動してみる。
npmの場合
$ npm run dev
yarnの場合
$ yarn dev
そして、下記へアクセスすると、デフォルトのVueアプリケーションのが起動している。
http://localhost:8080/
Firebaseへデプロイ
まず、Firebaseコンソールへアクセスする。
下記の手順でプロジェクトを作成する。
- プロジェクト名を入力する。
- Google Analyticsは無効化する。
- プロジェクトを作成を押下する。
作成したプロジェクトのコンソール画面へ遷移する。
左側のスライダーの開発 > Hostingを押下する。
firebase cliをインストールする。
$ npm install -g firebase-tools
$ firebase -V ←大文字のVなので注意。
バージョンが表示されればOK
firebaseにログインする。
$ firebase login
Allow Firebase to collect CLI usage and error reporting information? Yと回答する。
ブラウザ上に移り、権限を許可する。
プロジェクトディレクトリを設定する。
$ firebase init
対話形式で下記の通り、進める。
? Which Firebase CLI features do you want to set up for this folder? Press Space
to select features, then Enter to confirm your choices. Hosting: Configure and
hostingをspaceで選択し、Enterを押下する。
? Please select an option:
❯ Use an existing projectを選択する。
? What do you want to use as your public directory? dist
Enterを押下する。
? Configure as a single-page app (rewrite all urls to /index.html)? No
Enterを押下する。
モジュールをビルドする。
$ npm run build
デプロイする。
$ firebase deploy
Hosting URL: {リンク} ← 左記のリンクにホスティングされている。
再デプロイする場合
vueプロジェクトを編集した後、下記を実行する。
$ npm run build
$ firebase login
ログインされていれば、グーグルアカウントが表示される。
$ firebase deploy
そして、ホスティングURLにアクセスする。