vue项目前后端部署
一.前端打包
1. 前端本地打包:
npm run build
2.生成dist目录包
3.打成zip包后上传到服务器
二.部署到nginx
1.修改nginx配置文件
vim /etc/nginx/nginx.conf
2.新增server配置项
server { listen 8080; #1.你想让你的这个项目跑在哪个端口 server_name 10.200.200.251; #2.当前服务器ip location / { root /home/dist/; #3.dist文件的位置(我是直接放在home目录下了) try_files $uri $uri/ /index.html; #4.重定向,内部文件的指向(照写),解决vue的mode为history时,报404问题 } location /api { #4.当请求跨域时配置端口转发 proxy_pass http://10.210.235.252:8848/api; #5.转发地址 } }
注意: 标黄色部分是配置转发到后端的服务,即当页面访问http://168.0.0.1:8080/api时,nginx会转发到http://168.0.0.2:8848/api这个地址,即这个是后端的地址.
问题: vue的mode是hisotry时报404,解决如下:
location / {
root D:\Test\exprice\dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
三.后端配置
1.在application.yml文件中配置:默认所有api请求都要加一个前缀/api才能访问到
#server配置 server: max-http-header-size: 4048576 # servlet.context-path: /api port: 9848
2.springboot打成jar包: mvn install -Dmaven.test.skip=true
3.放到服务器上10.210.235.252
4.启动jar包:
nohup ${JAVA_HOME}/bin/java -jar tds.service.jar --spring.profiles.active=prod -Xmx2g -Xms2g -XX:PermSize=128m -XX:MaxPermSize=256m -XX:+DisableExplicitGC -XX:+UseParNewGC -XX:+UseConcMarkSweepGC -XX:+PrintGCDetails -XX:+PrintTenuringDistribution -XX:+PrintGCTimeStamps -XX:+HeapDumpOnOutOfMemoryError -XX:HeapDumpPath=logs/dumps -jar $APP_NAME > /dev/null 2>&1 &
以上,即可完成前后端部署配置
location / {
root D:\Test\exprice\dist;
index index.html index.htm;
try_files $uri $uri/
/index
.html;
posted on 2020-03-11 22:05 zhulibin2012 阅读(1938) 评论(0) 编辑 收藏 举报