express/koaバックエンドが提供するwebpacked vue.jsアプリケーションの構成方法は？

Question

kueサーバーと組み合わせてvue.jsプロジェクトを簡単にデバッグするのにはいくつかの問題があります。 webpack-simpleから生成されたコマンドcross-env NODE_ENV=development webpack-dev-server --open --hotは素晴らしいことですが、koa/expressでこれを使用するための規約は何ですか？

私が見つけた1つの解決策は、pm2を使ってvueとバックエンドのwebpack-dev-serverを同時に起動することですが、これは最初の着陸vue.jsのコピーバージョンが必要だと思います私が現在ココアのルートから提供しているアプリページ。また、私はこれらの2つのサーバーについて考えるのが紛らわしく、奇妙な気がします。

だから私は間違っていなければならないと思います！誰かがこれを行う良い従来の方法を説明してもらえますか？

Answer 1

独自のノードバックエンドでwebpack-dev-serverを使用しようとしている場合は、proxyを調べることをお勧めします。

基本的には、1つのポート（たとえば、ポート3000）でwebpack-dev-serverを実行し、別のポート（たとえば、ポート3001）でノードサーバーを実行するという考えがあります。サーバー側の要求をノードのバックエンドに転送するようにwebpackに指示するだけです。

あなたのwebpack.config.jsファイル内devServer設定にproxyプロパティを追加することによってこれを行うことができます。例：

devServer: { 
    ... 
    proxy: { 
    '/api/**': { 
     target: 'http://localhost:3001', 
     secure: false 
    } 
    } 
} 

ここで、/api/で始まるリクエストは、ノードのバックエンドに送られます。したがって、次のような場合：

fetch('/api/users').then(...) 

このリクエストは、ノードサーバーにプロキシされます。 /api/を使用して、すべてのサーバー側のルートにプレフィックスを付ける必要があります。

const express = require('express') 

const app = express() 
const router = express.Router() 

// GET /api/users 
router.get('/users', (req, res) => { 
    ... 
}) 

app.use('/api', router) 

：あなたはExpressを使用している場合は、次の操作を実行して、接頭辞ができ

const Koa = require('koa') 
const Router = require('koa-router') 

const app = new Koa() 
const router = new Router({ prefix: '/api' }) 

// GET /api/users 
router.get('/users', async ctx => { 
    ... 
}) 

app.use(router.routes()) 
app.use(router.allowedMethods()) 

：

は自動的に次の操作を行うだけでできる、興亜内のすべてのあなたのルートをプレフィックスに