• ホーム
• ブログ
• Firebase情報

FirebaseでVueアプリをデプロイ（公開）する方法

2020年10月16日

FirebaseでVueアプリをデプロイ（公開）する方法

よく利用されているフレームワークのVue(Vue.js)でアプリを開発して、そのアプリをインターネットで公開する方法です！

この記事ではFirebaseのホスティング機能を利用して、Vueで開発したアプリをインターネットで公開する方法を解説しています。

公開するフォルダーを決める！

何を今更と思われる方もいらっしゃると思いますが、どのフォルダーの中身をインターネットで公開するかを最初に決めます。 候補としては、

• Vueのプロジェクトフォルダを使う
• Firebaseのホスティングで公開する為のフォルダを用意する

シンプルなのは、Vueのプロジェクトフォルダーをそのまま公開用にも共用してしまうという方法が一番手間がかかりません。

Firebaseのホスティングで公開する専用のフォルダを用意する場合、開発用のソースコードのフォルダーと公開用のフォルダーを完全に分けて管理できるというメリットがあります。

わたしも、最初は、Vueのプロジェクトフォルダをそのまま利用していました。しかし、デザインを別のプロジェクトで再利用する場合に、Firebaseのプロジェクトも別のプロジェクトになる場合が多くなります。そういう事情もあって、最近は公開は別のフォルダを利用するようにしています。

Vueのプロジェクトフォルダーを使う場合

Vueのプロジェクトフォルダに移動して、Firebaseのホスティングの為の準備を行います。

$ npm install -g firebase-tools
$ firebase login
$ firebase init

を実行します。

Firebaseのホスティングの為のフォルダーを使う場合

まずは、Firebaseのホスティングで公開するためのフォルダを作成します。 作成後、作成したフォルダに移動して同じコマンドを実行します。

$ npm install -g firebase-tools
$ firebase login
$ firebase init

Vueの公開用（production）イメージを作成する

公開用のイメージ作成の前に

Webサーバーのどの場所（フォルダ）でVueのアプリを公開するかによって設定が変わってきます。 ドメインのトップフォルダで公開する場合は特に変更する必要はありません。標準の設定で公開用のイメージを作成します。

ドメインのサブフォルダーで公開する場合は注意が必要です。 ドメインのサブフォルダとは

https://sv-sw.com/xxxx

のように、ドメインのURLに「xxxx」のようなフォルダ名が入ってそこにVueのアプリのイメージを置く場合です。

Webホスティングのサービス内容によってはサブドメインを作成できない場合もあります。その場合はサブフォルダーでアプリを公開する事が多くなります。 Firebaseの場合は、別のドメインを割り当てるのが簡単にできるので余り気にする必要はありません。

サブフォルダーを使い場合は、「vue.config.js」というファイルの設定を変更します。（ファイルがない場合は新規にプロジェクトのトップフォルダに作成します）

Module.exports = {
   // Options
   // Base URL
   publishPath: process.env.NODE_ENV === ‘production’
      ? ‘/production-sub-path/’
      : ‘./’,
   // Output directory
   outputDir: ‘dist
}

この設定を追加します。Vueのバージョンによって設定が若干ことなりますが、最近（2020年10月現在のバージョン）では、この設定で大丈夫です。

公開用イメージの作成

Vue UIを利用している場合は、Tasksメニューから開発用の「serve」の代わりに、「build」を選択して、「Run task」のボタンを押せばイメージを作成してくれます。

コマンドラインを使う場合は

vue-cli-service build

でイメージを公開用のイメージを作成してくれます。 標準設定では、Vueのプロジェクトフォルダの「dist」というフォルダの下に作成されます。

firebase.jsonの設定

Firebaseの初期化（firebase init）の実行時に特に設定を変えない場合、Firebaseの公開用フォルダの「public」というフォルダの下にあるファイルが公開されます。

Vueのプロジェクトフォルダーをそのまま利用する場合、公開用のイメージは「public」の下でなく、「dist」に作られます。 手間を省くために、Firebaseの設定ファイル「firebase.json」を変更すると後の処理が簡単になります。

"hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
}

「public」の設定を「public -> dist」に変更します。

Firebaseのホスティング用のフォルダーを作成した場合

この場合は、Firebaseのホスティング用のフォルダーの「public」の下に、Vueのプロジェクトフォルダから「dist」の下のファイルを全てコピーします。 「public」の下にコピーすれば、「firebase.json」の設定を変える必要はありません。

"hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
}

のままで大丈夫です。

開発用のPCで最終確認

インターネットに公開する前に、開発用のPCで公開用のイメージを使って最終確認します。公開するフォルダーに行って以下のコマンドを実行します。

$ firebase serve

これで、ローカルのサーバーが起動して標準設定ならば「http://localhost:5000」でアクセスできるはずです。

後は公開するだけ

動作に問題がなければこれで準備は完了です。

$ firebase deploy

を実行すれば、Vueのアプリが公開されます。

Vue Routerを使っている場合

Vue Routerを使っている場合は、注意が必要です。 標準設定の「ハッシュモード」の場合は特に問題はありません。

設定を変更して「ヒストリーモード」で使用している場合には、設定の変更が必要です。ヒストリーモードは通常のURLの指定と同じように、アクセスするページを指定する方法です。

ハッシュモード	ヒストリリーモード
https://sv-sw.com/#/sample	https://sv-sw.com/sample

「＃」が入るのが気になる場合はヒストリーモードを使う事になりますが、その際はサーバー側のルーティング処理を変更する必要があります。

firebase.jsonを以下のように変更します。

"hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  },

「rewrites」の設定で、全てのルーティングを「index.html」にして、全てVue側で行うようにします。この設定をした場合、サーバー側では、全てのルート（パス）をindex.htmlにします。つまり、他のHTMLファイル等を置くことはできません。また、ページが見つからない場合の処理（４０４エラー）は通常はWebサーバー側で行いますが、この設定をしてしまうとサーバー側では処理できないので、Vue側で行う必要があります。

まとめ

Firebaseのホスティングを使って、Vueアプリをデプロイ（公開）する方法をまとめてみました。

設定自体は難しい物ではありませんが、細かい所で設定を変えたりする必要がある場合もあるので、初めての場合戸惑う事も多いようです。

今回はよくある質問をカバーする形で解説させていただきました。

Firebaseを使うと、Vueのアプリも簡単にインターネットで公開することができます。しかも、アクセスが少ないうちは無料でWebホスティングができるという魅力があります。

本格的な公開から、ポートフォリオ的な公開まで幅広い用途に使うことができます。ぜひご利用してみてください！

← トップページに戻る

Copyright(c) 2017-2020 by Silicon Valley Super Ware, all rights reserved.