前端免安装Nginx 部署

天蒙蒙亮

已于 2024-03-23 08:18:44 修改

阅读量1k

点赞数

分类专栏： nginx服务器 React js 文章标签：前端

于 2022-06-29 08:31:59 首次发布

本文链接：https://blog.csdn.net/qq_38719039/article/details/125513179

版权

React 同时被 3 个专栏收录

62 篇文章 3 订阅

订阅专栏

45 篇文章 1 订阅

订阅专栏

nginx服务器

26 篇文章 0 订阅

订阅专栏

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