spring boot + vue + element-ui全栈开发入门——项目部署

最新推荐文章于 2024-12-08 23:50:56 发布

转载最新推荐文章于 2024-12-08 23:50:56 发布 · 205 阅读

文章标签：

#java #运维 #ui

本文介绍两种前后端分离的部署方式：一是将静态页面与SpringBoot项目一同发布；二是使用HTTP服务器如nginx进行部署。详细展示了如何配置nginx实现前端静态页面与后端SpringBoot项目的结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

常用的部署方式有两种：

1.是把生成好的静态页面放到spring boot的static目录下，与打包后的spring boot项目一起发布，当spring boot运行起来后，自然而然就能访问到静态页面文件了。

这种方法比较简单，适用于非常小型的系统。优点是：不需要复杂的配置。而缺点也很明显：需要两者一同发布。我在这里就不做赘述了。

2.是通过http服务器发布，本文以nginx为例，重点介绍这种方式。

一、生成静态页面

运行npm run build

生成的页面文件在dist目录下：

二、配置nginx

windows系统下载nginx：http://nginx.org/en/download.html

下载完解压后，找到conf/nginx.conf文件，并修改：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    server {
        listen       80;
        server_name  localhost;

        # 静态文件夹路径
        root  你的路径;
        index  index.html index.htm;

        # 后端配置
        location /api/ {
        		proxy_redirect off;
        		proxy_set_header Host $host;
        		proxy_set_header X-Real-IP $remote_addr;
        		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            　　　　　　　# 后端url
        		proxy_pass http://localhost:18080/;
        }
    }
}

其中，root项目是配置静态网页文件所在的路径，配置成你自己的目录。

location是配置spring boot项目跨域，这里我配置了当匹配到有“/api/”开头的请求，就会转到spring boot的项目中处理。

运行效果如下图所示：