将springboot、vue项目部署在nginx上并且动静分离

Nginx 动静分离简单来说就是把动态跟静态请求分开，不能理解成只是单纯的把动态页面和静态页面物理分离。严格意义上说应该是动态请求跟静态请求分开，可以理解成使用 Nginx 处理静态页面，Tomcat 处理动态页面。动静分离从目前实现角度来讲大是纯粹把静态文件独立成单独的域名，放在独立的服务器上，也是目前主流推崇的方案。

Cao_XinYang

692人浏览 · 2024-08-22 22:45:10

Cao_XinYang · 2024-08-22 22:45:10 发布

动静分离

打包

静态

我们需要拿到前端项目的静态资源，也就是前端项目里面的css、js等等等等，然后放到我们的服务器上，然后配合我们的nginx启动后在页面上就可以访问我们的前端页面了

首先拿到我们的静态资源，我们先打开我们的前端页面，条件是可以运行且运行成功的

要修改的一点也就是把这个要访问的路径改为我们linux上自己的ip地址

打开我们的终端输入我们拿静态资源的命令进行对前端页面打包

npm run build

输入完之后我们的左上角文件夹那里会出现dist的一个文件夹，也就打包完成了

然后我们就可以将这个dist文件夹拖入我们linux里的文件夹里

动态

动态资源也就是我们常说的jar包，我们需要将我们的后端项目给打成jar包或者war包，然后放在我们服务器上配合我们的前端一起使用

打开我们的后端项目，点击右边的maven

点击第一个文件夹，里面有clean和package，先点击clean清除一下，然后点击package

等运行完毕之后，我们左上角的target文件夹里就会多出一个boot.jar的一个包

将这个包放到我们的linux文件夹里

现在动态静态两个包我们全拿到了，拿到之后我们需要去linux上去配置我们的nginx

配置nginx

1.进入nginx的conf配置文件里

/opt/nginx/nginxserver/conf

2.配置conf文件

静态：

（1）：/ 代表所有

location /{
            root   /usr/project/dist;#静态资源的位置
            index  index.html index.htm;#要访问的文件
 }

（2）：/dist 文件的名字

location /dist {
            root   /usr/project;#静态资源的位置
            index  index.html index.htm;#要访问的文职
        }

（3）：/自取名字

location /aaa {
            alias   /usr/project/dist;#静态资源的位置
            index  index.html index.htm;#要访问的文职
        }

配好静态资源后我们就去配置我们的动态资源

location /bbb/ {
            proxy_pass   http://192.168.227.99:8999/;#http后面跟的是我们访问的路径并且bbb是
                                                     #和前端项目里我们的ip地址后面的/bbb是一样的
}