Docker环境下Nginx反向代理WordPress容器，JavaScript加载异常求助

问题根源 #

你的Nginx反向代理未传递正确的请求头给WordPress容器，导致WordPress生成静态资源（JS/CSS等）时，使用Docker内部的服务名（InformaticaSite/InformaticaBlog）而非本地访问的域名（informaticasystems.xom/blog.informaticasystems.xom）。浏览器无法解析这些Docker内部服务名，因此资源加载失败。

解决方案 #

1. 修改Nginx配置，添加代理请求头 #

更新nginx.conf，在每个location /块中添加必要的代理头，让WordPress获取正确的外部访问信息：

worker_processes 512;

events {
    worker_connections 1024;
}

http {
    upstream informatica_site {
        server InformaticaSite:80;
    }

    upstream informatica_blog {
        server InformaticaBlog:80;
    }

    server {
        listen 80;
        server_name informaticasystems.xom;

        location / {
            proxy_pass http://informatica_site;
            # 新增代理头配置
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }

    server {
        listen 80;
        server_name blog.informaticasystems.xom;

        location / {
            proxy_pass http://informatica_blog;
            # 新增代理头配置
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}

2. 配置WordPress环境变量，指定站点URL #

在docker-compose.yml中，给两个WordPress服务添加WORDPRESS_HOME和WORDPRESS_SITEURL环境变量，强制WordPress使用正确的外部域名生成链接：

version: '3'
services:
  InformaticaSite:
    image: wordpress
    restart: always
    environment:
      WORDPRESS_DB_HOST: ******
      WORDPRESS_DB_USER: ******
      WORDPRESS_DB_PASSWORD: ******
      WORDPRESS_DB_NAME: ******
      # 新增站点URL配置
      WORDPRESS_HOME: http://informaticasystems.xom
      WORDPRESS_SITEURL: http://informaticasystems.xom
    volumes:
      - ./informatica_site:/var/www/html
    ports:
      - "8081:80"
    networks:
      - informatica_network


  InformaticaBlog:
    image: wordpress
    restart: always
    environment:
      WORDPRESS_DB_HOST: ******
      WORDPRESS_DB_USER: ******
      WORDPRESS_DB_PASSWORD: ******
      WORDPRESS_DB_NAME: ******
      # 新增站点URL配置
      WORDPRESS_HOME: http://blog.informaticasystems.xom
      WORDPRESS_SITEURL: http://blog.informaticasystems.xom
    volumes:
      - ./informatica_blog:/var/www/html
    ports:
      - "8082:80"
    networks:
      - informatica_network

  # 数据库等其他服务配置保持不变

3. （可选）已安装WordPress时更新数据库旧URL #

如果WordPress已完成安装，数据库中可能存储了旧的容器服务名URL，需手动更新：

• 进入容器：docker exec -it InformaticaSite bash
• 安装wp-cli（若未安装）：apt update && apt install -y wp-cli
• 更新站点URL：wp option update home 'http://informaticasystems.xom' --allow-root 和 wp option update siteurl 'http://informaticasystems.xom' --allow-root
• 对Blog容器执行相同操作，替换对应域名

验证步骤 #

1. 重启容器：docker-compose restart nginx InformaticaSite InformaticaBlog
2. 清空浏览器缓存，重新访问两个域名
3. 查看页面源码，确认资源链接已指向正确域名而非容器服务名

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