Vue.js + ExpressでSSRをやってみた

簡単に管理できるようにバックエンド(express)とクライアントエンド(Vue.js)を分けます。

#express
express-generatorを使って構築します。

npm install express-generator -g 

テンプレートとしてJadeを使います。

express --view=jade backend
cd backend
npm install
DEBUG=backend:* npm start

http://localhost:3000 にアクセス見たら、Welcome to expressが表示させることを確認できます。自分は3000ポートをすでにRailsで使っているため以下のように実行しました。

PORT=3030 DEBUG=backend:* npm start

#Vue.js
vue-cliを使って構築します。

npm install -g vue-cli 

テンプレートとしてWebpackを使います。

vue init webpack frontend

設定項目の質問は確認して設定を行います。ただし、Install vue-routerは必ずYesにしてください。

cd frontend
npm install
npm run dev

http://localhost:8080/#/ が自動にブラウザーを開き、表示されます。

expressとvue連結

http://localhost:8080 にリクエストが来た場合、localhost:3030をProxyに使うように設定します。

frontend/config/index.js から proxyTable を修正します。

proxyTable: {
  '/': {
    target: 'http://localhost:3030/',
    changeOrigin: true,
    pathRewrite: {
      '^/': ''
    }
  }
},

http://localhost:8080 にアクセスすると welcome expressページが表示されます。

expressサーバーだけ使う

現在はサーバーがexpressとvue no
webpack-dev-serverが一緒に動いています。現在はlocalhost:3030にアクセスするとexpressのページが表示されます。
vueアプリを配布してexpressサーバーだけ使ってvueにアクセスできるようにします。

frontend/config/index.js から buildで以下の部分を修正します。

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

修正した後、ビルドしたらbackend/publicにビルドされた結果が作られます。
frontendをrunしなくてもvueの結果がexpressから表示されます。

cd frontend
npm run build

http://localhost:3030/ にアクセスするとVue.jsのWelcom to Your Vue.js Appページが表示されます。

vueのrouterをhistoryモードに変更

http://localhost:3030/ にアクセスすると　http://localhost:3030/#/ になるのは現在のvueアプリがhashモードだからです。そのためhistoryモードに変更します。

frontend/config/index.js に以下のコードを追記します。

export default new Router({
  mode: 'history',
  routes: [
    {
　　　　　　　　　...

今後vueアプリでhistoryモードが引き継がれない問題があるため、connect-history-api-fallbackを使いします。

まずinstallします。

cd backend
npm install --save connect-history-api-fallback

backend/app.js に以下のコードを追記します。

var app = express();
app.use(require('connect-history-api-fallback')());