format_list_bulleted
【Express/Vue.js】Express.jsとVue-CLIを統合する方法について解説
最終更新日時:2020-05-29 07:52:22

Expressなどで開発をする人の中にはせっかくJavaScriptでサーバーをたてているからフロントの描画にもフレームワークを用いたいと思う方は多いと思います。今回はVue.jsを取り上げます。Vue.jsでのアプリケーションの雛形を作ってくれるVue-CLIを用いてさくっとExpressとVueを統合した環境を作成する方法を紹介します。

目標とする統合環境

今回はフロントをVue.js(Vue-CLI3)、サーバーをExpress.jsで立ち上げます。そして、本記事の目標はファイルのバンドルのためにデフォルトで立ち上げることができる(npm run serveコマンドで)開発用サーバーとExpress実行用のサーバーを立ち上げて、httpリクエストとレスポンスの処理をすることです。

作成する環境のイメージ

上のようなイメージです。localhost:8080で立ち上げたフロント開発用のサーバーからlocalhost:3000で立ち上げたバックエンド用のサーバーにリクエストを送りレスポンスを受け取れるようにします。

環境の作成手順

以下のような手順を踏むことでVueとExpressを統合した環境を作ることができます。

  1. Vue-CLIをインストール(前提条件)
  2. Vue-CLIでプロジェクトを立ち上げる
  3. Expressをインストール
  4. (Vue-CLIをビルドしてExpressで表示できるか確認)
  5. ビルドしたファイルからバックエンドサーバーにリクエストを送る
  6. vue.config.jsで開発サーバーのproxyの設定
  7. 開発サーバーからバックエンドサーバーにリクエストを送れるか確認

今回は上の手順でのVue-CLIのインストールについて詳しく説明しません。詳しく知りたい方は「Vue-CLIのインストール」を参照してみてください。5のvue.config.jsを設定することでポート番号を跨いだサーバーとのhttp通信でのやり取りを行うことができます。

実際にやってみる

それでは先ほどの手順で実際に統合した環境を作ってみましょう。今回使用したコードはcode-databaseのgithubリポジトリでも公開していますので手元で確認したい方は是非参考にしてみてください。

Vue-CLIでプロジェクトを立ち上げる

まずはVue-CLIを用いてパパッとアプリケーションに必要なプロジェクトファイルを用意しましょう。

タイトル:ターミナル

$ vue create vue-express-sample

立ち上げ時のオプションはお任せします。今回はサンプルなので全てデフォルトで行います。

Expressをインストール

続いてExpressをnpmでインストールします。Expressのインストールと基本的な使い方については「Express.jsをインストールしてローカルサーバーの立ち上げをしてみる」で取り上げていますので参考にしてみてください。

まずは先ほど作成したフォルダに移動しましょう。

タイトル:ターミナル

$ cd vue-express-sample

そしてnpmでExpressをインストールします。

タイトル:ターミナル

$ npm install express

インストールができたらserver.jsを用意してExpressでサーバーを立ち上げる処理を記述しましょう。

タイトル:server.js

const express = require('express')
const app = express()

app.use('/img', express.static(__dirname + '/dist/img/'));
app.use('/css', express.static(__dirname + '/dist/css/'));
app.use('/js', express.static(__dirname + '/dist/js/'));
app.get('/', (req, res) => res.sendFile(__dirname + '/dist/index.html'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

Vue-CLIの環境ではnpm run buildでビルドされたファイルはdistディレクトリに保存され、画像はimg/、cssファイルはcss/、jsファイルはjs/に用意されます。また、htmlファイルはindex.htmlとして出力されます。したがって、server.jsでは'/'というリクエストに対してsendFileメソッドでindex.htmlをサーブし、index.htmlからのimg, css, jsの呼び出しをstaticメソッドでサーブします。

Vue-CLIをビルドしてExpressで表示できるか確認(任意)

この作業は任意ですが、先ほどserver.jsで記述した内容が正しく動くか確認するために、Vue-CLIをビルドしてExpressでビルドされたファイルをサーブしてみましょう。

タイトル:ターミナル

$ npm run build

上記コマンドでビルドします。続いてサーバーを立ち上げます。

タイトル:ターミナル

$ node server.js

これでhttp://localhost:3000/にアクセスしてみて以下のような画面が表示されていれば大丈夫です。

ビルドしたファイルからバックエンドサーバーにリクエストを送る

次にフロントエンドからバックエンドにリクエストを送ってみましょう。Vueでリクエストを送るにはaxiosを用いるのが一般的なので、まずはこれらをインストールして環境に統合しておきます。

タイトル:ターミナル

$ npm install axios vue-axios

main.jsに以下を追記してaxiosを使えるようにします。

タイトル:main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios' //追記
import VueAxios from 'vue-axios' //追記

Vue.use(VueAxios, axios) //追記
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

そして、components/HelloWorld.vueに以下を追記してボタンを押したらapi/helloというリクエストを送信するようにします。レスポンスとして受け取ったテキストはアラートさせるようにしましょう。

タイトル:components/HelloWorld.vue

<button v-on:click="greeting">あいさつ</button>
methods: {
  greeting: function(){
    this.axios.get('/api/hello')
    .then((res) => alert(res.data))
    .catch((e) => alert(e))
  }
},

追記が必要な部分についてのみ掲載しています。

続いてserver.jsでこのリクエストを受け取り"hello i am express"というテキストを返す処理を記述します。

タイトル:server.js

const express = require('express')
const app = express()

app.use('/img', express.static(__dirname + '/dist/img/'));
app.use('/css', express.static(__dirname + '/dist/css/'));
app.use('/js', express.static(__dirname + '/dist/js/'));
app.get('/', (req, res) => res.sendFile(__dirname + '/dist/index.html'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

//以下を追記
app.get('/api/hello', (req, res) => {
    res.send('hello i am express')
})

ここで再びビルドして出力を見てみると以下のような機能ができているはずです。

ここまででとりあえずモノはできそうです。ですが、フロントの表示のためにいちいちビルドするのはしんどいので、フロント用のサーバー(npm run serveコマンドで立ち上げられるもの)で常に開発用のビルドをした状態でやりたいですよね。そのための処理を次で行います。

vue.config.jsで開発サーバーのproxyの設定

バックエンドサーバーでは基本的に、同じドメイン、ポート番号からでないとリクエストを受け取ることができません。ですのでproxyを介してフロントからバックエンドサーバーと同じポートとしてリクエストを送れるようにします。

vue.config.jsファイルを作成して編集することでVue-CLIでの設定を変更することができます。そして、今回はこの設定のうちdevServerの設定を行います。

タイトル:vue.config.js

module.exports = {
    devServer: {
        port: 8080,
        // localhostでvueからexpressにAPIリクエストを送信する為の設定
        proxy: 'http://localhost:3000'
    },
}

vue.config.jsに上のような記述をすることでproxyを変更することができます。proxyにレスポンスを受け取るバックエンドサーバーのポート番号を指定します。設定についてさらに詳しく知りたい方はVue CLI公式ドキュメントを参考にしてみてください！

開発サーバーからバックエンドサーバーにリクエストを送れるか確認

最後にこの状態でリクエストがちゃんと送れるか確認してみましょう。以下のコマンドでフロントの開発用サーバーを立ち上げます。

タイトル:ターミナル

$ npm run serve

そしてhttp://localhost:8080/にアクセスして確認してみましょう。

上のような振る舞いができていれば完成です。これでフロントでの変更を逐一適用しながらバックエンドのAPIサーバーにリクエストを送ることができます。

この記事のまとめ

本記事ではVue-CLIで作成したVue.jsの環境とExpress.jsを統合する方法について実例を交えて紹介しました。最後に記事の要点についてまとめておきます。

  • Vue-CLIでビルドしたdistファイルの中身をExpressでサーブすることでビルドされたファイルをExpressで扱うことができる
  • vue.config.jsのproxyを設定することでフロント開発用サーバーからもExpressにリクエストを送ることができる

皆さんもJavaScriptのフレームワークやライブラリを活用してみましょう！