Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

簡単に管理できるようにバックエンド(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')());
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした