15
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Webpack Dev ServerとFirebase serveを一緒に使う

Firebase Hostingを開発するために公式でstatic serverが用意されていますがconfigを元にrewriteやheaderを書き換えてくれるわずかなミドルウェアの入っただけなのでwebpack-dev-serverと一緒に使う場合の方法です。

webpack-dev-serverはwebpack用の開発サーバーでビルドした結果を返してくれたりホットリロードをサポートしていたりと高機能な開発サーバーです。

環境

MacOS 10.12.2
Node 8.8.1
webpack 3.8.1

セットアップ

雛形としてwebpack-simpleを使いました。

以下のコマンドでプロジェクトを作成できます。

$ npm install -g vue-cli
$ vue init webpack-simple my-project

  This will install Vue 2.x version of the template.

  For Vue 1.x use: vue init webpack-simple#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author Kazuhiro Kubota <k2.wanko@gmail.com>

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev

次にfirebase-toolsを使ってセットアップします。

$ npm install -g firebase-tools
$ cd my-project
$ firebase init

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

You're about to initialize a Firebase project in this directory:

  /private/tmp/my-project

Before we get started, keep in mind:

  * You are currently outside your home directory

? What Firebase CLI features do you want to setup for this folder? Database: Deploy Firebase Realtime Database Rules, Hosting: Configure and deploy Fireba
se Hosting sites

=== 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.

? What Firebase project do you want to associate as default? [don't setup a default project]

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? database.rules.json
✔  Database Rules for undefined have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.

=== 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? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote public/404.html
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

次にpackage.jsonに依存パッケージを追加します。

$ npm install -D firebase-tools
$ npm install -D superstatic
$ npm install -D html-webpack-plugin

設定ファイルの修正

以下のようにdevServerpluginを書き換えます。

webpack.config.js
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var firebaseConfig = require('firebase-tools/lib/config').load({ cwd: process.cwd() })

module.exports = {
  entry: './src/main.js',
  output: {...},
  ...
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    before(app) {
      app.use(require('superstatic')({ config: firebaseConfig.data.hosting }))
    }
  },
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
}

...

そしてnpm run devを実行すれば rewriteなどの設定が効きつつホットリロードのできる開発サーバーが実行できます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
15
Help us understand the problem. What are the problem?