前端文件放在nginx哪里运行

---

文章目录

• 前言
• 一、Idea打包war包

• 1.1 项目结构，不同Idea版本不一样
• 1.2 选择Web Application Achieve，For xxx确定
• 1.3 Idea工具栏，Build->Build Artifacts
• 1.4 然后选择刚刚的，进行build

• 二、tomcat部署war
• 三、nginx部署前端Vue项目

• 3.1 前端项目打包
• 3.2 nginx配置请求路径
• 3.3 前端项目跨域处理

• 总结

---

前言

部署Tomcat的war包作为后端，Vue作为前端，然后nginx进行请求转发处理

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Idea打包war包

直接使用maven的package可能在有前端界面的情况下少东西，所以使用以下方式打war包

1.1 项目结构，不同Idea版本不一样

1.2 选择Web Application Achieve，For xxx确定

1.3 Idea工具栏，Build->Build Artifacts

1.4 然后选择刚刚的，进行build

生成路径在1.2那个图里有配置的

二、tomcat部署war

2.1 先将Tomcat webapp目录下文件全部删除
2.2 将war包文件放在webapps文件夹下
2.3 运行tomcat，war文件自动解压成文件夹
2.4 关闭tomcat，将步骤2解压的文件夹直接改名为ROOT
2.5 重新运行tomcat，即可。
2.6. 打开你的IP或者域名，直接访问接口即可

这样方式，访问不需要加前缀，其他方式，可能需要加前缀

三、nginx部署前端Vue项目

3.1 前端项目打包

打包后的dist改个名字方便区分，然后放到服务器上。

3.2 nginx配置请求路径

以下仅展示server的关键配置，监听两个端口

#这个server监听8084端口
 server {
                listen       8084;
               server_name localhost;

                location ^~ /admin {
                        #前端界面1的位置，注意这里最后有个/
                        alias /apps/steam/platform/;
                        index index.html;
                }

                location ^~ /scratch {
                        #前端界面1的其他静态资源的位置，注意这里最后有个/
                        alias /apps/steam/scratch/;
                        index index.html;
                }
				
				#这里匹配/api开头的请求
                location /api/ {
                        # 移除URL中的/api前缀
                        rewrite ^/api/(.*) /$1 break;
                        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;
                        #这里代理到后台tomcat部署的项目的端口
                        proxy_pass http://localhost:8090;
                }
				
				//这里是其他请求
                location / {
                        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://localhost:8090;
                }
        }
#下面的server监听8085端口
server {
                listen       8085;
                #server_name localhost *.abc.com;
                server_name localhost;
                location ^~ /admin {
                        #前端界面2的位置，注意这里最后有个/
                        alias /apps/steam/school/;
                        index index.html;
                }

                location ^~ /scratch {
                        ##前端界面2的其他静态资源的位置，注意这里最后有个/
                        alias /apps/steam/scratch/;
                        index index.html;
                }

				#这里匹配/api开头的请求，前端devServer配置请求路径api，防止跨域，这里匹配路径
                location /api/ {
                        # 移除URL中的/api前缀
                        rewrite ^/api/(.*) /$1 break;
                        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;
                        #这里代理到后台tomcat部署的项目的端口
                        proxy_pass http://localhost:8090;
                }

                location / {
                        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://localhost:8090;
                }
        }

3.3 前端项目跨域处理

vite.config.js

//设置代理，解决跨域问题
  server: {
    proxy: {
      //代理/api的请求
      '/api': {
          //需要代理到的地址
          target: 'http://localhost:8080',
          //允许修改源
          changeOrigin: true,
          //将/api去掉
          rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

这里有另外一种，用的devServer的

devServer: {
    https: true, // 开启https模式
    // 配置服务器代理
    proxy: {
      '/api': { // 匹配访问路径中含有 '/api' 的路径
        target: 'http://localhost:3000/', // 测试地址、目标地址
        changeOrigin: true,
        ws: true, // 是否开启 webSocket 代理
        pathRewrite: { // 请求路径重写
          '^/api': '',   //重写请求路径
        },
      }
    }
  },

发送请求时，写成/api/xx,不要加前面的httpxxx

---

总结

主要注意tomcat部署的项目在webapps下的ROOT中，不需要访问前缀。否则比如webapps/aa，请求访问时，应该加上aa；
另外前端跨域处理见3.3；
如果nginx的监听的端口，可以服务器curl，curl 1.1.1.1:8084/admin，但是外网无法访问，那么服务器需要开放这个端口。