我的编程空间,编程开发者的网络收藏夹
学习永远不晚

docker 中 nginx 提供的样式和图像在页面上不起作用

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

docker 中 nginx 提供的样式和图像在页面上不起作用

php小编柚子发现在使用docker中的nginx时,可能会遇到样式和图像无法在页面中正确显示的问题。这可能是由于配置问题或路径错误导致的。在解决这个问题之前,我们需要仔细检查nginx的配置文件和文件路径,确保正确设置和引用。接下来,我们将探讨一些常见的解决方法,帮助您解决这个烦恼的问题。

问题内容

我有一个 golang Web 应用程序,我决定在它前面使用 Nginx 来提供静态文件,并将其用作我的 Web 应用程序的反向代理。

Web 应用程序的 Dockerfile:

FROM golang:1.21.1

WORKDIR /app

COPY go.mod go.sum ./

RUN go mod download && go mod verify

COPY . ./

RUN go build -o ./bin/site ./cmd/site/main.go

CMD ["./bin/site"]

Docker 撰写文件:

version: '3'

services:
  nginx:
    image: nginx:1.25.2
    restart: always
    ports:
      - "80:80"
    volumes:
      - "./nginx.conf:/etc/nginx/nginx.conf:ro"
      - "./site/assets/:/app/assets/"

  site:
    build: ./site
    container_name: tmp-site
    restart: always
    volumes:
      - "./site/views:/app/views"

和 nginx 配置:

events {
    worker_connections 1024;
}

http {

    server {
        listen 80;
        server_name tmp.loc www.tmp.loc;

        location ~* \.(jpg|jpeg|png|gif|ico|css|js|html|svg)$ {
            root /app/assets/;

            expires max;
            access_log off;
        }

        location / {
            proxy_pass          http://tmp-site:5555;
            proxy_set_header    X-Forwarded-For      $proxy_add_x_forwarded_for;
            proxy_set_header    Host                 $host;
            proxy_set_header    X-Real-IP            $remote_addr;
        }
    }
}

在网页上我有两张图片,一张是png,一张是svg,css文件很简单,只包含background-color: lightblue作为body标签,还有js文件,它只是控制台记录字符串“Loaded!” 。使用 docker compose 启动容器后,我遇到以下问题:

  1. 静态文件是随机提供的,例如png 图像已显示,但 svg 未显示,css 样式未应用于页面,但 javascript 代码执行良好。有趣的是,所有静态文件都根据浏览器的开发工具网络选项卡成功获取,您可以检查其内容,是的,我尝试在没有缓存的情况下重新加载页面,但无济于事。这是什么魔法?
  2. 正如您在我的 docker compose 文件中看到的,我为 nginx 和 webapp 设置了卷,对于 nginx,它工作正常,每当我删除一些资产并重新加载页面而不缓存时,都会应用更改,但是当我更改时模板中的文本在页面上不可见,但如果我进入 webapp 的容器并检查模板的内容 - 它已更改,但在页面上它不可见,直到我使用 docker compose 重新启动容器。这里有什么问题吗?

完整代码在这里 - https://github.com/ivnku/tmp

解决方法

  1. go Fiber 的 模板 通过 Engine.Reload(true) 提供此功能:
// Reload the templates on each render, good for development
engine.Reload(true) // Optional. Default: false
  • 静态文件确实由 Nginx 提供,只是没有正确的 MIME 类型。在 nginx.conf 的 http 部分中包含 mime 类型将解决此问题:
  • http {
        include       /etc/nginx/mime.types;
    
        server {
            ...
        }
    }

    以上就是docker 中 nginx 提供的样式和图像在页面上不起作用的详细内容,更多请关注编程网其它相关文章!

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    docker 中 nginx 提供的样式和图像在页面上不起作用

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档

    猜你喜欢

    docker 中 nginx 提供的样式和图像在页面上不起作用

    php小编柚子发现在使用docker中的nginx时,可能会遇到样式和图像无法在页面中正确显示的问题。这可能是由于配置问题或路径错误导致的。在解决这个问题之前,我们需要仔细检查nginx的配置文件和文件路径,确保正确设置和引用。接下来,我们
    docker 中 nginx 提供的样式和图像在页面上不起作用
    2024-02-09

    编程热搜

    • Python 学习之路 - Python
      一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
      Python 学习之路 - Python
    • chatgpt的中文全称是什么
      chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
      chatgpt的中文全称是什么
    • C/C++中extern函数使用详解
    • C/C++可变参数的使用
      可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
      C/C++可变参数的使用
    • css样式文件该放在哪里
    • php中数组下标必须是连续的吗
    • Python 3 教程
      Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
      Python 3 教程
    • Python pip包管理
      一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
      Python pip包管理
    • ubuntu如何重新编译内核
    • 改善Java代码之慎用java动态编译

    目录