ToB企服应用市场:ToB评测及商务社交产业平台

标题: 若依前端挂Nginx、打包部署运行！！！！ [打印本页]

作者: 八卦阵 时间: 昨天 19:21
标题: 若依前端挂Nginx、打包部署运行！！！！
先相识知识：

const proxy = require('http-proxy-middleware');
module.exports = {
devServer:{
host: 'localhost', //target host
port: 8080,
//proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
proxy:{
'/api':{
target: 'http://192.168.1.30:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
//ws: true, // proxy websockets
//pathRewrite方法重写url
pathRewrite: {
'^/api': '/'
//pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
}
}}
},
//...
}

复制代码

   网上找的一个：
  我来解释一下，相识大概意思即可：
  1、前端服务运行在 localhost:8080
  2、目标服务器是 http://192.168.1.30:8085，这就是你的后端服务器地址。
  3、前端请求 localhost:8080/api/queryOrder，希望这个请求被转发到后端服务器 http://192.168.1.30:8085/queryOrder。
  4、设置了 pathRewrite 规则，将 /api 前缀重写为空，发送给后端请求时去掉 /api 部分。

  【/api': {}，就是告诉node, 我接口只要是’/api’开头的才用代理】
1. 前端请求发起：

假设你的前端项目中使用 axios 来发送请求，代码可能是这样的：

import axios from 'axios';
axios.get('/api/data') // 请求地址是 /api/data
.then(response => {
console.log('Response:', response.data);
})
.catch(error => {
console.log('Error:', error);
});

复制代码

在前端，axios.get('/api/data') 会发出一个请求，浏览器会实验向 http://localhost:8080/api/data 发送请求。
2. webpack-dev-server 设置代理：

在你的 webpack.config.js 或 vue.config.js 文件中，你设置了 proxy 代理规则：

const proxy = require('http-proxy-middleware');
module.exports = {
devServer: {
host: 'localhost', // 目标主机，前端服务运行的主机
port: 8080, // 本地开发服务器的端口
proxy: {
'/api': { // 以 /api 开头的请求都会通过代理
target: 'http://192.168.1.30:8085', // 代理到这个后端服务
changeOrigin: true, // 如果后端 API 需要跨域，可以设置为 true
pathRewrite: {
'^/api': '/' // 重写路径，将请求的 /api 去掉，发给后端的 URL 为 http://192.168.1.30:8085/data
}
}
}
},
};

复制代码

3. 请求流程：

前端请求：浏览器向 http://localhost:8080/api/data 发送请求。
这里 axios.get('/api/data') 会被 webpack-dev-server 捕获，由于它匹配到了 /api 前缀。
代理转发：webpack-dev-server 根据 proxy 设置，将请求代理到目标地址 http://192.168.1.30:8085。
- 由于设置了 pathRewrite: {'^/api': '/'}，请求路径 /api/data 会被重写成 /data，终极请求的地址是 http://192.168.1.30:8085/data。
后端处置惩罚：http://192.168.1.30:8085 这个后端服务会接收到请求并进行处置惩罚，返回相应数据。
相应返回：后端返回的数据会通过代理服务器 webpack-dev-server 转发回浏览器，前端页面就可以接收到相应数据。

4. 请求示例：

前端请求：http://localhost:8080/api/data
这会被 webpack-dev-server 转发到：http://192.168.1.30:8085/data
终极的后端 URL 为：http://192.168.1.30:8085/data

5. Nginx 代理：

假设你有一个生产环境的 Nginx 设置，想要将前端请求代理到后端服务，Nginx 设置可能是这样的：

server {
listen 70;
# 假设前端文件存放路径
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# 代理 /api 请求到后端服务
location /api/ {
proxy_pass http://192.168.1.30:8085/; # 将请求代理到后端
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}

复制代码

listen 告诉 Nginx 监听哪个端口。
前端的请求仍然是 http://localhost:8080/api/data，这会被 webpack-dev-server 转发到后端。
假如你使用 Nginx 进行生产环境部署，那么 Nginx 会把 /api 请求转发到后端服务 http://192.168.1.30:8085/。

前端生产环境（nginx代理）和开发环境是否辩论-CSDN博客
nginx服务器的端标语是80，以是启动成功之后，我们浏览器直接访问http://localhost:80 即可，此中80端口可以省略，其浏览器展示结果如图所示
总结：

开发环境：在开发环境中，你通过 webpack-dev-server 设置的代理将 /api 的请求转发到目标后端服务。
生产环境：你可以在 Nginx 中设置雷同的代理规则，将前端请求代理到后端服务。

部署若依：

先前后端启动运行，查看：
留意：前端是运行在80端口，后端是8080端口

前端打包后，dist文件放到ngnix内里

以是ngnix中ngnix.conf:

server {
listen 8888;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
# 提供静态文件
location /{
root html/dist; # 打包好的文件路径
try_files $uri $uri/ /index.html; # 将所有路由请求重定向到index.html
}
# 代理后端 API 请求
location /prod-api/ {
proxy_pass http://localhost:8080/;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

复制代码

Ngnix先容、安装、实战及用法！！！-CSDN博客
然后启动ngnix，发现确实是8888端口

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)