Docker+Nginx无法挂载index文件及php-docker.local访问失败排查

问题描述 #

尝试用Docker Compose将PHP网站容器化，配置了Nginx的site.conf和docker-compose.yml后，出现两个问题：

• 访问localhost:8080显示Nginx默认欢迎页，而非自定义的index.html
• 访问php-docker.local:8080提示“无法访问此网站”

现有配置与代码 #

文件结构 #

-form
  -src
    -index.html
    -form.php
  -docker-compose.yml
  -site.conf

HTML代码（index.html） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
    
    <title>Registration</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body class="container">
    <div class="container">
      <h1>Registration</h1>
      <section>
        <form id="regForm" action="form.php" method="post">
          <div class="form-group">
            <label for="nameInput">Name</label>
            <input type="text" class="form-control" id="nameInput" name="studentName" aria-describedby="emailHelp" placeholder="Enter your full name">
          </div>
          <div class="form-group">
            <label for="loginInput">Login</label>
            <input type="text" class="form-control" id="loginInput" name="studentId"  placeholder="Enter your login">
          </div>

          <button type="submit" name="submit" value="submit" class="btn btn-primary" id="submitForm">Submit</button>
        </form>
      </section>
    </div>

    <script src="js/regForm.js"></script>
    
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

PHP代码（form.php） #

<?php

echo "Submitted";

if(isset($_POST['submit'])) {
    $data = '';
    $filename = "data.json";
    //if file exists
    if(is_file($filename)) {
        $data = file_get_contents($filename);
    }

    $json_arr = json_decode($data,true);

    $json_arr[] = array(
        'studentId' => $_POST['studentId'],
        'studentName' => $_POST['studentName'],
    );

    file_put_contents($filename, json_encode($json_arr));
}

?>

docker-compose.yml #

version: '3'

services:
  web:
    image: nginx:latest
    volumes:
      - ./src:/src
      - ./site.conf:/etc/nginx/conf.d/site.conf
    ports:
      - "8080:80"
    links:
      - php
  php:
    image: php:7-fpm

Nginx配置（site.conf） #

server {
    index index.html;
    server_name php-docker.local;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /src;
}

问题分析与修复方案 #

1. localhost:8080显示默认欢迎页的原因与修复 #

• 原因：Nginx默认加载/etc/nginx/conf.d/default.conf，你的site.conf仅匹配php-docker.local域名，访问localhost时无对应server块，因此使用默认配置指向欢迎页；同时未配置PHP解析规则，无法处理form.php请求。
• 修复：更新site.conf，让server块同时匹配localhost和自定义域名，并添加PHP解析规则：

server {
    listen 80;
    index index.html index.php;
    server_name localhost php-docker.local;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /src;

    # 处理PHP请求，转发到PHP-FPM容器
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

2. php-docker.local:8080无法访问的原因与修复 #

• 原因：本地DNS未将php-docker.local解析到localhost，导致浏览器无法找到服务器。
• 修复：修改本地hosts文件：
  • Windows：编辑C:\Windows\System32\drivers\etc\hosts，添加一行：127.0.0.1 php-docker.local
  • Linux/macOS：编辑/etc/hosts，添加一行：127.0.0.1 php-docker.local

3. 额外优化：PHP容器文件挂载 #

• 问题：当前PHP容器未挂载本地src目录，导致PHP-FPM无法读取form.php文件，表单提交会失败。
• 修复：更新docker-compose.yml，给php服务添加volume挂载，同时用depends_on替代links（符合Compose最新规范）：

version: '3'

services:
  web:
    image: nginx:latest
    volumes:
      - ./src:/src
      - ./site.conf:/etc/nginx/conf.d/site.conf
    ports:
      - "8080:80"
    depends_on:
      - php
  php:
    image: php:7-fpm
    volumes:
      - ./src:/src

最终操作步骤 #

1. 替换site.conf和docker-compose.yml为上述修复后的内容
2. 修改本地hosts文件添加域名解析
3. 重启Docker Compose服务：

docker-compose down && docker-compose up -d

4. 访问localhost:8080或php-docker.local:8080即可看到自定义页面，提交表单也能正常处理

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