搭建微服務器：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