Докеризация приложения React: пошаговое руководство

Введение

Если вы работаете инженером-программистом в технологической компании, велика вероятность, что вас будут часто просить создавать и развертывать приложения. Эти приложения обычно представляют собой веб-приложения на основе фреймворка, такие как React, Redux или Vue.js.

Контейнер Docker можно использовать для упаковки приложения, чтобы оно могло работать в любой среде, не требуя зависимостей или предустановленных библиотек. В этом руководстве мы рассмотрим все, что вам нужно знать о веб-приложении Dockerizing React.

Что такое Докер?

Docker — это программное обеспечение с открытым исходным кодом, которое позволяет вам контейнеризовать ваше приложение. Контейнеризация — это процесс, позволяющий запускать приложение в среде виртуальной машины. Контейнер может работать на любом компьютере без необходимости установки зависимостей на хост-компьютере.

Контейнеризация — отличный вариант для развертывания приложений в производственных средах. Это гарантирует, что приложение является полностью автономным и требует только минимального набора зависимостей для правильной работы. Это снижает риск появления зависимостей, которые могут повлиять на другие приложения или службы на том же хосте.

Почему вы должны докеризировать свое веб-приложение?

Если вы планируете развернуть свое приложение в рабочей среде, вам обязательно следует рассмотреть возможность использования Docker. Это позволит вам запускать ваше приложение в любой среде без необходимости устанавливать зависимости на машине.

Докеризация приложения гарантирует, что приложение работает в рабочей среде точно так, как задумано. Это также позволяет вам легко делиться своим приложением с другими людьми в вашей организации, публикуя его в Docker Hub или других общедоступных реестрах.

Создать React-приложение

Сначала создайте базовое приложение React в своей системе. Приведенные ниже инструкции помогут вам установить Node.js и модуль create-react-app.

Перед началом вам необходимо установить Node.js на свой компьютер. В системах на основе Debian вы можете использовать следующие команды для установки Node.js:

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -

sudo apt install nodejs

После установки Node.js используйте команду npm для глобальной установки модуля create-react-app:

sudo npm install create-react-app --target=global

После установки CRA вы можете продолжить и создать проект React, выполнив следующую команду:

npx create-react-app my-app

Вышеупомянутая команда создаст каталог my-app с базовым реагирующим приложением. Вы можете перейти во вновь созданный каталог и начать реагировать на приложение, используя следующие команды:

cd my-app

npm start

Реагирующее приложение по умолчанию запустится на порту 3000. Вы можете открыть веб-браузер и получить доступ к приложению React по адресу http://localhost:300 или использовать IP-адрес системы.

Ваше приложение React по умолчанию теперь готово.

Создайте Dockerfile для приложения React

После того, как вы создали свое приложение для реагирования, вы можете продолжить и создать Dockerfile для своего приложения. Этот файл будет содержать все инструкции по созданию вашего приложения внутри контейнера. Создайте новый файл с именем Dockerfile в корневом каталоге вашего проекта и добавьте следующий код.

vim Dockerfile

Добавьте в файл следующий код:

# Using node:16-alpine base image
 FROM node:16-alpine

 # Set /app as the default work directory
 WORKDIR /app

 # copy package.json to the working directory for packages installation
 COPY package.json /app

 # Install npm dependencies
 RUN yarn install

 # Copy all the project files to the working directory
 COPY..

 # Expose the port of your application to bind with the host port
 EXPOSE 3000

 # run your app
 CMD ['yarn', 'run', 'start']

Давайте рассмотрим каждую строку кода выше, чтобы понять, что она делает.

FROM — это имя базового образа, который вы будете использовать для создания своего контейнера. Вы должны использовать Alpine Linux, так как он легкий и имеет все инструменты, необходимые для вашего приложения.
WORKDIR — указывает рабочий каталог для выполнения последующих инструкций в Dockerfile. Это будет каталог, смонтированный внутри контейнера как /app.
COPY — используется для копирования всех файлов и папок из текущего каталога в рабочий каталог. КОПИРОВАТЬ .. скопирует все файлы и папки из текущего каталога в рабочий каталог, используя рекурсивную копию. Это означает, что скрытые папки также будут скопированы.
RUN — используется для выполнения команды внутри контейнера. Здесь мы используем npm install, который установит все зависимости внутри контейнера.
EXPOSE — используется для открытия порта 3000 в контейнере. Этот порт будет использоваться для размещения приложения React.

Создайте и запустите контейнер Docker

Затем создайте образ Docker, выполнив приведенную ниже команду. Здесь «реагировать-приложение» — это имя изображения:

docker build -t react-app.

Этот образ будет создан в локальном реестре образов. Затем вы можете создать контейнер Docker с помощью следующей команды:

sudo docker run -it -p 3000:3000 -d react-app

Теперь убедитесь, что контейнер работает в вашей системе:

docker containers ls

Наконец, откройте браузер и подключитесь к локальному хосту через порт 3000 (или используйте указанный вами порт). Вы должны увидеть реагирующее приложение.

Вы можете использовать Dockerfile для автоматизации создания и обновления образа. Это полезно, если вы работаете в команде и люди добавляют код в одно и то же приложение.

Создайте файл конфигурации Docker-compose

Давайте продолжим и запустим приложение React с помощью Docker Compose. Откройте новый файл с именем docker-compose.yml в корневом каталоге вашего проекта и добавьте следующий код:

version: '3'
 services:
 client:
 stdin_open: true
 build:
 context:.
 ports:
 - "3000:3000"

Сохраните файл и закройте его.

Затем выполните следующую команду, чтобы создать и запустить контейнеры Docker.

sudo docker-compose build

sudo docker-compose up -d

Вывод

В этой статье мы обсудили, почему вы должны докеризировать свое приложение и как это сделать. Мы также обсудили преимущества использования Docker, различные версии Docker, файловую структуру Docker и способы запуска контейнеров. Мы также обсудили, как создать и развернуть приложение React с помощью Create-React-App и Docker.