前言
前端时间学习过程中写了几个小 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 出现错误：
翻译过来就是：这个 jar 包中没有主清单属性
原因解读
出现此问题的原因是打包后的 jar 文件中的 MANIFEST.MF 缺少项目启动项。我们用压缩软件打开 jar 包，查看 META-INF 下的 MANIFEST.MF 文件
第一时间想到的是没有 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 文件
会发现多了一些相关配置属性，此时再运行 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'
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 错误
原因解读
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 服务，前端请求正常，问题解决！
