vue dist tomcat部署 + nginx

淡淡的烟草味﹌ 2022-03-21 07:08 254阅读 0赞

### 前言 ###

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

### 开发环境 ###

IDEA  
Win7

### 项目技术 ###

Spring + boot + shiro + vue

### 服务器 ###

腾讯云 Ubuntu

### 部署vue ###

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

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

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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNjM4Mzk5_size_16_color_FFFFFF_t_70 1]  
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。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNjM4Mzk5_size_16_color_FFFFFF_t_70 2]  
js访问路径，没有加上dist，导致404访问不到。解决方法：我们直接将dist文件夹下面的static文件复制到webapps/目录下面，就可以访问到了。其实，前端vue在打包的时候应该是可以配置路径的？？？？？？？我没用过vue，暂时还不得而知！

[2019013111304575.png]: /images/20220321/b3e64016faf64953b748147a15816983.png
[20190131113109639.png]: /images/20220321/941a38b29e82422697a31750e07a8056.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNjM4Mzk5_size_16_color_FFFFFF_t_70]: /images/20220321/791a8f253b28452a8ab07d7a73cca6f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNjM4Mzk5_size_16_color_FFFFFF_t_70 1]: /images/20220321/bdaff234a4ea4e808257e61aed435b1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyNjM4Mzk5_size_16_color_FFFFFF_t_70 2]: /images/20220321/11e18100add34a0fbba8d7356462b328.png