Docker中Nginx托管的静态资源异常及模板热更新失效问题咨询

环境配置 #

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 Compose配置 #

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未生效，JS执行正常；浏览器网络请求显示资源均已获取，清缓存刷新无效。
• 模板热更新失效：Nginx挂载资源修改后刷新即生效，但Web应用的views模板修改后，容器内文件已更新，页面需重启容器才显示更改。

解决方案 #

问题1：静态资源加载异常处理 #

1. 补充MIME类型配置：在Nginx的http块中添加默认MIME类型引用，确保SVG、CSS等资源的MIME类型被正确识别：

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    
    # 原有server配置...
}

默认Nginx的mime.types文件已包含常见资源类型，未引入会导致浏览器无法正确解析SVG、CSS。

2. 调整缓存策略：开发阶段禁用静态资源缓存，避免旧资源干扰，将expires max;替换为：

expires 0;
add_header Cache-Control "no-cache, no-store, must-revalidate";

3. 验证路径正确性：确认Nginx配置的root /app/assets/与容器内静态资源实际路径一致，检查SVG、CSS文件是否存在于对应目录。

问题2：模板热更新失效处理 #

Golang应用默认会将模板加载至内存，启动后不会自动读取磁盘修改，需修改模板加载逻辑：

1. 每次请求重新加载模板（开发环境）：将模板加载逻辑从启动时一次性加载改为请求时实时读取：

func renderTemplate(w http.ResponseWriter, tmpl string) {
    t, err := template.ParseFiles("./views/" + tmpl + ".html")
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
        return
    }
    err = t.Execute(w, nil)
    if err != nil {
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}

注：此方式会影响生产环境性能，上线前需切换为缓存模板的实现。

2. 使用文件监听工具（进阶）：借助fsnotify库监听views目录变化，自动触发模板重新加载，示例逻辑：

import "github.com/fsnotify/fsnotify"

func watchTemplates() {
    watcher, err := fsnotify.NewWatcher()
    if err != nil {
        log.Fatal(err)
    }
    defer watcher.Close()

    err = watcher.Add("./views")
    if err != nil {
        log.Fatal(err)
    }

    for {
        select {
        case event, ok := <-watcher.Events:
            if !ok {
                return
            }
            if event.Has(fsnotify.Write) || event.Has(fsnotify.Create) {
                // 重新加载模板缓存
                loadTemplates()
                log.Println("Templates reloaded")
            }
        case err, ok := <-watcher.Errors:
            if !ok {
                return
            }
            log.Println("Watcher error:", err)
        }
    }
}

内容的提问来源于stack exchange，提问作者ivnku