Babel + Express + Vue = Awesome

バックエンドとフロントエンドを同時開発していくストロングスタイル
バックエンドはExpress, フロントエンドはVueで作成。
VueCLIのテンプレが良い感じなのでそのまま採用してちょい足しする。

ディレクトリ構成

root
  |- /frontend
  |- /backend

frontendはvue init webpackでサクッと作り、backendは自前で。

フロント側

$ vue init webpack frontend
$ cd frontend
$ yarn
$ yarn dev

localhost:8080にサーバーが立ち上がります。(webpack-dev-server)

バック側

ここの諸々をまずやります。
https://onsen3.blogspot.jp/2017/11/node.html

ルートから、

$ mkdir backend
$ cd backend
$ yarn init
$ yarn add -D babel-cli babel-watch babel-preset-env rimraf standard
$ yarn add express

次いで.babelrcやら.eslintrcやらの設定をします。
そして適当にExpressサーバーをたてます。
今回はポート3000でたてます。
サーバーが建ったら次の段階へ。

フロントとバックの連携

Vue側でプロキシを設定します。
つまり、localhost:8080にアクセスが来た時にlocalhost:3000に受け流します。

/frontend/config/index.jsを下記のようにいじる。
デフォルトだとproxyTableが空のオブジェクトになっているはず。

/frontend/config/index.js

  dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }

これでフロントのlocalhost:8080側からバック側のapiが叩けます。
localhost:8080/api以下へのアクセスがlocalhost:3030/api以下にproxyされます。
単に'/'を設定して全てproxyするのもアリ。

ついでにフロントをbuildするときにbackend側にファイルを生成する設定に書き換えます。

/frontend/config/index.js

  build: {
    index: path.resolve(__dirname, '../../backend/public/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../backend/public'),
  }

/backend/publicにビルドされれば成功。
あとはExpress側でpublic以下をstaticにサーブすれば良い。

試しに連携してみる

バックエンド側にて、

app.get('/api', (req, res) => res.send('Hello World!'))

/apiにアクセスされたら'Hello World!'を返す単純なAPIを作成。

フロントエンド側にて、それを使用。
下記ではaxios使用。当然requestでもsuperagentでもjqueryでも好きなのを使えます。

App.vue

<template>
  <div id="app">
    <p>{{ value }}</p>
    <button @click="getValue">Click</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'app',
  data () {
    return {
      value: 'Nothing...'
    }
  },
  methods: {
    getValue () {
      axios.get('/api')
        .then(res => {
          this.value = res.data
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>

うまく連携されれば成功。

フロントもバックもホットリロードなのでかなりウキウキ開発できる。