Google+ Followers

2017年4月19日 星期三

[Vue.js] 使用 webpack / webpack-dev-server 之 Proxy 架構與後端 api 開發整合

使用 Vue.js 開發前端大概是今年的策略,一開始請同事試著把 embedded web interface 重構,碰到的第一個問題是,如何在桌機開發又能向 embedded device 發 request。如此一來,就是可以專心用 vue.js 開發網頁端,而 api 端也可以交給其他人開發,大家有一個共同整合測試的方式。這個在 server site 就是很直觀的 proxy 架構了,很幸運的,webpack 的彈性可以做到。

舉個例來說,我想讓 /json 這個 path 被包裝成回傳某筆資料,在此就用 ipinfo.io 來頂替一下。

https://webpack.js.org/configuration/dev-server/#devserver-proxy

module.exports = {
  entry: {
    app: './src/main.js'
  },
  devServer: {
    proxy: {
       '/json': {
          target: 'https://ipinfo.io/',
          secure: false
       },
    },
  },
...


然而,不知是不是因為我用 vue-cli 的關係:

$ vue init webpack my-project
$ npm list --depth=0
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── html-webpack-plug[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]


搞了一陣子仍沒成功,且裡頭的確沒 webpack-dev-server :p 最後試了一些招術筆記一下,也看了很多大家再猜來猜去的論點。

總之,筆記兩種解法:

1.原先用 npm run dev 的方式啟動,乾脆改成用 webpack-dev-server 啟動方式,可以確定 devServer.proxy 的 設定有吃到

$ npm install webpack-dev-server --save-dev
$ node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config build/webpack.v.conf.js


2.直接上code! 依照原理實作

$ vim build/dev-server.js
var httpProxy = require("http-proxy");
var apiProxy = httpProxy.createProxyServer();
app.use("/json", function(req, res) {
  //console.log(req);
  req.url = req.baseUrl;
  apiProxy.web(req, res, {
    target: {
      port: 80,
      host: 'ipinfo.io'
    }
  });
});
$ npm run dev


如此一來,都可以解決 :p 可以用 curl -I http://localhost:8080/json 來驗證。

其實改 code 的方式就是不想多測試他的 config 倒底是文件寫錯,還是被改壞,直接靠原理硬解。