使用Nginx部署前端Vue 和SpringBoot jar项目

1、将打包好的Vue项目放入html目录

 

2、配置Nginx的http访问

    server {
        listen       88;
        server_name  localhost;
		root   html/dist;
        index  index.html index.htm;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location  /ry/{
			 proxy_pass   http://127.0.0.1:8080/ry/;
			 proxy_redirect default;
			 proxy_set_header Host $host;
			 proxy_set_header X-Real-IP $remote_addr; 
			 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
	}

注意:后端 jar项目  context-path路径不能为“/”根路径,必须要加上项目名称,前端Vue访问的接口也要加上项目名称。

以下是一个具体的示例代码,展示了如何使用Nginx部署前后端分离的VueSpring 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后端接口。 请注意根据你的实际情况修改以上示例代码中的路径和配置信息。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值