nginx部署前端项目总结

1.前端打包

本次开发使用的是字节的前端框架 Arco Design进行开发，使用vue3，ts及vite，框架中有两套环境配置，分别为.env.development和.env.production，用于开发环境和测试环境。

开发环境配置

复制代码

NODE_ENV = 'development'
# 基础路径
VITE_API_BASE_URL= "http://localhost:5173"
# 代理路径
VITE_APP_API_URL_PROXY = http://127.0.0.1:8098
VITE_APP_API_URL="/api"

生产环境配置

复制代码

NODE_ENV = 'production'
VITE_API_BASE_URL= "http://10.120.7.23:5173"
VITE_APP_API_URL="/api"

开发环境中配置了基础路径及代理路径及请求添加的前缀。

生产环境中配置了基础路径及请求前缀。

基础路径用于配置到axios请求的基础路径，开发中发出的请求只需要和后端mapping中的url一致即可。

发起请求是会将基础路径+请求前缀+axios方法中传递的url拼接起来。

在开发环境中匹配到带有请求前缀的请求时，通过下面的配置，会将请求发送到代理路径中，并且去掉请求前缀。

复制代码

import {loadEnv, mergeConfig} from "vite";
import baseConfig from "./vite.config.base";

const env = loadEnv("development", process.cwd());
export default mergeConfig(
    {
        mode: "development",
        server: {
            open: true,
            fs: {
                strict: true
            },
            proxy: {
                "/api": {
                    target: env.VITE_APP_API_URL_PROXY,
                    changeOrigin: true,
                    rewrite: (path: string) => path.replace(/^\/api/, ''),
                }
            }
        }
    },
    baseConfig
);

生产环境中则通过nginx进行代理，所以在配置文件中不需要配置代理路径，只需要配置基础路径及请求前缀即可。

2.nginx配置

复制代码

    server {
       listen       5173;
       server_name  localhost;
       underscores_in_headers on;  #添加自定义请求头

       location / {
           root   /root/soft/nginx-1.24.0/html/tjns-ui;
		 try_files $uri $uri/ /index.html;
           index  index.html index.htm;
		 proxy_set_header X-Forwarded-Scheme  $scheme;
        }
          
	   location /api/ {
           proxy_set_header Host $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;
		 proxy_pass http://10.1.6.3:8099/;
        }
    }

监听5173端口

当监听到带有请求前缀（即api）时，会将请求代理到http://10.1.6.3:8098上，并去掉请求前缀api。

当监听到带有斜杠的请求时，会访问root对象的文件夹中的静态资源。

前端执行pnpm run build打包生成的静态资源放在root对应的文件下。

3.注意点

①打包时一定要对生产环境的配置文件进行修改。

②如果请求头中包含自定义的带有下划线的请求头，需要加入此配置，否则会自动去掉下划线。所以如果要添加自定义请求头是要使用中划线。

复制代码

underscores_in_headers on;  #添加自定义请求头

③nginx配置文件修改后，一定要重启nginx服务。

参照：

nginx有时无法转发自定义header头内容的问题 - 代码先锋网