Как развернуть интерфейсные приложения с помощью Docker

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

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

Теперь я подчеркиваю концепцию devops.Я поставил пять символов devops на рабочий стол компьютера, и я узнал об этом за день. Внезапно devops означает написание Dockerfile для запуска приложения (шутка.

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

Оригинальный адрес:Как эффективно развернуть интерфейс с докером
Серия статей:что я делаю, когда у меня есть облачный сервер

Если эта статья может помочь вам, вы можете помочь мне вshfshanyue/op-noteнажмите на звезду

Если вы новичок, в Alibaba Cloud действуют скидки на покупку машин, вы можете нажатьСвязьКупить. вы можете следить за моими заметкамиРуководство по эксплуатации и обслуживанию серверачтобы начать обслуживание сервера и создание приложения.

Приглашаем вас купить облачный сервер за 86 юаней в год

Пусть сначала запустится

Во-первых, кратко представим типичный процесс развертывания внешнего интерфейса.

npm install, установить зависимости
npm run build, компилировать, упаковывать, генерировать статические ресурсы
Подавать статические ресурсы

После знакомства с процессом развертывания просто напишите Dockerfile

FROM node:alpine

# 代表生产环境
ENV PROJECT_ENV production
# 许多 package 会根据此环境变量，做出不同的行为
# 另外，在 webpack 中打包也会根据此环境变量做出优化，但是 create-react-app 在打包时会写死该环境变量
ENV NODE_ENV production
WORKDIR /code
ADD . /code
RUN npm install && npm run build && npm install -g http-server
EXPOSE 80

CMD http-server ./public -p 80

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

Используйте nginx или traefik в качестве обратного прокси.
Используйте kubernetes или compose для оркестровки.
Используйте gitlab ci или drone ci для CI/CD

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

Создание образа занимает слишком много времени
Размер образа сборки слишком велик, 1G+

Начните с зависимостей и devDependencies

Лу Сяофэн сказал, что если фронтенд-программист работает восемь часов в день, то как минимум два часа тратятся впустую. Один час на установку npm, еще час на сборку npm run.

Для каждого развертывания, если вы можете уменьшить загрузку бесполезных пакетов, вы можете сэкономить много времени на создание образа. Тестовые модули стиля кода, такие как eslint, mocha, chai и т. д., могут быть размещены в devDependencies. Использование в производственной средеnpm install --productionупаковка.

Чтобы узнать разницу между ними, обратитесь к документации.документы The Horse Plus.com/files/crackka…

FROM node:alpine

ENV PROJECT_ENV production
ENV NODE_ENV production
WORKDIR /code
ADD . /code
RUN npm install --production && npm run build && npm install -g http-server
EXPOSE 80

CMD http-server ./public -p 80

Вроде немного быстрее.

Мы заметили, что package.json относительно стабилен по сравнению с исходными файлами проекта. Если нет новых установочных пакетов для загрузки, вам не нужно переупаковывать при повторной сборке образа. Вы можете сэкономить половину времени на установке npm.

Использовать кеш изображений

дляADDДругими словами, если содержимое, которое необходимо добавить, не изменилось, можно использовать кэширование. Запись package.json на зеркало отдельно от исходного файла — хороший вариант. В настоящее время, если нет нового обновления установочного пакета, это может сэкономить половину времени.

FROM node:alpine

ENV PROJECT_ENV production
ENV NODE_ENV production

# http-server 不变动也可以利用缓存
RUN npm install -g http-server

WORKDIR /code

ADD package.json /code
RUN npm install --production

ADD . /code
RUN npm run build
EXPOSE 80

CMD http-server ./public -p 80

Есть более подробная информация об использовании кешей, требующая особого внимания, напримерRUN git clone <repo>кеш этого класса

Обратитесь к официальной документацииdocs.docker.com/develop/Дев…

многоступенчатая сборка

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

Рассмотрите поток каждого развертывания CI

Соберите образ на сервере сборки
Отправьте зеркало на сервер зеркального склада,
Загрузите образ на производственный сервер и запустите контейнер.

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

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

Большая часть большого размера изображения связана с пресловутым размером node_modules.

Но, в конце концов, нам нужен только контент в общей папке.Для исходных файлов и файлов в node_modules занимаемый объем слишком велик и не нужен, что приводит к ненужным затратам.

На этом этапе вы можете воспользоваться преимуществами многоступенчатой сборки Docker для извлечения только скомпилированных файлов.

Обратитесь к официальной документацииdocs.docker.com/develop/Дев…

FROM node:alpine as builder

ENV PROJECT_ENV production
ENV NODE_ENV production

# http-server 不变动也可以利用缓存
WORKDIR /code

ADD package.json /code
RUN npm install --production

ADD . /code
RUN npm run build

# 选择更小体积的基础镜像
FROM nginx:alpine
COPY --from=builder /code/public /usr/share/nginx/html

На данный момент объем изображения изменился с 1G+ до 50M+.

Используйте CDN

Проанализируйте объем образа более 50 М, образ nginx:alpine — 16 М, а остальные 40 М — это статические ресурсы.

Если вы заливаете статические ресурсы в CDN, заходить на зеркало не нужно, размер изображения будет контролироваться ниже 20M

Что касается статических ресурсов, то их можно разделить на две части.

/static, такие файлы напрямую ссылаются на корневой путь в проекте, копируются в /public при упаковке и требуют зеркалирования.
/build, на такие файлы нужно ссылаться через require, они будут упакованы и хешированы webpack, а адрес ресурса будет изменен через publicPath. Вы можете залить такие файлы на cdn, и добавить постоянный кеш, не нужно заходить на зеркало

FROM node:alpine as builder

ENV PROJECT_ENV production
ENV NODE_ENV production

# http-server 不变动也可以利用缓存
WORKDIR /code

ADD package.json /code
RUN npm install --production

ADD . /code

# npm run uploadCdn 是把静态资源上传至 cdn 上的脚本文件
RUN npm run build && npm run uploadCdn

# 选择更小体积的基础镜像
FROM nginx:alpine
COPY --from=builder code/public/index.html code/public/favicon.ico /usr/share/nginx/html/
COPY --from=builder code/public/static /usr/share/nginx/html/static

Обратите внимание на публичный аккаунтГорная Луна Путешествие, зафиксируйте мой технический рост, добро пожаловать в общение