nginx挂载前端项目后页面样式不对 nginx部署前端vue

转载

jiecho 2024-07-24 10:38:32

文章标签 nginx挂载前端项目后页面样式不对前端 vue nginx 服务器 文章分类 运维

曾经有人给我讲，所谓个人技术是死磕出来的，只有经过不断的试错和解决过程所有问题，以及不断变换思路去解决一件问题的过程，就是个人技术的成长。

最近在给自己搭建的小服务加一个bolg模块，在网上大概看了下轻量级的框架，最后使用vueQuill富文本编辑器，期间产生诸多问题，经过3天时间，基本解决，仅以此记录解决过程，给需要的人提供思路。

网站地址：TestManagePlatform

旧版的部署方式：

整个前端服务放到服务器,容器镜像打包，npm run serve 方式启动

niginx 配置

map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
}

server{
      listen       443 ssl;
      server_name    前端服务.top;
      ssl_certificate /etc/nginx/conf/8673314_datafactory.metaversed.top.pem;
      ssl_certificate_key /etc/nginx/conf/8673314_datafactory.metaversed.top.key;
      ssl_session_cache    shared:SSL:1m;
      ssl_session_timeout  5m;
      server_tokens off;
      fastcgi_param   HTTPS                  on;
      fastcgi_param   HTTP_SCHEME            https;
      access_log /var/log/nginx/access.logs;
    
      if ($host ~ "\d+\.\d+\.\d+\.\d") {
        return 404;
        }
      location / {
          proxy_pass         http://你的服务器本地地址:8000/;
          proxy_redirect     default;
          proxy_http_version 1.1;
        }
   }
server{
      listen       80;
      listen       443 ssl;
      server_name    后端服务.top;
      ssl_certificate /etc/nginx/conf/9374020_good.metaversed.top.pem;
      ssl_certificate_key /etc/nginx/conf/9374020_good.metaversed.top.key;
      server_tokens off;
      fastcgi_param   HTTPS                  on;
      fastcgi_param   HTTP_SCHEME            https;
      access_log /var/log/nginx/access.logs;

      if ($host ~ "\d+\.\d+\.\d+\.\d") {
        return 404;
        }
      location / {
          proxy_pass         http://你的服务器本地地址:8088/;
          proxy_redirect     default;
          proxy_http_version 1.1;
        }
   }

这个方式有很多问题：

1、整体包内容比较大，加载时间长。

2、服务器环境npm install 时依赖包安装版本可能存在不一致情况，出现问题不好分析。

3、一些资源文件加载路径问题会导致服务启动不起来。

本次出现问题在于，本地调试完成后,由于引入

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

服务器提示：找不到'@vueup/vue-quill' 和'@vueup/vue-quill/dist/vue-quill.snow.css'

由于是docker 先打镜像包，在启动docker-compose 文件,一开始怀疑是文件路径不识别。

折腾许久后，发现是镜像包没有把相关新增依赖加上。于是开始调试DockerFile

FROM node
WORKDIR /root
COPY ./ .
RUN npm install

最后发现npm install 依赖时候除了很多错。大概率都是依赖安装失败。

于是决定永久避开这个坑，采用静态文件方式部署前端

静态文件方式部署前端

1、前端vue.config.js 配置

module.exports = {
    lintOnSave:false,
// 这里一定一定记得配置为‘/’而非“./”
    publicPath:"/",
    devServer: {
        port:8000,
        proxy: {  //配置跨域
            '/api':{
                 target: 'http://127.0.0.1:8088/',  
                //这里后台的地址模拟的;应该填写你们真实的后台接口
                changeOrigin: true,   //允许跨域
                // ws: true, // proxy websockets
                pathRewrite: {
                    '^/api': ''
                },
                host: '0.0.0.0',
            }
        }
    }
}

2、打静态包dist

npm run build

执行完成后项目多一个dist 包

nginx挂载前端项目后页面样式不对 nginx部署前端vue_前端

4、将整个包文件放入niginx 配置的index 入口目录下去，并更新niginx.config 文件

新的配置方式：

server {
        listen       80;
        listen       443 ssl;
        server_name  前端域名.top; #域名
        ssl_certificate /etc/nginx/conf/8673725_www.metaversed.top.pem;
        ssl_certificate_key /etc/nginx/conf/8673725_www.metaversed.top.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        fastcgi_param   HTTPS                  on;
        fastcgi_param   HTTP_SCHEME            https;
        access_log /var/log/nginx/access.logs;
    location / {
        root  /html;
        index  index.html index.htm; #默认访问的首页内容
        try_files $uri $uri/  @router; 
        }
    location @router {
       #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
       #因此需要rewrite到index.html中，然后交给路由在处理请求资源
       rewrite ^.*$ /index.html last;
       }
    location /api/ {
          proxy_set_header Host $http_host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_pass         http://服务器本地地址:8088/;
        }
}