SpringBoot + Vue + nginx项目一起部署

SpringBoot + Vue 一起部署到 nginx

1.后端项目部署：

（1） Java项目打包上传到服务器，开启服务

java -jar *****.jar --server.port=8080

（2） vue项目打包，拷贝dist下的static和index.html到/usr/local/nginx/html目录下

(3) 安装Nginx，参考https://blog.csdn.net/qq_22027637/article/details/81776092，安装好后配置nginx，打开/usr/local/nginx/conf/nginx.conf，配置如下：

events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
# 404页面跳转
location / {
try_files $uri /index.html;
}
# 静态资源目录，即vue打包后的dist里的静态资源
root /usr/local/nginx/html;
index index.html index.htm;
# 后端服务的配置
location /api/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 后端服务地址
proxy_pass http://localhost:8080/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}

（4）输入ip地址或域名即可访问

----------------------------------

1.nginx安装参照https://blog.csdn.net/qq_22027637/article/details/81776092

2.将springboot项目打包上传到服务器，开启服务

启动springboot项目可以用二种方式：（1）nohup java -jar demo.jar &

（2）nohup java -jar demo.jar & > log.file 2>&1 &

3.vue项目打包上传到服务器: npm run build

打包后会生成静态页面，在项目根路径的dist文件夹下面，将该文件夹移到服务器的某个目录下，我这里是/root/ncp

4.修改nginx配置文件,配置文件默认是/usr/local/nginx/conf/nginx.conf

location / {
root /root/vueproject/dist; //vue项目部署路径
try_files $uri $uri/ /index.html last; //解决页面刷新404问题
index index.html index.htm；
}

另外在nginx配置文件nginx.conf头部加上user root;

重启nginx，进入/usr/local/nginx/sbin

./nginx -s reload

访问http://ip:nginx端口号,例如http:127.0.0.1/9000，即可访问页面，至此vue项目前台就部署完成了

再次修改nginx配置文件nginx.conf，在nginx.conf中增加

location /manager/ {
proxy_pass http://127.0.0.1:9006/; //springboot项目端口
}

重启nginx

访问http://ip:nginx端口号，即可实现与后台交互