概述

最近打算玩一下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

轉載于:https://www.cnblogs.com/yangzhou33/p/10575471.html

總結

以上是生活随笔為你收集整理的搭建微服务器：express+https+api代理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。