Azure VM上Docker容器中Vite应用HMR及卷挂载异常求助

核心问题分析 #

报错ENOENT: no such file or directory, open '/app/package.json'本质是挂载的卷未正确映射本地文件到容器内，导致容器/app目录为空或缺少关键文件。本地与Azure VM环境的差异主要体现在相对路径解析、文件权限和文件系统监听机制上。

分步解决 #

1. 确保Docker Compose运行的工作目录正确 #

执行docker compose up时，必须在/Application目录下运行。因为volumes中的./app是相对当前工作目录的路径，如果在其他目录执行，会导致Docker找不到要挂载的本地app文件夹，最终挂载空目录到容器/app，自然找不到package.json。

2. 替换相对挂载路径为绝对路径（避免路径歧义） #

将docker-compose.yml中的卷挂载配置改为绝对路径，消除相对路径在不同环境下的解析差异：

services:
  frontend:
    # ... 其他配置不变
    volumes:
      # 替换为Azure VM上Application/app的实际绝对路径
      - /home/your-user/Application/app:/app/
      - /app/node_modules/

3. 修复Azure VM上的文件权限 #

Azure VM的文件系统权限可能限制Docker访问本地文件，执行以下命令确保app目录及文件可被读取：

sudo chmod -R 755 /Application/app
sudo chown -R your-user:your-user /Application/app

4. 配置Vite以支持跨环境HMR #

在vite.config.js中添加以下配置，解决容器内文件监听及远程访问问题：

export default {
  server: {
    // 允许容器外部访问Vite服务
    host: '0.0.0.0',
    // 启用轮询模式，解决Docker容器内文件变更无法被监听的问题
    watch: {
      usePolling: true,
    },
  },
};

5. 重新构建并启动容器 #

执行以下命令确保配置生效：

docker compose down
docker compose build --no-cache
docker compose up -d

验证 #

• 访问http://<Azure-VM-IP>:5173确认前端服务正常运行
• 修改本地app/src下的文件，查看页面是否实时更新（HMR生效）

内容的提问来源于stack exchange，提问作者Daniel Öhling