Windows版Docker Desktop如何配置本地Web应用带路径的localhost访问URL

WordPress本身对站点根地址有硬编码配置，单纯修改Docker端口映射无法直接实现localhost/自定义路径的访问效果，需要配合反向代理+站点参数调整，按以下步骤操作即可：

1. 调整docker-compose.yml配置 #

你之前的配置应该是直接把WordPress容器的80端口映射到了宿主机80端口，现在需要新增一个轻量Nginx容器做反向代理，把WordPress和MySQL放到内部网络不直接暴露端口，由Nginx统一处理路径转发。直接替换你原来的compose文件内容即可，注意把数据库密码改成你自己之前用的值：

version: '3.8'
services:
  db:
    image: mysql:8.0
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: 替换成你的数据库root密码
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: 替换成你的wordpress库密码
    networks:
      - wp_internal

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    volumes:
      - wordpress_data:/var/www/html
    restart: always
    environment:
      WORDPRESS_CONFIG_EXTRA: |
        # 配置站点的基础地址为你的目标子路径
        define('WP_HOME','http://localhost/example');
        define('WP_SITEURL','http://localhost/example');
        # 适配反向代理的路径转发规则
        if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
            $_SERVER['REMOTE_ADDR'] = $_SERVER['HTTP_X_FORWARDED_FOR'];
        }
        $_SERVER['REQUEST_URI'] = preg_replace('|^/example/|', '/', $_SERVER['REQUEST_URI']);
    networks:
      - wp_internal

  nginx-proxy:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
    depends_on:
      - wordpress
    networks:
      - wp_internal

volumes:
  db_data:
  wordpress_data:

networks:
  wp_internal:

如果你之前已经完成了WordPress初始化，不用怕丢数据，上面的配置复用了命名卷挂载，原来的站点内容、数据库数据都会完整保留。

2. 添加Nginx转发配置 #

在docker-compose.yml同目录下新建名为nginx.conf的配置文件，写入以下内容，核心是做路径前缀剥离、请求转发，以及自动替换页面里的静态资源路径，避免样式、脚本加载失败：

server {
    listen 80;
    server_name localhost;

    location /example/ {
        # 剥离路径里的/example前缀再转发给WordPress容器
        rewrite ^/example/(.*)$ /$1 break;
        proxy_pass http://wordpress:80;
        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;

        # 自动替换页面内的根路径为子路径，解决静态资源404问题
        sub_filter_once off;
        sub_filter_types text/css text/javascript application/javascript application/json application/xml text/html;
        sub_filter 'src="/' 'src="/example/';
        sub_filter 'href="/' 'href="/example/';
        sub_filter 'action="/' 'action="/example/';
        sub_filter 'url("/' 'url("/example/';
    }
}

3. 重启服务生效 #

在compose文件所在目录打开终端，依次执行以下命令：

• 停止原有运行的容器：docker compose down
• 启动新的服务栈：docker compose up -d
• 等待30-60秒待容器完全初始化后，浏览器访问http://localhost/example即可正常打开站点，和之前根路径访问的功能完全一致。

常见问题处理 #

• 如果访问子路径自动跳回根路径：说明你之前已经在根路径完成了WordPress安装，只需要进入数据库，找到wp_options表，把siteurl和home两个字段的值改成http://localhost/example即可，也可以安装相对路径插件自动适配。
• 如果需要更换其他子路径：只需要把上面所有配置里的example替换成你想要的路径名即可（比如tutorial就能实现你之前看到的教程路径效果）。
• 如果出现静态资源加载失败：检查nginx.conf里的sub_filter规则是否完整，重启Nginx容器即可。

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