feat: dev proxy middleware (umijs#19)

* feat: dev proxy middleware * fix: types and test cases * fix: types * fix: proxy test case * fix: types * fix: add proxy headers test case * fix: remove console * fix: test dev command * test: proxy test * fix: test case * fix: types * docs: @umijs/server * fix: ci * fix: test
xierenyuan · Jan 17, 2020 · 73fb7d6 · 73fb7d6
1 parent f51d2ca
commit 73fb7d6
Show file tree

Hide file tree

Showing 6 changed files with 522 additions and 16 deletions.
diff --git a/docs/packages/server.md b/docs/packages/server.md
@@ -0,0 +1,50 @@
+# @umijs/server
+
+基于 [Express](https://expressjs.com/) 的本地开发服务器，抽出所有构建工具在本地开发时的服务端部分。
+
+达到的效果是，`umi dev` 抹平构建工具（webpack、rollup、...) 本地开发服务器差异。
+
+`@umijs/server` 内置 [Proxy](#Proxy) 代理、[Mock](#Mock)
+
+## 扩展中间件
+
+提供 `beforeMiddlewares`、`compilerMiddleware`、`afterMiddlewares` 参数来扩展 Server 中间件能力，并按顺序进行调用。
+
+```js
+const server = new Server({
+  // 编译前添加的中间件
+  beforeMiddlewares: [],
+  compilerMiddleware: (req, res, next) => {
+    // 编译时中间件
+    if (req.path === '/compiler') {
+      res.end('compiler');
+    } else {
+      next();
+    }
+  },
+  // 编译后添加的中间件
+  afterMiddlewares: [],
+});
+```
+
+## Proxy
+
+提供代理能力，解决联调过程中的前端跨域问题。
+
+使用了 [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) 包。更多高级用法，请查阅其 [文档](https://github.com/chimurai/http-proxy-middleware#options)。
+
+```js
+const server = new Server({
+  proxy: {
+    '/api': {
+      target: 'http://jsonplaceholder.typicode.com/',
+      changeOrigin: true,
+      pathRewrite: { '^/api': '' },
+    },
+  },
+});
+```
+
+然后访问 `/api/users` 就能访问到 [http://jsonplaceholder.typicode.com/users](http://jsonplaceholder.typicode.com/users) 的数据。
+
+## Mock
diff --git a/packages/preset-built-in/src/index.test.ts b/packages/preset-built-in/src/index.test.ts
@@ -1,6 +1,6 @@
 import { Service } from '@umijs/core';
 import { join } from 'path';
-import { rimraf } from '@umijs/utils/src';
+import { rimraf, got } from '@umijs/utils';
 import { existsSync, readFileSync } from 'fs';
 
 const fixtures = join(__dirname, 'fixtures');

diff --git a/packages/preset-built-in/src/plugins/commands/dev/dev.ts b/packages/preset-built-in/src/plugins/commands/dev/dev.ts
@@ -22,12 +22,14 @@ export default (api: IApi) => {
       });
 
       // dev
-      const { bundler, bundleConfigs } = await getBundleAndConfigs({ api });
+      const bundleConfig = await getBundleAndConfigs({ api });
+      const { bundler, bundleConfigs } = bundleConfig;
       const opts: IServerOpts = bundler.setupDevServerOpts({
         bundleConfigs: bundleConfigs,
       });
       const server = new Server({
         ...opts,
+        proxy: api.config?.proxy,
         beforeMiddlewares: [],
         afterMiddlewares: [createRouteMiddleware({ api })],
       });

diff --git a/packages/server/package.json b/packages/server/package.json
@@ -22,10 +22,12 @@
   "bugs": "http://github.com/umijs/umi/issues",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/server#readme",
   "dependencies": {
-    "@types/node": "13.1.6",
     "@types/express": "4.17.2",
+    "@types/http-proxy-middleware": "0.19.3",
+    "@types/node": "13.1.6",
     "@types/sockjs": "0.3.31",
     "express": "4.17.1",
+    "http-proxy-middleware": "0.20.0",
     "portfinder": "1.0.25",
     "sockjs": "0.3.19"
   }