前言

前端时间学习过程中写了几个小 Demo，但都是在本机开发环境下运行的。本以为部署到服务器就是简单把文件上传就可以。结果踩了一些很可笑的坑🤣🤣


部署普通 JavaEE 项目

这个比较简单，用 Maven 把项目打成 War 包，然后上传至 Tomcat 目录的 webapps 目录下，并且启动 Tomcat 服务即可。Tomcat 会自动将 War 包进行解压缩。然后访问 ip:port/project_name-project_version 即可看到项目首页。

需要注意的是：项目中的所有涉及到路径跳转的 url 都尽量使用相对路径


部署 Spring Boot 项目

问题说明

我使用的 IDE 是 Intellij IDEA，开发时项目在本地运行正常。使用 Maven 将其打包后，运行 java -jar test-2.0-SNAPSHOT.jar 出现错误：

image-20220909100617063

翻译过来就是：这个 jar 包中没有主清单属性


原因解读

出现此问题的原因是打包后的 jar 文件中的 MANIFEST.MF 缺少项目启动项。我们用压缩软件打开 jar 包，查看 META-INF 下的 MANIFEST.MF 文件

image-20220909102021957

第一时间想到的是没有 Start-Class 配置项


解决方案

在项目中添加 spring-boot-maven-plugin 打包插件。

pom.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <artifactId>spring-boot-starter-parent</artifactId>
        <groupId>org.springframework.boot</groupId>
        <version>2.6.7</version>
    </parent>

    <groupId>com.pushihao</groupId>
    <artifactId>test</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <java.version>17</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

    </dependencies>

    
    <!--此处即为添加上述插件-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

再次打包，查看 META-INF 下的 MANIFEST.MF 文件

image-20220909102621563

会发现多了一些相关配置属性，此时再运行 java -jar test-2.0-SNAPSHOT.jar 一切正常


部署 vue 项目

问题说明

构建环境我使用的是 vue3 + vite

为了解决跨域问题，我使用了 vite 提供的代理设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/api": {
        target: "http://152.136.233.95:8090/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
    disableHostCheck: true
  },
})

项目在本地运行正常。通过 yarn run build 构建打包，上传到服务器，通过 nginx 创建服务器

1
2
3
4
5
6
7
8
9
server {
    listen  10989;
    server_name localhost;

    location / {
        root html/test2;
        index index.html;
    }
}

浏览项目地址。发现项目的 ajax 请求出现 404 错误

image-20220909104717468


原因解读

vite 提供的代理服务器在实际项目中不起作用，仅在开发阶段可以使用


解决方案

使用 nginx 进行代理

其中使用 nginx 在后端代理的方式在我的上一篇博客浅谈 xhr 请求跨域问题已经提到了，这里主要介绍使用 nginx 在前端进行反向代理

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
    listen  10989;
    server_name localhost;

    location / {
        root html/test2;
        index index.html;
    }

    location /api/ {
        proxy_pass http://152.136.233.95:8090/;
    }
}

重启 nginx 服务，前端请求正常，问题解决！