当前位置：首页 > article >正文

若依前端挂Nginx、打包部署运行！！！！

article 2024/12/22 14:55:20

先了解知识：

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 监听哪个端口。
在 listen 70; 中，70 表示 Nginx 监听的端口号。通常这个端口号应该和前端（比如 Vue.js 开发环境中的 Webpack Dev Server）的端口一致，特别是当你想要通过 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端口可以省略，其浏览器展示效果如图所示

【首先nginx占用端口80，若依前端默认80改为70，】

总结：

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

前端部署
打开前端项目的vue.config.js文件，

检查devServer下的proxy代理部分，然后将下面这个端口修改为你要在打包后访问的端口，即使用nginx代理前的接口。这个端口默认是80端口，这里把其修改为不会冲突的70端口，不推荐使用80端口。
因为80端口是默认端口在部署到服务器上和下面启动nginx可能存在占用等问题。
除了这个70端口外，下面的target的url和端口要和你服务器上能访问到后台的接口一致。