Dockerized Sveltkit 应用程序：热重载不起作用

Question

在 SO 社区的帮助下，我终于能够对我的 Sveltekit 应用程序进行 docker 化并从浏览器访问它（这最初是一个问题）。到目前为止一切顺利，但现在每次我执行代码更改时，我都需要重新构建和重新部署我的容器，这显然是不可接受的。热重载不起作用，我一直在尝试在网上找到的多种方法，但到目前为止没有一个起作用。

这是我的Dockerfile：

FROM node:19-alpine

# Set the Node environment to development to ensure all packages are installed
ENV NODE_ENV development

# Change our current working directory
WORKDIR /app

# Copy over `package.json` and lock files to optimize the build process
COPY  package.json package-lock.json ./
# Install Node modules
RUN npm install

# Copy over rest of the project files
COPY . .

# Perhaps we need to build it for production, but apparently is not needed to run dev script.
# RUN npm run build

# Expose port 3000 for the SvelteKit app and 24678 for Vite's HMR
EXPOSE 3333
EXPOSE 8080
EXPOSE 24678

CMD ["npm", "run", "dev"]

我的docker-compose：

version: "3.9"

services:
  dmc-web:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: dmc-web
    restart: always
    ports:
      - "3000:3000"
      - "3010:3010"
      - "8080:8080"
      - "5050:5050"
      - "24678:24678"
    volumes:
      - ./:/var/www/html

我的脚本package.json：

    "scripts": {
        "dev": "vite dev --host 0.0.0.0",
        "build": "vite build",
        "preview": "vite preview",
        "test": "playwright test",
        "lint": "prettier --check . && eslint .",
        "format": "prettier --write ."
    },

和我的vite.config.js：

import { sveltekit } from '@sveltejs/kit/vite';
import {defineConfig} from "vite";

export default defineConfig({
    plugins: [sveltekit()],
    server: {
        watch: {
            usePolling: true,
        },
        host: true, // needed for the DC port mapping to work
        strictPort: true,
        port: 8080,
    }
});

知道我错过了什么吗？我可以访问我的应用程序，http://localhost:8080但在发生代码更改时无法重新加载应用程序。

谢谢。

Answer 1

解决方案

\n

有问题的工作空间无法工作只是因为它没有绑定安装源目录。除此之外，没有任何问题。

\n

这是我的 github 上的工作代码：\n https://github.com/rabelais88/stackoverflow-answers/tree/main/74680419-svelte-docker-HMR

\n

1.在docker-compose中正确绑定挂载

\n

问题中的docker-compose.yaml仅安装先前构建的结果，而不安装当前的源文件。

\n

# wrong\n    volumes:\n      - ./:/var/www/html\n# \xe2\x9c\x85answer\n    volumes:\n      # it avoids mounting the workspace root\n      # because it may cause OS specific node_modules folder\n      # or build folder(.svelte-kit) to be mounted.\n      # they conflict with the temporary results from docker space.\n      # this is why many mono repos utilize ./src folder\n      - ./src:/home/node/app/src\n      - ./static:/home/node/app/static\n      - ./vite.config.js:/home/node/app/vite.config.js\n      - ./tsconfig.json:/home/node/app/tsconfig.json\n      - ./svelte.config.js:/home/node/app/svelte.config.js\n

\n

2. dockerfile 不应包含文件副本和命令

\n

dockerfile并不总是必须包含命令。当 1）必须保留结果 2）流程生命周期对图像至关重要时，这是必要的。在这种情况下，1）结果不太确定，因为源在启动时可能不完整，2）进程生命周期并不重要，因为用户可以手动执行或关闭容器。VSCode + Docker 的本地开发环境，又名VSCode devcontainer，也sleep infinity因此使用了 command。

\n

如上所述，代码无法复制到docker空间，因为它会与绑定安装的文件冲突。为了避免两个文件冲突，只需从 dockerfile 中删除COPY命令CMD并在以下位置添加更多命令docker-compose.yaml

\n

# dockerfile\n\n# wrong\nCOPY  package.json package-lock.json ./\nRUN npm install\nCOPY . .\n# ...\nCMD ["npm", "run", "dev"]\n\n# \xe2\x9c\x85answer\nCOPY  package*.json ./\nRUN npm install\n# comment out COPY and CMD\n# COPY . .\n# ...\n# CMD ["npm", "run", "dev"]\n

\n

并将命令添加到 docker-compose

\n

# dockerfile\n\n# wrong\nCOPY  package.json package-lock.json ./\nRUN npm install\nCOPY . .\n# ...\nCMD ["npm", "run", "dev"]\n\n# \xe2\x9c\x85answer\nCOPY  package*.json ./\nRUN npm install\n# comment out COPY and CMD\n# COPY . .\n# ...\n# CMD ["npm", "run", "dev"]\n

\n

问题中的其余配置都是不必要的。你可以从我在Github上的工作演示中查看这一点

\n

编辑

\n

\n

我刚刚这样做了，但是当运行它时，我收到错误：找不到模块\'/app/npm dev\'。

\n

\n

答案使用任意设置。数量和CMD可能必须相应改变。

\n

IE）

\n

# docker-compose.yaml\nvolumes:\n  - ./src:/$YOUR_APP_DIR/src\n  - ./static:/$YOUR_APP_DIR/static\n  # ...\n

\n

我已将其用作/home/node/appWORKDIR，因为/home/node它用作官方节点 docker 映像的主 WORKDIR。但是，不必使用相同的文件夹。如果您要使用/home/node/app，请确保在使用前创建该文件夹。

\n

RUN mkdir -p /home/node/app\nWORKDIR /home/node/app\n

\n