29.11.2023 в 18:03

Разверните свое приложение React с помощью Docker и Nginx

Привет, читатель, это Sourab. Недавно в одном из своих проектов я использовал Docker и Nginx для развертывания приложения React на интерфейсном сервере. Давайте посмотрим, как я это сделал.

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

Создайте новый проект React и запустите его

npx create-react-app with-docker
cd with-docker
npm start

Это запустит ваше приложение react с порта 3000 и откроется в браузере с приведенным ниже интерфейсом

Наше приложение работает нормально. Итак, давайте закроем его сейчас и перейдем к следующему шагу.

Создайте Dockerfile

В корневом каталоге вашего проекта мы создадим новый файл и назовем его Dockerfile. В каталоге вашего проекта это будет выглядеть примерно так

И добавьте этот код в этот файл Dockerfile

#React app image
FROM node:lts-alpine as build

WORKDIR /app

COPY package*.json ./

RUN npm ci

COPY . .

RUN npm run build

FROM node: lts-alpine as build сообщит docker загрузить уменьшенную версию образа узла LTS (долгосрочная поддержка) из Docker Hub и настроить среду узла со всеми базовыми требованиями, необходимыми для запуска проекта узла, в нашем случае проекта React для производства этого.

WORKDIR /app сообщит docker, что в этом образе нам нужен выделенный director, т.е. /app, где будет находиться весь проект. И любые изменения, которые мы внесем, используя шаги в этом файле Docker, повлияют только на этот каталог /app и больше ни на что.

COPY package*.json ./ скопирует все файлы с префиксом package и суффиксом .json в рабочий каталог.

RUN npm ci, и все пакеты, указанные в файле package.json нашего проекта, будут установлены в образ.

COPY . . скопирует исходный каталог в рабочий каталог.

RUN npm run build выполнит скрипт npm run build из package.json, который затем сгенерирует каталог сборки, и весь наш код будет уменьшен, оптимизирован и объединен в статические файлы HTML, CSS и JavaScript. Эта сборка сильно сжата, оптимизирована и готова к работе. Мы будем использовать эту сборку для обслуживания.

Конфигурация Nginx

В корневом каталоге нашего проекта мы создадим один файл с именем nginx.conf и вставим этот код:

http {

  include mime.types;

  set_real_ip_from        0.0.0.0/0;
  real_ip_recursive       on;
  real_ip_header          X-Forward-For;
  limit_req_zone          $binary_remote_addr zone=mylimit:10m rate=10r/s;

  server {
    listen 80;
    server_name localhost;
    root /proxy;
    limit_req zone=mylimit burst=70 nodelay;

    location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri /index.html;   
        }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
  }
}

events {}

Nginx потребуется эта конфигурация для прослушивания любого соединения на порту 80 и обслуживания содержимого /usr/share/nginx/html. Эта конфигурация может измениться в зависимости от ваших требований.

Обновите файл Dockerfile для Nginx

На данный момент наш Dockerfile предназначен только для создания образа приложения React, но мы также можем создать другой образ для Nginx, который избавит нас от ручной настройки Nginx на любом целевом компьютере и настроит его для нашего приложения.

Итак, снова откройте файл Dockerfile и добавьте эти шаги в нижней части файла.

FROM nginx:latest as prod

COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80/tcp

CMD ["/usr/sbin/nginx", "-g", "daemon off;"]

FROM nginx:latest as prod получает последний образ Nginx docker и аннотирует его как prod для производственного использования.

COPY --from=build /app/build /usr/share/nginx/html на этапе сборки изображения скопируйте содержимое каталога сборки из /app/build в /usr/share/nginx/html, который является каталогом по умолчанию для содержимого html Nginx на сервере, но его можно изменить, если нужен.

COPY nginx.conf /etc/nginx/nginx.conf Это скопирует файл nginx.conf, созданный ранее, и заменит содержимое /etc/nginx/nginx.conf на целевом компьютере.

EXPOSE 80/tcp предоставляет порт 80, прослушивает входящие соединения и обслуживает приложение React.

CMD ["/usr/sbin/nginx", "-g", "daemon off;"] запустите сервер nginx и поддерживайте его работоспособность.

ПРИМЕЧАНИЕ: Эти типы изображений, в которых у нас есть два разных этапа сборки (например, React app и Nginx), называются многоступенчатыми сборками

Наконец, создайте образ docker и запустите контейнер docker

Для создания образа docker используйте эту команду

docker build -t with-docker:1.0.0-prod .

После завершения сборки образа запустите контейнер, используя этот образ, с помощью этой команды

docker run -d -p 80:80 --name react-server with-docker

Теперь ваш сервер Nginx прослушивает порт 80 и будет обслуживать ваше приложение React.

Спасибо за чтение.

Источник:

#React #Nginx #Docker

244

Войти на сайт