Середовище розробки JavaScript: Конфігурація контейнера Docker

У сучасному стрімкому ландшафті розробки програмного забезпечення підтримка узгодженого середовища розробки, яке можна відтворити, має вирішальне значення. Різні операційні системи, різні версії програмного забезпечення та конфліктуючі залежності можуть призвести до страхітливого синдрому "воно працює на моїй машині". Docker, провідна платформа контейнеризації, забезпечує потужне рішення цієї проблеми, дозволяючи розробникам пакувати свої програми та їхні залежності в єдиний, ізольований блок.

Цей посібник проведе вас через процес налаштування надійного та узгодженого середовища розробки JavaScript за допомогою контейнерів Docker. Ми розглянемо все: від базової установки до розширених конфігурацій, забезпечуючи плавну та ефективну роботу для ваших JavaScript проєктів, незалежно від різних операційних систем вашої команди.

Чому варто використовувати Docker для розробки JavaScript?

Перш ніж заглиблюватися в подробиці, давайте розглянемо переваги використання Docker для вашого середовища розробки JavaScript:

• Узгодженість: Docker гарантує, що кожен у вашій команді працює з тим самим середовищем, усуваючи проблеми сумісності та зменшуючи ймовірність виникнення помилок, спричинених відмінностями в середовищі. Це особливо важливо для географічно розподілених команд.
• Ізоляція: Контейнери забезпечують ізоляцію від хост-системи, запобігаючи конфліктам з іншими проєктами та гарантуючи, що ваші залежності не заважають одна одній.
• Відтворюваність: образи Docker можна легко поширювати та розгортати, що полегшує відтворення вашого середовища розробки на різних машинах або у виробництві. Це особливо корисно під час адаптації нових членів команди або розгортання у різних постачальників хмарних послуг.
• Портативність: Контейнери Docker можуть працювати на будь-якій платформі, яка підтримує Docker, включаючи Windows, macOS та Linux, дозволяючи розробникам використовувати свою улюблену операційну систему, не впливаючи на проєкт.
• Спрощене розгортання: Той самий образ Docker, який використовується для розробки, можна використовувати для тестування та виробництва, оптимізуючи процес розгортання та зменшуючи ризик помилок.

Необхідні умови

Перш ніж почати, переконайтеся, що у вас встановлено наступне:

• Docker: Завантажте та встановіть Docker Desktop для вашої операційної системи з офіційного веб-сайту Docker (docker.com). Docker Desktop включає Docker Engine, Docker CLI, Docker Compose та інші важливі інструменти.
• Node.js та npm (необов'язково): Хоча це не обов'язково вимагається на вашій хост-машині, оскільки вони будуть у контейнері, наявність Node.js та npm, встановлених локально, може бути корисною для завдань поза контейнером або під час налаштування початкової структури вашого проєкту. Ви можете завантажити їх з nodejs.org.
• Редактор коду: Виберіть свій улюблений редактор коду (наприклад, VS Code, Sublime Text, Atom). VS Code має чудові розширення Docker, які можуть спростити вашу роботу.

Базова конфігурація Dockerfile

Основою будь-якого середовища на основі Docker є Dockerfile. Цей файл містить інструкції для створення вашого образу Docker. Давайте створимо базовий Dockerfile для програми Node.js:

# Використовуйте офіційний час виконання Node.js як батьківський образ
FROM node:18-alpine

# Встановіть робочий каталог в контейнері
WORKDIR /app

# Скопіюйте package.json та package-lock.json до робочого каталогу
COPY package*.json ./

# Встановіть залежності програми
RUN npm install

# Скопіюйте вихідний код програми до робочого каталогу
COPY . ./

# Відкрийте порт 3000 для зовнішнього світу (відрегулюйте, якщо ваша програма використовує інший порт)
EXPOSE 3000

# Визначте команду для запуску під час запуску контейнера
CMD ["npm", "start"]

Розберемо кожен рядок:

• FROM node:18-alpine: Вказує базовий образ для контейнера. У цьому випадку ми використовуємо офіційний образ Node.js 18 Alpine, який є легкою дистрибуцією Linux. Alpine відомий своїм невеликим розміром, що допомагає зберігати ваш образ Docker компактним. Розгляньте інші версії Node.js відповідно до вашого проєкту.
• WORKDIR /app: Встановлює робочий каталог всередині контейнера на /app. Тут буде розміщено код вашої програми.
• COPY package*.json ./: Копіює файли package.json та package-lock.json (або yarn.lock, якщо ви використовуєте Yarn) до робочого каталогу. Копіювання цих файлів спочатку дозволяє Docker кешувати крок npm install, значно прискорюючи час збірки, коли ви змінюєте лише код програми.
• RUN npm install: Встановлює залежності програми, визначені в package.json.
• COPY . .: Копіює всі інші файли та каталоги з вашого локального каталогу проєкту до робочого каталогу всередині контейнера.
• EXPOSE 3000: Відкриває порт 3000, роблячи його доступним з хост-машини. Це важливо, якщо ваша програма прослуховує цей порт. Налаштуйте номер порту, якщо ваша програма використовує інший порт.
• CMD ["npm", "start"]: Вказує команду для запуску під час запуску контейнера. У цьому випадку ми використовуємо npm start, яка є поширеною командою для запуску програм Node.js. Переконайтеся, що ця команда відповідає команді, визначеній у розділі scripts вашого package.json.

Створення образу Docker

Після того, як ви створили свій Dockerfile, ви можете створити образ Docker за допомогою наступної команди:

docker build -t my-node-app .

Де:

• docker build: Команда Docker для створення образів.
• -t my-node-app: Вказує тег (ім'я) для образу. Виберіть описову назву для вашої програми.
• .: Вказує контекст збірки, тобто поточний каталог. Docker використовуватиме Dockerfile у цьому каталозі для створення образу.

Потім Docker виконає інструкції у вашому Dockerfile, створюючи образ шар за шаром. Під час першого створення образу може знадобитися деякий час, щоб завантажити базовий образ та встановити залежності. Однак наступні збірки будуть набагато швидшими, оскільки Docker кешує проміжні шари.

Запуск контейнера Docker

Після створення образу ви можете запустити контейнер з нього за допомогою наступної команди:

docker run -p 3000:3000 my-node-app

Де:

• docker run: Команда Docker для запуску контейнерів.
• -p 3000:3000: Відображає порт 3000 на хост-машині на порт 3000 всередині контейнера. Це дозволяє вам отримати доступ до вашої програми з вашого браузера за допомогою localhost:3000. Перше число - порт хоста, а друге число - порт контейнера.
• my-node-app: Ім'я образу, який ви хочете запустити.

Ваша програма тепер повинна працювати всередині контейнера Docker. Ви можете отримати доступ до нього, відкривши свій браузер і перейшовши до localhost:3000 (або до порту, який ви вказали). Ви повинні побачити екран привітання вашої програми або початковий інтерфейс користувача.

Використання Docker Compose

Для більш складних програм з кількома службами Docker Compose є безцінним інструментом. Він дозволяє визначати багатоконтейнерні програми та керувати ними за допомогою файлу YAML. Створимо файл docker-compose.yml для нашої програми Node.js:

version: "3.9"
services:
  app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    environment:
      NODE_ENV: development
    command: npm run dev

Розглянемо кожен розділ:

• version: "3.9": Вказує версію формату файлу Docker Compose.
• services: Визначає служби, які складають вашу програму. У цьому випадку у нас є одна служба під назвою app.
• build: .: Вказує, що образ повинен бути побудований з Dockerfile у поточному каталозі.
• ports: - "3000:3000": Відображає порт 3000 на хост-машині на порт 3000 всередині контейнера, подібно до команди docker run.
• volumes: - .:/app: Створює том, який монтує поточний каталог на вашій хост-машині до каталогу /app всередині контейнера. Це дозволяє вам вносити зміни до свого коду на хост-машині, і вони автоматично відображатимуться всередині контейнера, що забезпечує гаряче перезавантаження.
• environment: NODE_ENV: development: Встановлює змінну середовища NODE_ENV всередині контейнера на development. Це корисно для налаштування вашої програми для роботи в режимі розробки.
• command: npm run dev: Перевизначає команду за замовчуванням, визначену у Dockerfile. У цьому випадку ми використовуємо npm run dev, яка часто використовується для запуску сервера розробки з гарячим перезавантаженням.

Щоб запустити програму за допомогою Docker Compose, перейдіть до каталогу, що містить файл docker-compose.yml, і виконайте наступну команду:

docker-compose up

Docker Compose створить образ (якщо необхідно) та запустить контейнер. Прапор -d можна додати для запуску контейнера в режимі відключення (у фоновому режимі).

Розширені параметри конфігурації

Ось деякі розширені параметри конфігурації для покращення вашого середовища розробки JavaScript, контейнеризованого Docker:

1. Багатоступінчасті збірки

Багатоступінчасті збірки дозволяють використовувати кілька інструкцій FROM у вашому Dockerfile, кожна з яких представляє окремий етап збірки. Це корисно для зменшення розміру кінцевого образу шляхом розділення середовища збірки від середовища виконання.

# Етап 1: Створення програми
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . ./
RUN npm run build

# Етап 2: Створення образу виконання
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

У цьому прикладі перший етап (builder) створює програму за допомогою Node.js. Другий етап використовує Nginx для обслуговування створених файлів програми. Тільки створені файли з першого етапу копіюються на другий етап, що призводить до меншого та ефективнішого образу.

2. Використання змінних середовища

Змінні середовища - це потужний спосіб налаштувати вашу програму без зміни коду. Ви можете визначити змінні середовища у своєму файлі docker-compose.yml або передати їх під час виконання за допомогою прапора -e.

services:
  app:
    environment:
      API_URL: "http://api.example.com"

У вашій програмі ви можете отримати доступ до цих змінних середовища за допомогою process.env.

const apiUrl = process.env.API_URL;

3. Монтування томів для розробки

Монтування томів (як показано в прикладі Docker Compose) має вирішальне значення для розробки, оскільки воно дозволяє вам вносити зміни до свого коду на хост-машині, і вони негайно відображатимуться всередині контейнера. Це усуває необхідність перебудовувати образ щоразу, коли ви вносите зміни.

4. Налагодження з VS Code

VS Code має чудову підтримку налагодження програм Node.js, що працюють у контейнерах Docker. Ви можете використовувати розширення VS Code Docker, щоб підключитися до запущеного контейнера та встановити точки зупинки, перевіряти змінні та проходити свій код покроково.

Спочатку встановіть розширення Docker у VS Code. Потім створіть файл launch.json у своєму каталозі .vscode з наступною конфігурацією:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Docker",
      "port": 9229,
      "address": "localhost",
      "remoteRoot": "/app",
      "localRoot": "${workspaceFolder}"
    }
  ]
}

Переконайтеся, що ваша програма Node.js запущена з прапором --inspect або --inspect-brk. Наприклад, ви можете змінити свій файл docker-compose.yml, щоб включити цей прапор:

services:
  app:
    command: npm run dev -- --inspect=0.0.0.0:9229

Потім у VS Code виберіть конфігурацію "Attach to Docker" та запустіть налагодження. Ви зможете встановити точки зупинки та налагодити свій код, що працює всередині контейнера.

5. Використання приватного реєстру npm

Якщо ви працюєте над проєктом з приватними пакетами npm, вам потрібно буде налаштувати свій контейнер Docker для аутентифікації з вашим приватним реєстром npm. Це можна зробити, встановивши змінну середовища NPM_TOKEN у вашому файлі docker-compose.yml або створивши файл .npmrc у каталозі вашого проєкту та скопіювавши його в контейнер.

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
COPY .npmrc .
RUN npm install
COPY . ./
EXPOSE 3000
CMD ["npm", "start"]

Файл .npmrc має містити ваш маркер аутентифікації:

//registry.npmjs.org/:_authToken=YOUR_NPM_TOKEN

Не забудьте замінити YOUR_NPM_TOKEN на свій фактичний маркер npm. Зберігайте цей маркер в безпеці та не фіксуйте його у своєму публічному репозиторії.

6. Оптимізація розміру образу

Збереження невеликого розміру вашого образу Docker важливо для прискорення збірки та часу розгортання. Ось кілька порад щодо оптимізації розміру образу:

• Використовуйте легкий базовий образ, наприклад node:alpine.
• Використовуйте багатоступінчасті збірки, щоб розділити середовище збірки від середовища виконання.
• Видаліть непотрібні файли та каталоги з образу.
• Використовуйте файл .dockerignore, щоб виключити файли та каталоги з контексту збірки.
• Об’єднайте кілька команд RUN в одну команду, щоб зменшити кількість шарів.

Приклад: Докерування програми React

Давайте проілюструємо ці концепції на практичному прикладі: Докерування програми React, створеної за допомогою Create React App.

Спочатку створіть нову програму React за допомогою Create React App:

npx create-react-app my-react-app
cd my-react-app

Потім створіть Dockerfile у кореневому каталозі проєкту:

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . ./
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Створіть файл docker-compose.yml:

version: "3.9"
services:
  app:
    build: .
    ports:
      - "3000:80"
    volumes:
      - .:/app
    environment:
      NODE_ENV: development

Примітка: Ми відображаємо порт 3000 на хості на порт 80 всередині контейнера, оскільки Nginx обслуговує програму на порті 80. Можливо, вам знадобиться налаштувати відображення портів залежно від конфігурації вашої програми.

Нарешті, запустіть docker-compose up, щоб створити та запустити програму. Потім ви можете отримати доступ до програми, перейшовши до localhost:3000 у своєму браузері.

Типові проблеми та усунення несправностей

Навіть за умови ретельної конфігурації ви можете зіткнутися з проблемами під час роботи з Docker. Ось кілька поширених проблем та їхні рішення:

• Конфлікти портів: Переконайтеся, що порти, які ви відображаєте у своєму docker-compose.yml або команді docker run, ще не використовуються іншими програмами на вашій хост-машині.
• Проблеми з монтуванням томів: Перевірте дозволи на файли та каталоги, які ви монтуєте. Docker може не мати необхідних дозволів для доступу до файлів.
• Збої збірки образу: Ретельно вивчіть вихідні дані команди docker build на наявність помилок. Поширені причини включають неправильний синтаксис Dockerfile, відсутні залежності або проблеми з мережею.
• Збої контейнера: Використовуйте команду docker logs, щоб переглянути журнали вашого контейнера та визначити причину збою. Поширені причини включають помилки програми, відсутні змінні середовища або обмеження ресурсів.
• Повільний час збірки: Оптимізуйте свій Dockerfile, використовуючи багатоступінчасті збірки, кешування залежностей та мінімізуючи кількість шарів.

Висновок

Docker забезпечує потужне та універсальне рішення для створення узгоджених та відтворюваних середовищ розробки JavaScript. Використовуючи Docker, ви можете усунути проблеми сумісності, спростити розгортання та гарантувати, що кожен у вашій команді працює в тому самому середовищі.

У цьому посібнику було розглянуто основи налаштування середовища розробки JavaScript, що працює з Docker, а також деякі розширені параметри конфігурації. Виконуючи ці кроки, ви можете створити надійний та ефективний робочий процес для своїх JavaScript проєктів, незалежно від їх складності чи розміру вашої команди. Використовуйте Docker та розкрийте весь потенціал вашого процесу розробки JavaScript.

Наступні кроки:

• Ознайомтеся з Docker Hub для попередньо створених образів, які відповідають вашим конкретним потребам.
• Заглибтеся в Docker Compose для керування багатоконтейнерними програмами.
• Дізнайтеся про Docker Swarm та Kubernetes для оркестровки контейнерів Docker у виробничих середовищах.

Включивши ці найкращі практики у свій робочий процес, ви можете створити більш ефективне, надійне та масштабоване середовище розробки для ваших програм JavaScript, забезпечуючи успіх на сучасному конкурентному ринку.