はじめに
シンプルな Vue.js アプリケーションを Google Firebase にデプロイしたときの手順です。
Vue.js アプリは vue create xxxx コマンドにてあらかじめ作成済みとします。
手順
firebase-tools のインストール
npm install -g firebase-tools
Firebase にログイン
プロジェクト追加
プロジェクト名とプロジェクトID
- プロジェクト名：任意
- プロジェクトID：全ユーザーでユニークなIDかつ、変更不可、URLなどに使用
Google アナリティクス
Google アナリティクスでアクセス解析などができます。
デフォルトの「有効」のままで良いです。
Google アナリティクスの構成
Google アナリティクスで使用するアカウントを指定します。
通常は「Default Account for Firebase」で良いです。
完了
アプリ追加
「プロジェクトの概要」画面から Web のアイコン「 > 」をクリックします。
アプリの登録
- ニックネーム：任意（プロジェクト名と同じで良いかと）
- 「このアプリの Firebase Hosting も設定します」：チェックを入れます
- サイト：デフォルトで生成されている「プロジェクトID」と同名のサイトで良いです
Firebase SDK の追加
今回は Firebase SDK を使わないのでそのまま進みます。
利用する場合は public/index.html ファイルの body タグ下部に下記スクリプトを貼り付ける？
Firebase CLI のインストール
Firebase デプロイ
firebase init
ローカルで Firebase の初期設定を行う。
設定は firebase.json に記録されるので、後から設定変更する場合は firebase.json を編集する。
「y」で進む。
C:\Users\fukuchan-senpai\work\my-vue>firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
C:\Users\fukuchan-senpai\work\my-vue
? Are you ready to proceed? (Y/n) y
ホスティングを選択する。
? Which Firebase CLI features do you want to set up for this folder? Press Space
( ) Database: Deploy Firebase Realtime Database Rules
( ) Firestore: Deploy rules and create indexes for Firestore
( ) Functions: Configure and deploy Cloud Functions
>(*) Hosting: Configure and deploy Firebase Hosting sites
( ) Storage: Deploy Cloud Storage security rules
( ) Emulators: Set up local emulators for Firebase features
( ) Remote Config: Get, deploy, and rollback configurations for Remote Config
「Use an existing project」を選択する。
=== 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.
? Please select an option: (Use arrow keys)
> Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
Firebase で作成済みのプロジェクトを選択する。
=== 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.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory:
my-xxxx (my-xxxx)
my-xxxx (my-xxxx)
my-xxxx (my-xxxx)
> my-vue-fb (my-vue-fb)
- public ディレクトリはデフォルトの「public」ではなく、「dist」を選ぶ
- Vue.js は SPA なので、index.html に rewrite するは「Yes」で
- GitHub 連携は任意で
- index.html ファイルが存在している場合は上書きしない
=== 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? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File dist/index.html already exists. Overwrite? No
i Skipping write of dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
ビルド
Vue.js にてビルド
npmで
>npm run build
yarnで
>yarn build
firebase deploy
Firebase にデプロイ
C:\Users\fukuchan-senpai\work\my-vue>firebase deploy
=== Deploying to 'my-vue-fb'...
i deploying hosting
i hosting[my-vue-fb]: beginning deploy...
i hosting[my-vue-fb]: found 2 files in dist
+ hosting[my-vue-fb]: file upload complete
i hosting[my-vue-fb]: finalizing version...
+ hosting[my-vue-fb]: version finalized
i hosting[my-vue-fb]: releasing new version...
+ hosting[my-vue-fb]: release complete
+ Deploy complete!
Project Console: https://console.firebase.google.com/project/my-vue-fb/overview
Hosting URL: https://my-vue-fb.web.app
確認
ブラウザから該当URLにアクセスしてページが表示されることを確認します。
https://[サイト名].web.app
