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端口号,即可实现与后台交互