使用 Docker 和 Docker Compose 的 SvelteKit 和 Vite 项目中的 HMR

Question

我正在尝试使用 Docker 和 Docker Compose 让 HMR 与我的 SvelteKit 项目一起工作，但我就是不明白。我一直在查找几个来源，所有看起来都非常相似，但每个都有细微的差别。我的主要灵感来源是这个 Youtube 视频。

到目前为止，我可以运行我的项目，但是当我更改文件时，容器没有更新。我的数据库运行良好，它运行良好，当我的应用程序由简单的“npm run dev”开发时，我可以在容器中访问它。当数据库和应用程序都容器化时，我还没有尝试访问数据库。

./application/Dockerfile

：

FROM node:21-alpine

WORKDIR /usr/src/app

COPY package.json ./
COPY package-lock.json ./
RUN npm install && npm cache clean --force

COPY . .

EXPOSE 5173

CMD ["npm", "run", "host"]

./application/vite.config.ts

：

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

export default defineConfig({
    plugins: [sveltekit()],
});

./docker-compose.yaml

：

version: '3.8'

services:
  surrealdb:
    image: surrealdb/surrealdb:latest
    env_file:
      - .env
    entrypoint: 
      - /surreal
      - start
      - --user
      - $DATABASE_USER
      - --pass
      - $DATABASE_PASS
      - file:data
    volumes: 
      - $DATABASE_LOCATION:/data
    ports:
      - $DATABASE_PORT:8000
    extra_hosts:
    - "host.docker.internal:host-gateway"

  sveltekit:
    env_file:
      - .env
    build:
      context: ./application
    ports:
      - 5173:5173
    volumes:
      - ./application:/usr/src/app
      - /usr/src/app/node_modules/

./.env

：

# Raspberry PI IP Address.
IP_ADDRESS=192.168.1.20
DATABASE_PORT=3456

# Wifi credentials.
WIFI_SSID=my-ssid
WIFI_PASSWORD=my-password

# Database credentials.
DATABASE_USER=admin_username
DATABASE_PASS=some_secret_password

# Database location on disk.
DATABASE_LOCATION=./database/data

# Database namespace and database.
SURREAL_NS=root
SURREAL_DB=root

# Others
# SURREAL_PATH=file:data
SURREAL_CAPS_ALLOW_SCRIPT=true
SURREAL_AUTH=true

从这个角度来看，我如何让 HMR 发挥作用？

Answer 1

这就是我如何让 HMR 在以开发模式运行的 dockerized SvelteKit 应用程序中工作（以下假设 docker 配置文件位于 SvelteKit 项目的根目录，否则请修改路径）：

# ./Dockerfile

# Use the alpine version that suits your needs, based
# on the Node version you want to use. If possible use
# the latest stable version (recommended for a newly
# created SvelteKit project).
FROM node:alpine

# Use whichever container directory you want as long
# as you make sure to use it consistently in further
# configuration. I'll just use '/app' here for simplicity.
WORKDIR '/app'

COPY package.json .
RUN npm install

COPY . .

# Using the --host 0.0.0.0 option (which is passed to Vite)
# was the only way I could get the dev/HMR mode to be
# accessible from outside the container.
CMD npm run dev -- --host 0.0.0.0

构建并测试：

docker build -t docker-svelte-test:latest .

docker run -it -p 5173:5173 -v /app/node_modules -v .:/app docker-svelte-test:latest

-it

标志将让您与服务器交互（重新启动、退出等）。端口映射选项是不言自明的（请注意，我不需要

EXPOSE

Dockerfile 中的端口）。体积 (

-v

) 声明对于让 HMR 发挥作用非常重要，并且需要按该顺序进行声明。第一个保留 /app/node_modules，这使我们能够将

/app

映射到项目的根目录，而不影响

node_modules

。因为

/app

映射到项目的目录，所以对源文件所做的更改将立即反映在容器上运行的应用程序中（= HMR 工作）。一旦您测试了 HMR 确实有效，将相应的

docker-compose

文件放在一起就非常简单了：

# ./docker-compose.yml

services:
  dev:
    build:
      context: .
    ports:
      - 5173:5173
    volumes:
      - /app/node_modules
      - .:/app

您可以使用 

docker compose up

调用它。请注意，您不再享有交互式服务器的好处（我们传递给

-it

的

docker run

标志不再可用）。不过，HMR 应该仍然可以正常运行。请注意，这仅在您不使用

npm

安装新模块时才有效。如果这样做，您

将

必须重建图像并重新启动容器。但对于使用 HMR 进行 HTML/CSS 编辑来说，它的效果非常好。 我已经使用

adpater-auto

以及

adapter-static

对此进行了测试。事实上，它应该与任何适配器一起使用，因为这些适配器仅在构建阶段发挥作用，因此与让 HMR 在开发模式下工作的上下文无关。