Эй, добро пожаловать назад. Эта статья является частью серии Dockerize, обязательно проверить представление о том, куда я иду на некоторые концепции, которые мы собираемся использовать.
Сегодня мы связываем наше приложение React Application, воспользовавшись узором построителя с помощью нескольких этапов для оптимизации!
Я также сделал видео, если вы хотели бы следовать вдоль
Настройка проекта
Я инициализировал довольно стандартный проект реагирования, используя по умолчанию Создать приложение React (CRA) шаблон.
Весь код из этой статьи будет доступен в это репо
├── node_modules ├── public │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── package.json └── yarn.lock
Для разработки
Давайте начнем с добавления Dockerfile.
FROM node:14-alpine AS development ENV NODE_ENV development # Add a work directory WORKDIR /app # Cache and Install dependencies COPY package.json . COPY yarn.lock . RUN yarn install # Copy app files COPY . . # Expose port EXPOSE 3000 # Start the app CMD [ "yarn", "start" ]
Добавить .dockerignore. это поможет нам игнорировать Node_Modules , .env так далее
**/node_modules **/npm-debug.log build
Давайте создадим docker-compose.dev.yml Отказ Здесь мы также смонтим наш код в объем Так что мы можем синхронизировать наши изменения с контейнером при разработке.
version: "3.8"
services:
app:
container_name: app-dev
image: app-dev
build:
context: .
target: development
volumes:
- ./src:/app/src
ports:
- 3000:3000
Давайте начнем наше приложение React для разработки!
docker-compose -f docker-compose.dev.yml up
Мы также можем добавить его в нашу Package.json.
"dev": "docker-compose -f docker-compose.dev.yml up"
мы можем использовать -d Флаг, чтобы запустить в режиме демона
Давайте проверим наш контейнер!
docker ps
REPOSITORY TAG IMAGE ID CREATED SIZE app-dev latest 5064f3e40c97 About a minute ago 436MB
Над 400 МБ ! Не волнуйтесь, это только для развития. Мы будем оптимизировать нашу производственную сборку с узором построителя!
Для производства
Мы будем использовать nginx служить нашим статическим активам и поможет разрешать маршруты, когда мы используем React Router или любой вид маршрутизации.
Примечание. Лично я не рекомендую использовать статические пакеты серверов, как обслуживать В производстве Nginx дает нам гораздо более производительность и контроль
Давайте создадим nginx.conf.
server {
listen 80;
location / {
root /usr/share/nginx/html/;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
}
Давайте обновим наше Dockerfile для производство
FROM node:14-alpine AS builder ENV NODE_ENV production # Add a work directory WORKDIR /app # Cache and Install dependencies COPY package.json . COPY yarn.lock . RUN yarn install --production # Copy app files COPY . . # Build the app RUN yarn build # Bundle static assets with nginx FROM nginx:1.21.0-alpine as production ENV NODE_ENV production # Copy built assets from builder COPY --from=builder /app/build /usr/share/nginx/html # Add your nginx.conf COPY nginx.conf /etc/nginx/conf.d/default.conf # Expose port EXPOSE 80 # Start nginx CMD ["nginx", "-g", "daemon off;"]
Давайте добавим docker-compose.prod.yml файл
version: "3.8"
services:
app:
container_name: app-prod
image: app-prod
build:
context: .
target: production
Построить производственное изображение
docker-compose -f docker-compose.prod.yml build
Давайте проверим наш построенный производственный образ
docker images
Использование Builder Pattern Мы сократили размер изображения для просто ~ 23 МБ !
REPOSITORY TAG IMAGE ID CREATED SIZE app-prod latest c5db8d308bb9 About a minute ago 23.1MB
Начнем наш производственный контейнер на порту 80 с именем реактивное приложение
docker run -p 80:80 --name react-app app-prod
Оптимизация статических активов (бонус)
Вы также можете добавить следующее внутри Расположение Блок для введения кэширования для наших статических активов и JavaScript Bundle.
Вы можете отослать это Руководство погрузиться глубоко в оптимизации
# Cache static assets
location ~* \.(?:jpg|jpeg|gif|png|ico|svg)$ {
expires 7d;
add_header Cache-Control "public";
}
# Cache css and js bundle
location ~* \.(?:css|js)$ {
add_header Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
}
Следующие шаги
С этим мы должны иметь возможность воспользоваться Docker в нашем рабочим процессе и развернуть наши производственные изображения быстрее на любую платформу нашего выбора.
Не стесняйтесь добраться до меня на Twitter Если вы сталкиваетесь с любыми проблемами.
Оригинал: «https://dev.to/karanpratapsingh/dockerize-your-react-app-4j2e»