Создать новое приложение RACT
Это требуется только в том случае, если вы начинаете с нуля и не имеете существующего кода/приложения, который вы хотели бы контейнеризировать.
NPX Create-ract-app My-App
Использование «NPX» гарантирует, что вы всегда используете последнюю версию «Create-React-App».
Докер — очень короткий обзор
Docker помогает нам сделать контейнерные приложения. Что это значит, что мы создаем один пакет, который не только содержит код нашего приложения, но и все необходимые библиотеки, программное обеспечение, конфигурации и т. Д.
Ключевые термины
Я не собираюсь записать фактические определения, скорее я постараюсь объяснить их с помощью примеров или аналогов.
Изображение: пакет, который содержит все необходимое для запуска вашего приложения. Думайте об этом как о классе в Оопе.
Контейнер: это экземпляр изображения, как объект в Оопе
Объем: изображения только для чтения, чтобы сохранить данные, которые вам необходимо использовать. В простейших терминах вы делитесь папкой (на хост-ОС) с изображением докера для чтения/записи данных из/к нему.
DockerFile: Здесь вы определяете, что будет внутри изображения, вы пытаетесь построить. Как ОС (E.g Ubuntu 16), Softwares (E.G узел) и т. Д.
Теги: пока просто считайте его в буквальном выражении.
Установить Docker
Скачать и установить Docker Отказ Возможно, вам придется создать бесплатную учетную запись Docker Chib.
Файлы конфигурации
Нам нужно создать конф. Файлы для:
- Nginx (наш веб-сервер)
- DockerFile (чтобы построить изображение докера)
Nginx.
Внутри вашего приложения (My-App) каталог создайте другой каталог и назовите его nginx
Отказ Внутри каталога NGINX вы только что создали, создайте новый файл и назовите его nginx.conf.
. Вы также можете использовать для следующих команд (одностороннее, чтобы достичь его).
cd my-app mkdir nginx cd nginx touch nginx.conf
Отредактируйте файл «NGINX.conf», который вы только что создали в любом редакторе, который вы хотите, и добавьте следующий код. Это нечего бояться, это просто стандартный блок Nginx Server — даже если вы не понимаете одну строку в нем, это просто хорошо. Гист того, что мы делаем, это то, что мы говорим Nginx прослушивать порта 80, перенаправляйте каждый запрос на «index.html» и корневой root is «/usr/share/nginx/html» (каталог, где подать от) Отказ
server { listen 80; location / { root /usr/share/nginx/html; index index.html index.htm; # to redirect all the requests to index.html, # useful when you are using react-router try_files $uri /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }
Но зачем нам нужен nginx ???
Файлы сборки RiveDJS являются просто статическими (HTML, CSS, JS и т. Д.) Файлы, и вам нужен какой-то веб-сервер производственно-класса для обслуживания ваших статических файлов, таких как Nginx, Apache, OpenLiteSpeed и т. Д.
Dockerfile
Внутри вашего каталога приложения Создайте новый файл и назовите его как Dockerfile.Prod
Отказ Внутри этого файла напишите следующие строки кода.
# stage1 - build react app first FROM node:12.16.1-alpine3.9 as build WORKDIR /app ENV PATH /app/node_modules/.bin:$PATH COPY ./package.json /app/ COPY ./yarn.lock /app/ RUN yarn --silent COPY . /app RUN yarn build # stage 2 - build the final image and copy the react build files FROM nginx:1.17.8-alpine COPY --from=build /app/build /usr/share/nginx/html RUN rm /etc/nginx/conf.d/default.conf COPY nginx/nginx.conf /etc/nginx/conf.d EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
Создайте новый файл и назовите его как .Dockerignore
и добавить Node_Modules
внутри него. Это просто чтобы сказать Docker игнорировать Node_Modules
каталог.
Так что структура вашего каталога должна быть таковой
my-app │ Dockerfile.prod │ .dockerignore │ └───nginx nginx.conf
Шаг за шагом Объяснение:
Этап 1
- Мы будем использовать многоступенчатую сборку докера. Это новая функция, представленная в V17 Docker.
От
рассказывает, какое основное изображение использовать. Вы можете проверить базовые изображения на Docker Hub Отказ Вам всегда нужно сначала указать базовое изображение.Workdir
используется для уточнения рабочего каталога (внутри изображения, а не ваш хост ОС)ЭНВ путь
Добавляет Node_Modules на путиСкопировать
используется для копированияpackage.json
из текущего каталога (на хосте) в рабочий каталог (на изображении).Беги
используется для запуска команды, здесь мы хотим запуститьПряжа
с--silent
Флаг, чтобы выключить журнал установки. Возможно, вы не хотите использовать этот флаг, так как он также надеется на ошибки.Скопировать
снова работает, чтобы скопировать весь код из хост-ОС для рабочего каталога на изображении- Наконец, бегите
пряжа построить
Чтобы построить наше приложение
Сначала мы скопировали Package.json сначала установить зависимости и не скопировали Node_Modules в изображение. Это использует отличную систему кэширования Docker и сократить время сборки.
Этап 2
На первом этапе мы скопировали Package.json в рабочий каталог, установил зависимости, скопировал наш код и построил окончательные статические файлы. На этапе 2 мы:
- Использование
Nginx
как базовое изображение. В «Nginx: 1.17.8-Alpine», «Nginx» — это изображение, а «1.17.8-Alpine» — это тег. Как будто мы говорим, какая конкретная версия/выпуск базового изображения Nginx мы будем использовать. - Мы хотим скопировать файлы сборки с Stage 1 до «/usr/share/nginx/html». Это каталог по умолчанию, в котором подают nginx. Таким образом, мы копируем наши файлы сборки в этот каталог.
- Удалите файл конфигурации NGINX по умолчанию на «/etc/nginx/Conf.d/default.conf»
- Скопируйте файл конфигурации, который мы создали в Docker Image
Выставить
Используется для выставления порта (80 — порт HTTP по умолчанию, вот что мы хотим, чтобы наш Nginx послушать). Одна ловушка здесь заключается в том, что он на самом деле не выставляет порт, скорее это только для документации. Как и новый разработчик, посмотрите на DockerFile, и он знает, какой порт (ы) выставляют при запуске изображения.- Наконец, мы хотим запустить Nginx на переднем плане, а не как демон (то есть на заднем плане).
Оба CMD
и Беги
используются для запуска команд. Разница в том, что Беги
Шаг застройки изображения, тогда как CMD
Команда контейнера выполняется по умолчанию при запуске созданного изображения (в качестве контейнера).
Построить изображение
Пришло время создавать изображение из DockerFile, который мы создали выше. Убедитесь, что вы находитесь в каталоге приложений на корневом уровне. Запустите следующую команду, чтобы построить и пометить свое изображение.
Docker Build -f Dockerfile.Prod -T My-First-изображение: последние.
-f
используется для указания имени файла. Если вы не укажете это, то вы должны переименовать свой файл наDockerfile
— Это то, что команда сборки ищет в текущем каталоге по умолчанию.-t
используется для помещения изображения. Вы можете пометить ваше изображение, как вы хотите (например, V1.0.0, V2.0.0, производство, последние и т. Д.).
В конце важно, и его следует добавить, чтобы сказать Docker использовать текущий каталог.
Запустите свое изображение в качестве контейнера (создать действие вашего изображения)
Последний шаг — запускать ваше изображение (как контейнер) Docker Run -it -p 80:80 --rm My-First-изображение: последний
-Это
для интерактивности-П
разоблачить и связывать порты. Здесь мы выставляем порт 80 контейнера и связываем его с портом 80 хост-машины. Первый из вашей машины (хост-ОС), а второй — это контейнер для Docker Image. Например, если вы используете-P 1234: 80
Тогда вам нужно будет пойти наhttp://localhost: 1234
на вашем браузере.--rm
Удалить контейнер Как только он остановленMy-First-изображение: последние
Имя: тег изображения, которую мы хотим запустить контейнер
Теперь откройте свой браузер и перейдите в http://localhost
И вы увидите ваше приложение, обслуживаемое от докера.
Экстрас
- Беги
Docker Images
илиDocker Image Ls.
Чтобы увидеть список всех изображений на вашем компьютере - Беги
Докерный контейнер Ls.
илиDocker PS
Чтобы увидеть все беговые контейнеры - Беги
Docker System Bruny
Чтобы обрезать контейнеры (будьте осторожны при использовании этой команды, прочитайте документы для параметров, прежде чем использовать их)
Следующий: Разверните свое приложение React в ECS
Давайте подключимся:
LinkedIn: https://www.linkedin.com/in/mubbashir10/
Twitter: https://twitter.com/mubbashir100.
Оригинал: «https://dev.to/mubbashir10/containerize-react-app-with-docker-for-production-572b»