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，配置如下：

1. events {

2. worker_connections 1024;

3. }

4.  
5.  

6. http {

7. include mime.types;

8. default_type application/octet-stream;

9. sendfile on;

10.  

11. keepalive_timeout 65;

12.  

13. server {

14. listen 80;

15. server_name localhost;

16.  

17. # 404页面跳转

18. location / {

19. try_files $uri /index.html;

20. }

21.  

22. # 静态资源目录，即vue打包后的dist里的静态资源

23. root /usr/local/nginx/html;

24. index index.html index.htm;

25.  

26. # 后端服务的配置

27. location /api/ {

28. proxy_redirect off;

29. proxy_set_header Host $host;

30. proxy_set_header X-Real-IP $remote_addr;

31. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

32. # 后端服务地址

33. proxy_pass http://localhost:8080/;

34. }

35.  
36.  

37. error_page 500 502 503 504 /50x.html;

38. location = /50x.html {

39. root html;

40. }

41. }

42.  

43. }

（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

1. location / {

2. root /root/vueproject/dist; //vue项目部署路径

3. try_files $uri $uri/ /index.html last; //解决页面刷新404问题

4. index index.html index.htm；

5. }

另外在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中增加

1.  

2. location /manager/ {

3. proxy_pass http://127.0.0.1:9006/; //springboot项目端口

4. }

重启nginx

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