Svelte в Docker

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.