HMR в проекте SvelteKit и Vite с использованием Docker и Docker Compose
Я пытаюсь заставить HMR работать с моим проектом SvelteKit, используя Docker и Docker Compose, но просто не могу в этом разобраться. Я просматривал несколько источников, и все они очень похожи, но каждый имеет свои небольшие различия. Мой главный источник вдохновения — это видео на 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 работать с этой точки зрения?
Ответы 1
Вот как я заставил HMR работать в докеризованном приложении SvelteKit, работающем в режиме разработки (далее предполагается, что файлы конфигурации докера расположены в корне вашего проекта 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. Если вы это сделаете, вам придется перестроить образ и перезапустить контейнер. Но для редактирования HTML/CSS с использованием HMR он работает отлично.
Я проверил это, используя adpater-auto и adapter-static. Фактически, он должен работать с любыми адаптерами, поскольку они вступают в действие только на этапе сборки и, таким образом, не имеют значения в контексте работы HMR в режиме разработки.
Я бы запускал приложение Node непосредственно на хосте для разработки в реальном времени. Поскольку база данных опубликована
ports:, вы сможете настроить приложение для использования базы данных в контейнере.