本文已参与「新人创作礼」活动，一起开启掘金创作之路。
目录
1.2、创建完成后本地使用Navicat连接到阿里云上的数据库
2.3、开启阿里云安全组的9000端口号,防火墙放行9000端口
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);
}
}重新启动项目再次访问:
4.4、打jar包上传到服务器就可以直接访问了
