问答

关于不同域名下相同资源文件访问的nginx配置问题

作者:admin 2021-05-15 我要评论

现在情况如下: 1,webpack打包的前端单页面应用,publicPath为: /myproject 2,两个docker,内部的nginx配置文件必须一致,且都将挂载webpack打包的静态资源。...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

现在情况如下:
1,webpack打包的前端单页面应用,publicPath为:/myproject
2,两个docker,内部的nginx配置文件必须一致,且都将挂载webpack打包的静态资源。
3,两个docker外部访问域名分别为http://xxx.xx.x/http://xxx.xx.x/myproject
4,两个docker内部的nginx关键配置如下:

    location /myproject {
        rewrite ^/myproject\/?(.*)$ /$1;
        try_files $uri $uri/ /index.html?$args;
    }

    location / {
        try_files  $uri $uri/ /index.html?$args;
    }

现在http://xxx.xx.x/没有问题,但是http://xxx.xx.x/myproject访问不行,求大神帮忙看看,docker内的nginx配置怎么写,webpack的打包配置也可以改,现在头都挠凸了,好几天了,解决不了...,求大神帮忙看看,万分感谢!!!

###

终于成功了,折磨了我一周,最终改动如下:
针对webpack配置:

    output: {
        publicPath: '/myproject/'
    }

针对file-loader,主要问题是css中引入的图片加载不出来,需要在file-loader的option中加如下配置:

loader: 'file-loader',
options: {
    esModule: false,
    outputPath: 'image',
    publicPath: '../myproject/image',
}
//我的图片最终全部打包放在了dist/image下

其中最折磨我的是一个我万万没想到的地方,需要在webpack指定的index.html的head中添加如下标签:

<base href="/myproject/" />

其实我一直发现,后台服务当收到请求时,一直把myproject当成api地址的一部分,其实它是域名的一部分,加的这个html标签其实就是解决了这个问题

最后是nginx配置,其实没有太多的配置,都很基础

    location ~* /myproject {
        rewrite ^/myproject\/?(.*)$ /$1;
    }

    location / {
        try_files  $uri $uri/ /index.html?$args;
    }

意思是如果请求地址以/myproject开头,就去掉/myproject,进而进入第二个location项,try_files主要是配合前端的vue-router的history模式去掉#用的。

###

前一个location里需要加一个root指令指定一下这个项目的根目录

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 请问下prometheus怎么进行自定义的按业

    请问下prometheus怎么进行自定义的按业

  • 节流函数为什么,点击无效,监听窗口大

    节流函数为什么,点击无效,监听窗口大

  • express访问静态资源失败

    express访问静态资源失败

  • IE 浏览器下 match 方法报错

    IE 浏览器下 match 方法报错

腾讯云代理商
海外云服务器