1. 初始化文件夹
cd /tmp
mkdir compiler-frontend && cd compiler-frontend
npm init
npm install express http-proxy-middleware compression undici --save
2. 新建静态服务文件
touch server.js
编辑文件: vi server.js
const express = require('express') // express
const { createProxyMiddleware } = require('http-proxy-middleware')
const compression = require('compression')
const { request }= require('undici')
/* 设置前端部署端口 */
const SERVER_PORT = 8086
/* 设置后端接口地址 */
const baseProxyUrl = 'http://xxx.xxx.xx.xxx:8000'
/* 前端文件存放地址 */
const os_url = 'https://xxxxxxxxxx/xxx/v1.0.0/'
/* 代理配置参考webpack proxy table
* 后端接口代理
*/
const devProxy ={
'/img/':{ // 后端接口前缀
target: baseProxyUrl,
changeOrigin: true,
secure: false,
https:true,
},
'/var/':{ // 后端接口前缀
target: baseProxyUrl,
changeOrigin: true,
secure: false,
https:true,
},
'/server/':{ // 后端接口前缀
target: baseProxyUrl,
changeOrigin: true,
secure: false,
https:true,
},
}
const app = express()
app.use(compression())
Object.keys(devProxy),forEach(function (context) {
app.use(context, createProxyMiddleware(devProxy[context]))
})
app.get('*', async (req, res)=> {
res.type('html')
const { statusCode, body}= await request(os_url + 'index.html')
if (statusCode !== 200) {
res.statusCode(statusCode).json({ msg:'错误', code:statusCode })
return
}
const page = await body.text()
const result = page.replace(/\"\//g, `"${os_url}`).replace(`window.routerBase =
"${ os_url }"`, 'window.routerBase ="/"')
res.send(result)
})
app.listen(SERVER_PORT, ()=>{
console.log(`server is running at :http://localhost:%s/...`,SERVER_PORT)
})
3. 修改packagejson
"scripts":{
"start": "node server.js",
},
4.启动
npm run start
访问
http://本机ip:8086
注意:将本地文件夹上传到服务器指定目录
scp -r build root@168.10.36.55:/usr/local/nginx/html