spingboot+Vue前后端分离部署到阿里云上

置顶 Rk..

已于 2023-03-31 13:46:32 修改

阅读量3.3k

点赞数 4

分类专栏：项目部署 Springboot 文章标签： vue.js spring boot

于 2021-12-25 21:02:42 首次发布

本文链接：https://blog.csdn.net/m0_46979453/article/details/122142338

版权

Springboot 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

项目部署

1 篇文章 0 订阅

订阅专栏

1、将本地数据库导入到服务器上的数据库上

1.1在服务器上创建名为book的数据库

1.2、创建完成后本地使用Navicat连接到阿里云上的数据库

1.3、执行sql脚本

2、部署后端项目，Spingboot项目

2.2、上传jar包后,让jar包在服务器后台运行

2.3、开启阿里云安全组的9000端口号,防火墙放行9000端口

4.1、将前端项目打包后放入后端项目的resources/static目录下

4.2、去pom.xml中标签中添加如下配置

4.3、配置路由映射，放行需要的静态资源

4.4、打jar包上传到服务器就可以直接访问了

1、将本地数据库导入到服务器上的数据库上

1.1在服务器上创建名为book的数据库

1.2、创建完成后本地使用Navicat连接到阿里云上的数据库

1.3、执行sql脚本

2、部署后端项目，Spingboot项目

2.1、修改配置文件,打jar包

2.2、上传jar包后,让jar包在服务器后台运行

nohup java -jar blog-web-2.2.5.jar &

启动服务后，按两下回车,下图是启动成功的正常现象，不是报错哈~

完成启动后，因为我这个项目是用的9000这个端口，如果不放心，项目是否正常启动，可以查看9000端口是否工作:lsof -:端口号

如果关闭项目，直接杀掉后台进程:kill PID

2.3、开启阿里云安全组的9000端口号,防火墙放行9000端口

现在访问后端项目，肯定是访问不成功的，博主当时就因为阿里云的安全组设置端口没有开启，卡了半天

2.3.1、开启安全组

2.3.2、防火墙放行9000端口

开端口命令：firewall-cmd --zone=public --add-port=9000/tcp --permanent
重启防火墙：systemctl restart firewalld.service
 
命令含义：
 
--zone #作用域
 
--add-port=80/tcp  #添加端口，格式为：端口/通讯协议
 
--permanent   #永久生效，没有此参数重启后失效

还有一种就是比较直接的方法，就是关闭防火墙:systemctl stop firewalld(暂时关闭)

2.3.3、测试后端项目是否部署成功

如上图，如果能访问的资源，说明后端项目部署成功!

3、部署前端项目

3.1、修改前端项目

将前端项目中所有的访问链接都改为:部署的服务器的ip+端口号/api/xxx

api是你上面后端项目的虚拟路径

3.2、打包前端项目并上传

npm run build进行打包

3.3、配置nginx文件

3.3.1、宝塔面板上一键安装nginx

安装完成后点击设置进行配置

3.3.2、nginx配置文件结构

3.3.3、修改nginx配置文件

这一步非常关键，是前后端联合的重要步骤

在这 include之前添加一个server,开启一个监听端口，我这里定义一个999端口，记得要开启该端口安全组和防火墙放行该端口

 server
    {
        listen 999;#这个server监听的端口是999
        server_name  localhost;#这里可以是域名
        
        location / {
            root   /www/book/book-yun-api/dist;#前端资源的根目录
            index  index.html index.htm;
        }
    

#请求后端的/api下的接口会做下面的操作，这个根据自己的项目来定   
  	location /api/ {
			proxy_pass http://114.55.238.138:9000$request_uri;
			#这个是 服务器地址+后端jar包运行在的端口号+$request_uri
			proxy_set_header  Host $host:$server_port;
			#如果监听的是80端口  proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header  X-real-ip $remote_addr;
			proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
		}
		#处理错误页面
		error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /www/book/book-yun-api/dist;
        }
		}

反向代理:访问999端口/(根目录)可以直接访问到前端资源。访问Nginx的服务器的999端口下的/api会反向代理到114.55.238.138服务器的9000端口上。

配置负载均衡:可以加更多的路径 location/api/list/ 代理到其他的服务器上

需要修改的地方:

1、listen:监听的端口可以自己定义 如果监听的是80端口 proxy_set_header Host $host;

2、server_name 写你的域名即可，通过该域名访问服务器中的项目;//没有域名填localhost 这里的意思就是通过服务器的ip+监听端口访问==通过域名访问

3、location /xx/ xx替换为你部署的后端项目的虚拟路径，前端代码中所有的链接都是该后端服务器的ip+后端项目jar包。如果我们后端部署在其他服务器上，那么前端代码访问的连接都要换为部署后端项目的服务器ip+后端项目端口号

4、root 上传的前端dist文件夹的根路径。ip+监听端口直接会找到前端资源

5、prox_pass:部署后端项目的服务器ip+后端jar包运行在的端口号+$request_uri

这里后端api服务器的地址。此地址可以是其他机器，不一定要和nginx在同一台机器中。

这里就nginx的反向代理,就是所有经过/api的请求都会被代理访问后端项目

此时访问:http://114.55.238.138:999/api/doc.html 进入的是同一页面则说明没有问题

3.4、测试项目是否部署成功

访问:front-book

4、部署方式二

4.1、将前端项目打包后放入后端项目的resources/static目录下

4.2、去pom.xml中 <build>标签中添加如下配置

         <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*</include>
                </includes>
                <filtering>false</filtering>
            </resource>

加上了这些，重新build项目。去target目录中查看是否存在这些静态资源

4.3、配置路由映射，放行需要的静态资源

如果不配置就无法访问index.html，不仅要放行index.html,还要放行前端打包的所有的静态资源，否则进入了index.html 也无法加载其他信息

package com.rk.admin.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfigurer implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //获取项目在本机上的路径   动态获取
        String ValuePath = System.getProperty("user.dir");
        //教师头像存储的真实路径
        String tecacherPath=ValuePath+"/src/main/resources/image/teacherHeadImg";
        //文章图片存储的真实路径
        String articPath=ValuePath+"/src/main/resources/image/articImg";
        //轮播图图片存储的真实路径
        String lunPath=ValuePath+"/src/main/resources/image/lunImg";
        
        //放行上传到后端的图片
        //将路由/teacherImg/** 映射到真实路径
        registry.addResourceHandler("/teacherImg/**").addResourceLocations("file:"+tecacherPath+"/");
        //将路由/articImg/** 映射到真实路径
         registry.addResourceHandler("/articImg/**").addResourceLocations("file:"+articPath+"/");
        //将路由/lunImg/** 映射到真实路径
        registry.addResourceHandler("/lunImg/**").addResourceLocations("file:"+lunPath+"/");

        //放行 前端打包的静态资源
        //放行index.html
        registry.addResourceHandler("/static/**").
                addResourceLocations("classpath:/static/");
        //放行js
        registry.addResourceHandler("/js/**").
                addResourceLocations("classpath:/static/static/js/");
        //放行css
        registry.addResourceHandler("/css/**").
                addResourceLocations("classpath:/static/static/css/");
        //放行fonts
        registry.addResourceHandler("/fonts/**").
                addResourceLocations("classpath:/static/static/fonts/");
        //放行img
        registry.addResourceHandler("/img/**").
                addResourceLocations("classpath:/static/static/img/");


        WebMvcConfigurer.super.addResourceHandlers(registry);
    }


}

重新启动项目再次访问:

除了上面这种静态资源放行的方式，还有下面这种通过application.yml文件来配置放行。

在application.yml中就配置如下:
spring:
  resources:
    static-locations: classpath:/static/

4.4、打jar包上传到服务器就可以直接访问了

5、nginx配置案例

场景:有两个后端服务服务，一个是service_cmn字典服务，一个是service_hosp服务。service_hosp服务部署到本地、service_cmn服务部署到服务器。前端和nginx也在本地启动。

service_cmn服务接口都是/admin/cmn/开头的,端口是8202

service_hosp服务接口都是/admin/hosp/开头的，端口是8201

nginx配置如下:

	server {
        listen       9001;
        server_name  localhost;

	location ~ /hosp/ {           
	    proxy_pass http://localhost:8201;
	}
	location ~ /cmn/ {           
		proxy_pass http://服务器ip:8202;
	}

nginx监听的是本地的9001端口，这时启动前端，配置前端的访问接口的路径为http://localhost:9001

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:9001"',
})

当前端请求字典接口时:

@RestController
@CrossOrigin
@RequestMapping("/admin/cmn/dict")
public class DictController {

    @Autowired
    private DictService dictService;

    @ApiOperation("查询当前节点下的子节列表")
    @GetMapping("/findChildData/{id}")
    public Result findChlidData(@PathVariable Long id){
        List<Dict> chlidData = dictService.findChlidData(id);
        return Result.ok(chlidData);
    }

}

http://localhost:9001/admin/cmn/dict/findChildData/1通过Nginx反向代理会变为:

http://服务器ip:8202/admin/cmn/dict/findChildData/1

Rk..

关注

4
点赞
踩
30

收藏

觉得还不错? 一键收藏
打赏
1
评论
spingboot+Vue前后端分离部署到阿里云上

目录1、将本地数据库导入到服务器上的数据库上 1.1在服务器上创建名为book的数据库 1.2、创建完成后本地使用Navicat连接到阿里云上的数据库 1.3、执行sql脚本2、部署后端项目，Spingboot项目 2.2、上传jar包后,让jar包在服务器后台运行 2.3、开启阿里云安全组的9000端口号,防火墙放行9000端口 2.3.1、开启安全组......
复制链接

扫一扫