vue dist tomcat部署 + nginx

最新推荐文章于 2024-10-16 15:58:42 发布

一只野生程序猿啊

最新推荐文章于 2024-10-16 15:58:42 发布

阅读量6.5k

点赞数

分类专栏： Nginx 文章标签： vue nginx 部署 tomcat

本文链接：https://blog.csdn.net/qq_22638399/article/details/86713512

版权

Nginx 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

第一次接外包。一个产品，一个前端，一个后端，一个UI。采用前后端分离开发，我主要负责写接口，服务器发布。

开发环境

IDEA
Win7

项目技术

Spring + boot + shiro + vue

服务器

腾讯云 Ubuntu

部署vue

1.首先：将前端项目打包成静态文件【dist.rar】。
在这里插入图片描述

2.服务器准备一个tomcat
在这里插入图片描述
修改tomcat端口为8085
/conf/server.xml

 <Connector port="8085" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />

3.切到tomcat - ROOT目录下

root@VM-0-14-ubuntu:/opt/project/apache-tomcat-vue# vim conf/server.xml 
root@VM-0-14-ubuntu:/opt/project/apache-tomcat-vue# cd webapps/ROOT/
root@VM-0-14-ubuntu:/opt/project/apache-tomcat-vue/webapps/ROOT# rz -y       # 将dist.rar上传到服务器
root@VM-0-14-ubuntu:/opt/project/apache-tomcat-vue/webapps/ROOT# unrar x dist.rar    #解压dist.rar

4 启动tomcat

root@VM-0-14-ubuntu:/opt/project/apache-tomcat-vue# cd bin
root@VM-0-14-ubuntu:/opt/project/apache-tomcat-vue/bin# ./startup.sh   #启动tomcat
root@VM-0-14-ubuntu:/opt/project/apache-tomcat-vue/bin# ps -ef | grep java    #查看启动的java进程

到了这一步，我们可以使用服务器ip + 端口号 + index.jsp，查看tomcat是否启动成功

tomcat启动成功后，localhost:8085/对应的就是/webapps/目录。
localhost:8085/index.jsp 也就是访问/webapps/ROOT/index.jsp页面。
那么访问dist下面的index.html，就这样访问localhost:8085/dist/index.html

5.配置nginx
在这里插入图片描述
vim default

server {
  listen 8085;
  #server_name feiyu.api.xiangjiangcheng.cn; # 你的域名或者 ip
  server_name 132.232.54.105 localhost;
  #root /opt/axure/3d; # 你的克隆到的项目路径
  #index index.html; # 显示首页
  #location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){
   # root /opt/axure/3d;
  #} # 静态文件访问
  location / {
     proxy_pass http://127.0.0.1:8085;    #这里指定本地8085端口
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
    # proxy_set_header Connection 'upgrade';
     proxy_set_header Host $host;
     proxy_cache_bypass $http_upgrade;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Real-Port $remote_port;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     #proxy_set_header   Connection "";
     client_max_body_size 250m;
  }
 error_page   500 502 503 504  /50x.html;

 location = /50x.html {
         #root   html;
         root   /var/www/html/upgrading.html;
  }
}

6.检测nginx，
nginx -t #检测配置文件
nginx -s reload #nginx重读配置文件

7.访问
localhost:8085/dist/index.html

打开浏览器，f12。发现js，css都加载失败，404。
在这里插入图片描述
js访问路径，没有加上dist，导致404访问不到。解决方法：我们直接将dist文件夹下面的static文件复制到webapps/目录下面，就可以访问到了。其实，前端vue在打包的时候应该是可以配置路径的？？？？？？？我没用过vue，暂时还不得而知！