SpringBoot + Vue + nginx项目一起部署
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端口號，即可實現與后臺交互
?
總結
以上是生活随笔為你收集整理的SpringBoot + Vue + nginx项目一起部署的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 初识区块链——用JS构建你自己的区块链
- 下一篇： vue实战第一课：天气查询