项目部署——SpringBoot+Vue部署上线
一、Vue打包+部署
1. 打包(npm run build:prod)
打完之后会在src同级目录下生成dist文件下,点开index.html页面在浏览器打开,==会发现报错==
解决步骤:
- 打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件
- 其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。
- 重新运行npm run build
2.nginx部署前端vue项目
-
把打完的dist文件夹拉至服务器(/home/laowang/lw-music/lw-music-client)
-
配置nginx.conf文件(/usr/local/webserver/nginx/conf/nginx.conf)
-
改下面2处地方
-
浏览器打开访问主机,看是否成功!
二、Springboot打包+部署
1.打包(mvn clean package)
-
mvn clean package,看到以下jar包即成功!
-
先在本地跑起来看是否能跑起来(java -jar ***)
启动命令为
//开发环境
java -jar ***.jar --spring.profiles.active=dev
//测试环境
java -jar ***.jar --spring.profiles.active=qa
//生产环境
nohup java -jar lw-music-server-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &
2.部署
-
把jar包拉到服务器
-
执行nohup java -jar lw-music-server-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod
-
cat nohup 日志文件看控制台是否成功运行
-
修改nginx配置,使120.78.211.205/music所有请求全部转发到8150端口
location /music/{ proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE_HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://120.78.211.205:8150/music/; }
-
linux开启防火墙对应端口和阿里云对应安全组端口(很重要)
==注意:nginx是如果匹配/music,则会把原有路径的/music截取掉,因此转发路径需要地址+匹配的路径==
三、大功告成!
坑爹一幕:nginx默认会过滤掉请求header中包含下划线的属性,这次把我的token截取掉了,坑爹!!!
解决办法:在nginx的http配置中加入以下:默认是off(不允许下划线属性)
underscores_in_headers on;
相关文章
- SpringBoot @ConfigurationProperties详解
- Jenkins+Docker 一键自动化部署 SpringBoot 项目
- springboot解决PUT请求接收不了参数
- SpringBoot配置Email发送功能
- Springboot+Vue前后端分离项目的部署
- 【SpringBoot】核心依赖和自动配置
- SpringBoot——关于banner
- SpringBoot与MybatisPlus整合之公用字段填充(十一)
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- springboot的@Configuration文件读取static静态文件
- 基于Java(SpringBoot)+Vue+MySQL 实现(Web)的网络课程平台【100010329】
- SpringBoot配置CORS处理前后端分离的跨域问题
- 基于Springboot+Vue+H5实现MiniTalk聊天APP
- springboot集成flowable oracle数据库版本报错
- Java学习-062-Springboot 采用war包启动设置
- vue实战入门后台篇十:springboot+mybatis实现网站后台-项目整合发布测试
- vue实战入门后台篇六:springboot+mybatis实现网站后台-前端登录功能对接
- vue实战入门后台篇九:springboot+mybatis实现网站后台-代码整合及重构优化
- vue实战入门后台篇四:springboot+mybatis实现网站后台-增删改查功能实现
- vue实战入门后台篇二:springboot+mybatis实现网站后台-登录鉴权功能实现
- 基于springboot+vue的“租房平台”程序设计实现【毕业论文,源码】
- SpringBoot加载配置文件(@PropertySource@importSource@Value)
- 浅析springboot的@Cacheable加入缓存@CacheEvict清除缓存及spEL表达式编写key
- 浅析如何使用Vue + Xterm.js + SpringBoot + Websocket / Stomp + JSch 实现一个 web terminal 网页版的终端工具
- springboot+vue社区维修平台(源码+文档)
- springboot+vue外卖点餐系统(源码+文档)
- springboot+vue在线答疑系统(源码+说明文档)
- maven利用springboot的配置文件进行多个环境的打包
- Springboot & MySQL & Mybatis 学生管理系统