Svelte — это современный фреймворк JavaScript для создания пользовательских интерфейсов. В отличие от традиционных фреймворков, таких как React или Vue, Svelte переносит большую часть работы на время компиляции, создавая высокоэффективный код, который обновляет DOM напрямую. Это приводит к более быстрым приложениям с меньшим количеством шаблонного кода.
Контейнеризируем приложение Svelte с помощью Docker и Docker Compose. Такая настройка обеспечивает согласованную среду, упрощая управление и развертывание приложения.
Создание приложения Svelte
Если вы еще не настроили приложение Svelte, вы можете создать его с помощью следующих команд:
npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install
Создание Dockerfile
В корневом каталоге приложения Svelte создайте файл Dockerfile, чтобы определить среду, в которой будет работать ваше приложение.
# Use an official Node.js runtime as a parent image
FROM node:16-alpine
# Set the working directory inside the container
WORKDIR /usr/src/app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application code
COPY . .
# Build the Svelte app
RUN npm run build
# Expose the port the app runs on
EXPOSE 5000
# Start the app
CMD ["npm", "run", "start"]
Создание Docker Compose
Создайте docker-compose.yml файл в корне вашего проекта для определения и управления многоконтейнерными приложениями Docker.
version: '3.8'
services:
svelte-app:
build: .
ports:
- "5000:5000"
volumes:
- .:/usr/src/app
- /usr/src/app/node_modules
environment:
NODE_ENV: development
Сборка и запуск Docker-контейнеров
Теперь, когда у вас настроены файлы Dockerfile и Docker Compose, вы можете создавать и запускать свои контейнеры.
Запустите контейнер:
docker-compose up
Создайте образ Docker:
docker-compose build
Теперь ваше приложение Svelte должно работать внутри контейнера Docker и быть доступным по адресу http://localhost:5000.
Доступ к приложению и его тестирование
Откройте веб-браузер и перейдите по адресу http://localhost:5000. Вы должны увидеть работающее приложение Svelte.
Любые изменения, внесенные вами в код приложения, будут автоматически отражены внутри контейнера благодаря сопоставлению томов, указанному в файле docker-compose.yml.