【Java】Nginx服务器部署SpringBoot前后端项目

一、打包前端项目

打开vue.config.js配置文件查看打包命令,根据不同的环境进行打包,若是在终端打包的话一定要将路径切换到前端项目的根目录下。

在终端输入npm run build:dev(根据自己的项目修改)

打包完成后会生成dist目录,在前端项目的根目录下,idea左侧找不到的话打开文件所在目录就能看到了:

二、打包后端项目

找到idea右侧的maven管理器,先执行clean,再执行install,

在项目target目录下会生成可执行jar文件

至此前后端项目准备工作完成。

三、将项目上传到服务器

1.上传项目文件

用工具将前面打包好的dist文件夹和jar文件上传到服务器,保存路径尽量不要出现中文。

前端dist项目位置如下:

后端jar文件位置如下:

2.部署前端项目到nginx服务器

打开nginx服务器的nginx.conf文件,位置一般在nginx安装目录下的conf目录下:

使用命令vim nginx.conf打开进行编辑,保证当前登录用户是root用户,不然保存不了。

listen是端口号,自定义/默认都可以;

server_name是虚拟主机的域名

第一个location和第二个location root下写的是前面dist目录保存的路径

第一个location下的try_files是为了解决刷新页面出现404报错的情况(这个很重要

3.设置反向代理

设置proxy_pass, 后面写的是后端服务的IP+port,它的作用是将客户端的请求转发到指定的后端服务器,并将后端服务器的响应返回给客户端。

location后面的/dev-api根据自己的项目进行替换,它的作用是匹配以 /dev-api/ 开头的所有请求路径。

至此,部署完成,按esc键,再按:wq保存退出。

重启nginx服务,保证配置生效。

四、运行

1.启动前端

前端项目已经配置完成了,不需要其他操作。(配置完成后重启nginx)

2.启动后端

在终端切换到jar文件保存位置,执行命令java -jar xxx.jar即可

3.浏览器访问

在浏览器输入前面配置的server_name:listen

例如:localhost:80  /  192.168.152.159:80(虚拟机的IP地址)(我的项目部署在虚拟机上)

按照以上步骤一般都能部署成功,有问题欢迎在评论区留言!

  • 14
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个具体的示例代码,展示了如何使用Nginx部署前后端分离的Vue和Spring Boot应用: 1. Vue前端部分: 在Vue项目中,执行以下命令构建前端项目: ```bash npm run build ``` 将构建生成的静态文件复制到Nginx的静态文件目录,例如`/var/www/html`: ```bash cp -r dist/* /var/www/html ``` 2. Spring Boot后端部分: 使用Maven或Gradle将Spring Boot项目打包成可执行的jar文件。例如,使用Maven命令打包: ```bash mvn clean package ``` 将打包好的jar文件上传到服务器中的某个目录,例如`/opt/springboot`。 3. Nginx配置部分: 编辑Nginx配置文件`/etc/nginx/nginx.conf`,添加一个新的server配置块: ```nginx server { listen 80; server_name your-domain.com; # 静态文件路径 location / { root /var/www/html; index index.html; try_files $uri $uri/ /index.html; } # 反向代理后端接口 location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` 在上述配置中,将Vue前端的静态文件放在根路径`/`下,将Spring Boot后端的接口放在`/api`路径下,并使用`proxy_pass`指令将请求转发到Spring Boot后端的地址和端口。 保存并退出Nginx配置文件后,重新加载Nginx配置: ```bash sudo service nginx reload ``` 4. 启动应用: 在服务器上启动Spring Boot应用: ```bash java -jar /opt/springboot/your-springboot-app.jar ``` 启动Nginx服务: ```bash sudo service nginx start ``` 通过访问你的域名或服务器IP,即可访问Vue前端应用,并通过`/api`路径访问Spring Boot后端接口。 请注意根据你的实际情况修改以上示例代码中的路径和配置信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值