Хотите стать фронтенд-звездой? Докеризация приложений React/Vue за одну песню

Vue.js React.js
Хотите стать фронтенд-звездой? Докеризация приложений React/Vue за одну песню

предисловие

У меня всегда был вопрос, который не давал мне покоя: все дуютDockerКонтейнеризация, какое отношение она имеет к интерфейсу?

Однако за последние два года карьеры программиста в каждой итерации продукта я постепенно осознавал прелесть контейнеризации.

Развертывание приложений от слеша и записи доDevOpsПодъем, оказывается, не только передняя часть быстро развивается. Далее я буду использовать время песни, чтобы подарить вам настоящий опыт.Dockerконтейнерный.

1. ОбычнаяDockerfile

Сначала подготовьте стандартную команду запускаWebаппликация, с подмосткамиcreat-react-appилиVue CLIПодождите, пока он будет сгенерирован.

нижеDockerfileНе смешивайте другие зависимости, стремитесь понять:

# 指定Node版本
FROM node:12.18.3

# 容器中应用程序的路径。将Web目录作为工作目录
WORKDIR /web

# 将package.json 复制到 Docker 环境
COPY ./package.json /web/package.json

# 安装依赖
RUN yarn

# 将代码复制到Docker容器中的Web目录 
COPY . /web/

# 暴露容器内部访问端口，根据项目变动
EXPOSE 8080

## 如果是Vue CLi，则换成 yarn serve
CMD ["npm", "start"]

Да, среда разработкиDockerРазвертывание, конфигурация ключа — всего несколько строк.

Кроме того, необходимо добавить.dockerignoreфайлы для ускорения процесса сборки

node_modules/**/*
build/**/*
.DS_Store

2. Сборка для приложенияDockerзеркало

Сначала убедитесь, что вашDcokerБег.

Запустите следующую команду для сборкиDockerИзображение.react-dockerМожно заменить на то, что вы хотите назвать изображение.

docker build -t react-docker .

в-tЧто касается значения маркировки, после выполнения вы увидите:

Successfully built 137c69857dd0
Successfully tagged react-docker:latest

Ваше изображение готово к отправке.

3. БегиDocker + React/Vue App

Теперь используйте следующееdocker runзаказать черезDockerв порту3000запускать наReactзаявление.

docker run -p 3000:3000 react-docker

Среди них: предыдущие 3000 соответствуют этой машинеhttp://localhost:3000/, вторые 3000 этоDockerконтейнерный порт.

в состоянии пройтиDcoker psПросмотр информации о контейнере

существуетDockerизDashboardтакже можно увидеть в:

Открой сейчасhttp://localhost:3000/Вы увидите знакомую и дружелюбную картину

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

4. ИспользуйтеDocker ComposeСтандартизированный процесс

Будуdocker-compose.ymlДобавьте файл в корневой каталог проекта:

version: '3.7'

services:

  sample:
    container_name: sample
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true

С этим файлом нет необходимости пошагово, просто:

docker-compose up -d --build

Вы можете увидеть ту же сборку:

5. В производственной средеDockerfile

Требуется в производственной средеnginxКонфигурация, сначала создайте в корневом каталогеnginx.config

server {
    listen       ${PORT:-80};
    server_name  _;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $$uri /index.html;
    }
}

Давайте создадим отдельныйDockerfile, для производственных сред, называемыхDockerfile.prod:

FROM node:12.18.3 AS builder

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./

# 前端项目构建命令 — npm ci 或 npm install 
# http://www.gaoxiukun.com/wp/archives/509

RUN npm ci
# React 应用需要react-script
RUN npm install react-scripts@3.4.1 -g

COPY . ./
RUN npm run build

# 安装nginx
FROM nginx:1.17-alpine
RUN apk --no-cache add curl
RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname -s`-`uname -m` -o envsubst && \
    chmod +x envsubst && \
    mv envsubst /usr/local/bin
COPY ./nginx.config /etc/nginx/nginx.template
CMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]

COPY --from=builder /app/build /usr/share/nginx/html

потому чтоDockerfile.prodНе является исполняемым файлом по умолчанию, поэтому его необходимо собрать и пометить:

docker build -f Dockerfile.prod -t sample:prod .

выполнить следующийdocker run

docker run -it --rm -p 3000:80 sample:prod
  • -i: Запустите контейнер в интерактивном режиме.
  • -t: переназначает псевдотерминал ввода для контейнера, обычно с-iиспользовать одновременно.
  • --rm: Автоматически очищать файловую систему внутри контейнера при выходе из контейнера, вы можете игнорировать это, если вы не понимаете
  • -p: указывает порт.

Успешно запустить:

Перейдите кhttp://localhost:3000для просмотра приложения.

Далее используйте новыйDocker Composeдокументы иdocker-compose.prod.ymlпровести тестирование:

version: '3.7'

services:
  sample-prod:
    container_name: sample-prod
    build:
      context: .
      dockerfile: Dockerfile.prod
    ports:
      - '3000:80'

Запустите контейнер:

docker-compose -f docker-compose.prod.yml up -d --build

Еще раз проверьте в браузере.

❤️ Заключение

В прошлом яDockerКонцепция контейнеризации только остается в понимании. В реальной практике его также пугала и уговаривала бросить группа инструкций.

В этой статье ослабляются параметры командной строки, надеясь, что большинство новичков сначала разберутся, а потом перейдут к практике.Docker, а потом учитьсяk8sСвязанный.

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

Если вы найдете этот контент вдохновляющим, я хотел бы пригласить вас сделать мне три небольших одолжения:

  1. Ставьте лайк, чтобы больше людей увидело этот контент
  2. Обратите внимание на «Учителей фронтенд-убеждения» и время от времени делитесь оригинальными знаниями.
  3. Также смотрите другие статьи

Вы также можете прийти ко мнеGitHubПолучите исходные файлы всех статей в блоге:

Руководство по убеждению:GitHub.com/Roger-Hi RO/…Давай поиграем. ~

Категории