搭建微服務器：express+https+api代理

概述

最近打算玩一下service worker，但是service worker只能在https下跑，所以查資料自己用純express搭建了一個微服務器，把過程記錄下來，供以后開發時參考，相信對其他人也有用。

參考資料：express官方文檔

http服務器

首先我們用express搭建一個http服務器，很簡單，看看官方文檔就可以搭建出來了。代碼如下：

// server.js
const express = require('express');
const http = require('http');

const app = express();
const PORT = 7088; // 寫個合理的值就好
const httpServer = http.createServer(app);

app.get('/', function (req, res) {
  res.send('hello world');
});

httpServer.listen(PORT, function () {
  console.log('HTTPS Server is running on: http://localhost:%s', PORT);
});

加入到項目中

我們的理想狀況是，在項目目錄下建立一個server文件夾，然后在server文件夾里面啟動服務器，加載項目目錄下的dist文件夾。

所以我們加入代碼解析靜態資源：

// server.js
const express = require('express');
const http = require('http');

const app = express();
const PORT = 7088; // 寫個合理的值就好
const httpServer = http.createServer(app);

app.use('/', express.static('../dist'));

httpServer.listen(PORT, function () {
  console.log('HTTPS Server is running on: http://localhost:%s', PORT);
});

加入https

我們想把http變成https，首先我們要生成本地證書：

brew install mkcert
mkcert localhost 127.0.0.1 ::1

上面的代碼意思是說，先安裝mkcert，然后用mkcert給localhost，127.0.0.1和::1這三個域名生成證書。

然后我們可以在文件夾下面看到2個文件：

秘鑰：example.com+3-key.pem
公鑰：example.com+3.pem

我們在鑰匙串里面把公鑰添加信任。方法可參考：在Vue里用Service Worker來搞個中間層（React同理）

添加完之后我們把秘鑰和公鑰放在certificate文件夾，然后添加到credentials.js文件中，我們通過這個文件引入秘鑰和公鑰：

// credentials.js
const path = require('path');
const fs = require('fs');

// 引入秘鑰
const privateKey = fs.readFileSync(path.resolve(__dirname, './certificate/example.com+3-key.pem'), 'utf8');
// 引入公鑰
const certificate = fs.readFileSync(path.resolve(__dirname, './certificate/example.com+3.pem'), 'utf8');

module.exports = {
  key: privateKey,
  cert: certificate
};

最后我們把http變成https，並且引入秘鑰和公鑰：

// server.js
const express = require('express');
const https = require('https');
const credentials = require('./credentials');

const app = express();
const SSLPORT = 7081; // 寫個合理的值就好
const httpsServer = https.createServer(credentials, app);

app.use('/', express.static('../dist'));

httpsServer.listen(SSLPORT, function () {
  console.log('HTTPS Server is running on: https://localhost:%s', SSLPORT);
});

設置api代理

在項目中，我們經常遇到跨域問題，在開發時我們是通過devServer的proxyTable解決的，而proxyTable在打包后是無效的。所以我們需要在服務器上面代理api請求。代碼如下：

// proxy.js
const proxy = require('http-proxy-middleware');

const authApi = 'your-authApi-address';
const commonApi = 'your-commonApi-address';

module.exports = app => {
  app.use('/api/auth', proxy({
    target: authApi,
    changeOrigin: true,
    pathRewrite: {
      '/api/auth': '/auth'
    },
    secure: false,
  }));

  app.use('/api/common', proxy({
    target: commonApi,
    changeOrigin: true,
    pathRewrite: {
      '/api/common': '/api'
    },
    secure: false,
  }));
};

寫法和devServer里面是一樣的，因為devServer底層也是通過express實現的。

然后我們在server.js里面引入上面寫的代理：

// server.js
const express = require('express');
const https = require('https');
const setProxy = require('./proxy');
const credentials = require('./credentials');

const app = express();
const SSLPORT = 7081; // 寫個合理的值就好
const httpsServer = https.createServer(credentials, app);

app.use('/', express.static('../dist'));

setProxy(app);

httpsServer.listen(SSLPORT, function () {
  console.log('HTTPS Server is running on: https://localhost:%s', SSLPORT);
});

最后

最后我們把server.js，credentials.js和proxy.js放在一起就好了啦！

用法：只需要把整個文件夾放到項目目錄，在里面運行下面的指令就好了：

yarn i
node server.js

詳細代碼可以參考我的github