核心要点:部署后台项目
1.配置jdk环境
1.先将jdk的Linux版本的压缩包上传虚拟机中服务器
2.解压上传的jdk压缩包 tar -zxvf jdk.gz
3.先进入jdk的解压目录,再通过pwd查看当前解压包的路径
4.将 解压包路径 配置到 /etc/profile
5.更新环境变量 source /etc/profile
6.测试 java -version
2.配置tomcat环境
1.先将tomcat的Linux版本的压缩包上传虚拟机中服务器
2.解压上传的tomcat压缩包 tar -zxvf tomcat.gz
3.进入 tomcat/bin执行 ./startup.sh
4.默认防火墙是开启的,需要开放8080端口
5.刷新防火墙规则
6.测试 http://ip:8080
3.配置MySQL环境
1.先将MySQL的Linux版本的安装包上传虚拟机中服务器
2.先查询是否存在默认的数据库,如果有就删掉
3.创建一个mysql5.7,将上传的安装包解压到指定目录
4.执行4个命令
npm -ivh
5.查看MySQL中的日志文件,获取初始化的登录密码
6.登录MySQL,降低密码的设置等级,设置密码设置的长度
7.setpassword修改密码,flush privilege
8.此时外界不能链接,需要授权给root用户
9.开放3306端口
10.测试 Navicat
4.项目部署的流程
1.先在本地启动项目,确定访问状况良好
2.修改pom.xml中packaging为war,在通过maven clean清除掉
target目录下的编译文件,再通过maven install将项目打包
3.将ssm.war上传到虚拟机中的tomcat/webapp/...
4.确定包虚拟机中的数据库是存在对应项目所需要用到的数据
5。tomcat/bin/startup.sh
核心目标:部署前端项目
1.Nginx简介
1.负载均衡:流量分摊
2.反向代理:处理外网访问内网问题
3.动静分离:判断动态请求还是静态请求,选择性的访问指定服务器
2.Nginx使用
默认端口是80
http://localhost:8080/ssm
http://localhost:80/ssm
http://localhost/ssm
/etc/nginx/nginx.conf 配置上游服务upstream
/etc/nginx/conf.d/default.conf
3.Nginx部署项目
1.确保前台项目能用
2.将前台项目打包 npm run build (测试本地项目打包后没问题)
build/utils.js
config/index.js
3.做ip/host主机映射
将虚拟机ip映射域名www.zking.com
4.完成Nginx动静分离的default.conf的相关配置
定义规则:URL符合xxx标准走动态请求,不符合走静态请求
^~api
5.将前台项目打包 npm run build (配合Nginx动静分离)
注意:修改action.js 地址,添加api的路径配置
6.将前端构建好的dist项目,上传到云服务器/usr/local/...
7.server{
server_name:www.zking.com
root:/usr/local/mypro/dist
}
8.systemctl restart nginx
9.www.zking.com完成整个前后端分离项目的测试
http://localhost:8080/T216_SSH/vue/treeNode 动态请求 http://192.168.195.143:8080/T216_SSH/vue/articleAction_list.action @requestMapping("/vue") Controller @requestMapping("/treeNode") menus() http://localhost:8080/T216_SSH/static/css/layui.css http://localhost:8080/T216_SSH/static/js/layui.js http://localhost:8080/T216_SSH/static/img/sign.png http://192.168.195.143/ http://192.168.195.143/index.html 解析Nginx.conf location / { #该句代码是为解决history路由不能跳转的问题,在vue-router官网有介绍 try_files $uri $uri/ /index.html; } http://192.168.195.143/ http://tomcat_list location / { #root /usr/share/nginx/html; #proxy_pass http://172.17.0.3:8080; proxy_pass http://tomcat_list; index index.html index.htm; } 原始的用户 http://192.168.195.143:8080/api/T216_SSH/vue/articleAction_list.action # 代理配置 location / { #该句代码是为解决history路由不能跳转的问题,在vue-router官网有介绍 try_files $uri $uri/ /index.html; } location ^~/api/ { #^~/api/表示匹配前缀是api的请求,proxy_pass的结尾有/, 则会把/api/*后面的路径直接拼接到后面,即移除api proxy_pass http://tomcat_list/; } http://tomcat_list/T216_SSH/vue/articleAction_list.action upstream tomcat_list { #服务器集群名字 server 127.0.0.1:8080 weight=1; #服务器1 weight是权重的意思,权重越大,分配的概率越大。 server 127.0.0.1:8081 weight=1; #服务器2 weight是权重的意思,权重越大,分配的概率越大 } http://192.168.195.143:8080/T216_SSH/vue/articleAction_list.action 最终效果:www.zking.com/ listen 80; #监听80端口,可以改成其他端口 #server_name localhost; #当前服务的域名 server_name www.zking.com; #当前服务的域名(虚拟域名也可以) root /usr/local/mypro/dist; #将要访问的网站的根目录,nginx节点会自动继承父节点的配置;这里放到/usr/local/*,放到其他路径下会有权限相关问题;必要的时候配置Nginx.conf的user为root http://192.168.195.143/ http://localhost:8080/T216_SSH/static/img/sign.png usr/local/mypro/dist/index.html