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

打包 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.html
        index  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;
        }
    }  
}

通过http://127.0.0.1:82/可以访问页面了。如果是登陆页面，记得redis也要启动。