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

后端 Maven打包 JAR 文件、前端打包dist文件、通过后端服务访问前端页面、Nginx安装与部署

news 2025/7/4 8:22:37

打包 JAR 文件通常使用 Maven 或 Gradle 构建工具（Spring Boot 项目默认推荐 Maven）。以下是详细步骤和常见问题解答：

一、后端 Maven打包 JAR 文件

1. 确保项目是 Spring Boot 项目

项目结构应包含 pom.xml（Maven 配置文件）。
父依赖需包含 Spring Boot Starter：

<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.1.0</version> <!-- 使用最新版本 -->
</parent>

2. 执行 Maven 打包命令

在项目根目录（含 pom.xml 的目录）下运行：

mvn clean package

在这里插入图片描述
clean：清理之前编译的文件。
package：编译代码并打包成 JAR 文件。

3. 生成的可执行 JAR 文件

打包完成后，JAR 文件会出现在 target/ 目录下：

target/
└── your-app-0.0.1-SNAPSHOT.jar  # 示例文件名

在这里插入图片描述

可执行 JAR：Spring Boot 默认会生成包含所有依赖的 fat JAR（直接运行 java -jar 即可启动）。

4. 运行 JAR 文件

jar包所在路径执行包

java -jar your-app-0.0.1-SNAPSHOT.jar

在这里插入图片描述

二、前端打包dist文件夹

1. 确保环境配置正确

Node.js 和 npm/yarn：确保已安装，并通过以下命令验证：

node -v
npm -v  # 或 yarn -v

2. 进入前端项目根目录

打开终端（Windows：CMD/PowerShell；Mac/Linux：Terminal），导航到前端项目目录：

**cd /path/to/your-frontend-project  # 替换为实际路径**

在这里插入图片描述

3. 安装项目依赖

如果项目是首次运行或依赖未安装，执行：

npm install  # 或 yarn install

此命令会根据 package.json 安装所有依赖库。

4. 构建生产环境代码

（1）Vue 项目（使用 Vue CLI）：

npm run build

默认会在项目根目录生成 dist/ 文件夹，包含编译后的静态文件（HTML、CSS、JS、资源文件等）。
（2）React 项目（使用 Create React App）：

npm run build

生成的文件默认在 build/ 文件夹中。若需输出到 dist/，可修改 package.json 中的 build 脚本或配置 webpack。
（3）自定义配置：
如果项目使用自定义 Webpack 配置，检查 webpack.prod.js 或类似文件，确认输出路径为 dist/：

output: {path: path.resolve(__dirname, 'dist'),  // 确保路径正确filename: '[name].[contenthash].js'
}

在这里插入图片描述

5.验证 dist 文件夹

构建完成后，检查项目根目录是否生成 dist/ 文件夹，并包含以下内容：

dist/
├── index.html          # 主入口文件
├── static/             # 静态资源（CSS、JS、图片等）
│   ├── css/
│   ├── js/
│   └── images/
└── assets/             # 其他资源（如字体）

如果文件夹为空或未生成，检查构建日志是否有错误。
在这里插入图片描述

6. 部署 dist 文件夹

直接部署前端到 Nginx/Apache 和集成到 Spring Boot 后端的主要区别确实体现在身份验证（登录）处理、路由控制和部署耦合性上。

（1）直接部署：将 dist/ 文件夹内容上传到服务器（如 Nginx、Apache 的静态资源目录）。
（2）集成到后端（如 Spring Boot）：
将 dist/ 中的所有文件复制到后端项目的 src/main/resources/static/ 目录。
重新打包后端 JAR/WAR 文件，启动后即可通过后端服务访问前端页面。
在这里插入图片描述

集成到 Spring Boot 的潜在问题：
(1) 登录拦截导致前端资源无法访问
问题场景：
后端配置了 Spring Security，拦截所有请求（包括静态资源）。
例如：访问 /css/app.css 时，后端返回登录页（302 重定向到 /login）。
错误表现：
浏览器控制台报错：Failed to load resource: the server responded with a status of 302。
页面样式/脚本加载失败，显示为空白或未格式化的内容。
(2) 路由冲突
问题场景：
前端使用 Vue Router/React Router 的 history 模式（如 /about、/profile）。
后端未配置全局路由回退到 index.html，导致直接访问这些路径时返回 404。
错误表现：
刷新页面或直接输入 URL 时，显示 Whitelabel Error Page（Spring Boot 默认 404 页面）。

三、通过后端服务访问前端页面（集成到后端）

1.打开文件资源管理器（Windows）或终端（Mac/Linux），将前端 dist/ 文件夹内的所有内容（不是 dist/ 本身）复制到后端项目的：

src/main/resources/static/

最终目录结构：

src/
└── main/└── resources/└── static/├── index.html├── static/│   ├── css/│   ├── js/│   └── images/└── assets/

在这里插入图片描述

2.重新打包后端项目

Maven 项目

cd /path/to/backend-project  # 进入后端项目目录
mvn clean package           # 清理并重新打包

生成的 JAR/WAR 文件在 target/ 目录下（如 your-app-0.0.1-SNAPSHOT.jar）。
Gradle 项目

cd /path/to/backend-project  # 进入后端项目目录
./gradlew clean build       # 清理并重新打包

3.启动后端服务

启动 Spring Boot 应用

java -jar your-app-0.0.1-SNAPSHOT.jar

默认端口为 8080，访问 http://localhost:8080 即可看到前端页面。

注意：
（1）如果显示404，改为http://localhost:8084/your-path/
在这里插入图片描述
（2）如果显示{"code":401,"msg":"No Authorization"}，表示你的请求未通过身份验证（Authentication）或授权（Authorization）检查。
01 状态码：HTTP 401 表示未授权（Unauthorized），通常由以下原因导致：
①请求未携带认证凭证（如 Token、Cookie、Session ID）。
②携带的凭证已过期或无效。
③后端接口配置了安全策略（如 Spring Security、JWT、OAuth2），但前端未正确处理。

四、Nginx安装与部署

（1）下载

Nginx官网
在这里插入图片描述
下载到本地，进入 Nginx 目录下，conf 文件夹下编辑 nginx.conf 文件，根据自己需求进行配置

（2）配置nginx.conf

把前端dist重命名为test放在html下面，以后不同项目dist都放在这里以不同文件夹命名存放。
在这里插入图片描述

server {listen       82;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;# 处理前端路由（如 Vue/React 的 history 模式）location / {# 相对路径：你的dist即test在nginx里的目录root   html/test;# 默认访问 index.htmlindex  index.html index.htm;try_files $uri $uri/ /index.html;}# 可选：代理 API 请求（如 /api/ 转发到后端：在vue.config里proxy下确认有没有）location /api/ {proxy_pass http://127.0.0.1:8084/your-path/;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html# 错误页面配置（可选）error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}
}

在这里插入图片描述

（3）nginx双击闪退

server里listen的是82，在排除端口82已经被占用的情况下；
在你nginx下载目录上cmd：
在这里插入图片描述
输入nginx -t

Nginx 的配置文件必须包含 http、events 和 server 等核心块,

简单来说，我不小心把sever上面http、event不小心删了。。。
在这里插入图片描述

# 全局配置（必须包含 events 和 http）
events {# 即使为空也必须存在worker_connections 1024;  # 可选：设置每个 worker 进程的最大连接数
}http {# 通用配置（如 gzip、log_format）include       mime.types;default_type  application/octet-stream;# server 块必须放在这里！server {listen       82;server_name  localhost;location / {root   html/test;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://127.0.0.1:8084/your-path/;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}  
}