手把手教你用Nginx部署Spring Boot + Vue项目到服务器

一、准备工作

首先，你需要有一台服务器（比如阿里云、腾讯云的ECS，或者自己装个虚拟机都行），系统推荐 Ubuntu 20.04/22.04 或者 CentOS 7/8。

假设你已经通过 SSH 连上了服务器（ssh root@你的服务器IP），我们就可以开始了。

二、下载Nginx

Nginx 是我们这次的大管家，负责接待用户请求、分发静态页面、转发 API 请求。

下载地址：https://nginx.org/en/download.html

 三、Nginx安装

下载完是一个zip文件，双击解压就能直接用了，不用安装。

使用命令检查是否安装成功

nginx -v

命令启动

start nginx

验证Nginx是否启动成功

  打开浏览器，访问 http://localhost:80（或者 http://你的服务器IP）。如果能看到 Nginx 的欢迎页面，就说明启动成功了。

四、Java 项目打包

这里以 Maven 打包为例：第一步，先把项目停掉；第二步，按照下图步骤进行打包。

打包完成后，在 target 目录下会生成一个 .jar 文件。看到这个文件，就说明打包成功了。

五、Vue项目打包

在项目根目录下执行以下命令，即可完成打包。

npm run build 

打包完成后，项目目录下会自动生成一个 dist 文件夹。看到这个文件夹，就说明打包成功了。

六、部署准备

在开始部署之前，先检查一下服务器的环境是否就绪：

JDK：Java 项目需要，版本要和你的 Spring Boot 项目匹配（一般 Java 8、11、17 或 21）

Node.js：如果需要在服务器上打包前端项目才需要，本地打包好上传的话可以跳过

数据库：MySQL、PostgreSQL 等，确保你的后端能连上

把刚刚 Vue 项目打包好的 dist文件夹，拷贝到服务器的 Nginx 目录下的html文件夹里。

把刚刚打包好的 Java 项目 Jar 包拷贝到服务器的任意位置，注意要记住存放路径，后面配置会用到。（可以参考我的，我在桌面新建了一个Jar文件夹，存放到里面）

进入 Jar 包所在的目录，然后执行下面这条命令就能启动：

Java -jar xxx.jar  --改成你jar包的名称

进入服务器的 Nginx 配置文件目录conf，修改 nginx.conf：

http {
 include  mime.types;
 default_type application/octet-stream;

 #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
 #     '$status $body_bytes_sent "$http_referer" '
 #     '"$http_user_agent" "$http_x_forwarded_for"';

 #access_log logs/access.log main;

 sendfile  on;
 #tcp_nopush  on;

 #keepalive_timeout 0;
 keepalive_timeout 65;

 #gzip on;
 
 server {
  #监听的端口号
  listen  80;
  #设置访问的二级域名
  server_name demo.eysource.com;

  #charset koi8-r;

  #access_log logs/host.access.log main;

  location /{
  #配置访问的项目路径（注:这里重点）
  proxy_pass http:********:9091/
  # root html;
  # index index.html index.htm;
  proxy_set_header   Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
  client_max_body_size 100m;
  root html;
  index index.html index.htm;
   }
  }
 server {
  #监听的端口号
  listen  80;
  #设置访问的二级域名
  server_name aaa.eysource.com;

  #charset koi8-r;

  #access_log logs/host.access.log main;

  location /{
  #配置访问的项目路径（注:这里重点）
  proxy_pass http:********:8080/
  # root html;
  # index index.html index.htm;
  proxy_set_header   Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
  client_max_body_size 100m;
  root html;
  index index.html index.htm;
   }
  }
 }

最后，双击 nginx.exe 启动，或者使用以下命令启动 Nginx：

start nginx