Безусловно, хорошо продуманная демонстрационная среда — ваш золотой билет в сегодняшнюю среду разработки интерфейсов! Используя Docker и GitLab CI, вы можете быстро упаковать и развернуть свои проекты на основе React и Vite. Это оптимизированный подход, который не только улучшает совместную работу команды, но и привлекает клиентов, показывая им функциональные интерактивные демонстрации вместо статичных слайдов. Благодаря скорости и автоматизации вы не просто идете в ногу с быстро меняющимся миром технологий; ты задаешь темп!
Если вас интересует, как создать демо-версию с помощью Mock.js, прочтите эту статью!
Настройки упаковки
Во-первых, нам нужно настроить среду упаковки проекта, чтобы обеспечить правильную работу проекта в контейнере Docker. Ниже приведен пример настройки Dockerfile и package.json:
Докерфайл:
FROM node:16.17.1-slim WORKDIR /app COPY package.json package-lock.json ./ RUN npm ci COPY . . EXPOSE 8080 CMD ["npm", "run", "dev"]
пакет.json:
"scripts": {
"dev": "vite --host --port 8080",
"build": "tsc && vite build",
},
В Dockerfile мы выбрали Node.js 16.17.1 в качестве базового образа и установили рабочий каталог и команду запуска контейнера по умолчанию. В package.json мы определяем две общие команды сценария для запуска сервера и создания демонстрационного кода.
Настройки CI/CD
Далее мы настроим процесс GitLab CI/CD для автоматической сборки и развертывания. Ниже приведен пример файла конфигурации .gitlab-ci.yml:
stages:
- build-demo
- deploy-demo
variables:
IMAGE_DEMO_TAG: $CI_REGISTRY_IMAGE:demo
build-demo:
stage: build-demo
script:
- docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
- docker build -t $IMAGE_DEMO_TAG -f Dockerfile.demo .
- docker push $IMAGE_DEMO_TAG
only:
refs:
- develop
deploy-demo:
stage: deploy-demo
image: google/cloud-sdk:437.0.1-alpine
variables:
GCP_IMAGE_TAG: YOUR_GCP_REPOSITORY/$CI_PROJECT_NAME:demo
before_script:
- 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
- apk update && apk add bash
- apk update && apk add gettext
script:
- echo $GCP_CLOUDRUN_SERVICE_KEY > gcp_key.json
- gcloud auth activate-service-account --key-file=gcp_key.json
- gcloud config set project $GCP_OASIS_PROJECT
- gcloud auth configure-docker asia-northeast1-docker.pkg.dev
- docker tag $IMAGE_DEMO_TAG $GCP_IMAGE_TAG
- docker push $GCP_IMAGE_TAG
- envsubst '$GCP_IMAGE_TAG' < service_template.yaml > service.yaml
- cat service.yaml
- gcloud run services replace ./service.yaml
only:
refs:
- develop
В этом файле конфигурации мы определяем два этапа: build-demo и deploy-demo. На этапе build-demo мы используем Docker для создания образа проекта и отправки его в репозиторий изображений GitLab. На этом этапе deploy-demo мы используем Google Cloud SDK для развертывания образа в Google Cloud Run.
Обратите внимание, что $GCP_CLOUDRUN_SERVICE_KEY и $GCP_OASIS_PROJECT должны быть предварительно определены в GitLab. $GCP_CLOUDRUN_SERVICE_KEY — это сервисная учетная запись в GCP, для которой вы можете установить минимальные привилегии в настройках IAM и использовать эту учетную запись для развертывания; $GCP_OASIS_PROJECT — это имя вашего проекта GCP.
$CI_REGISTRY_USER и $CI_REGISTRY_PASSWORD — это предопределенные переменные в GitLab CI. Информацию о других предопределенных переменных GitLab можно найти в следующей статье:
Этот процесс автоматически запускается каждый раз, когда код фиксируется в ветке develop, обеспечивая автоматическую сборку и развертывание.
Настройка облачного запуска
Наконец, нам следует определить файл шаблона для настройки Cloud Run. Вы можете прочитать эту статью с подробными объяснениями настройки Cloud Run.
Заключение
В мире, где «время — деньги», возможность быстро создавать и публиковать демоверсию внешнего интерфейса может стать вашим конкурентным преимуществом. Мы рассмотрели, как контейнеры Docker могут упаковать ваши проекты React и Vite в легко развертываемую форму. Мы также рассмотрели автоматизацию этого процесса с помощью GitLab CI и Google Cloud Run, чтобы ваша команда могла сосредоточиться на том, что у них получается лучше всего: кодировании и инновациях. Инвестируя в сложную демонстрационную среду, вы, по сути, прокладываете путь к ускорению циклов разработки, расширению сотрудничества и, в конечном итоге, к более счастливым клиентам. Это беспроигрышный сценарий, и возможности того, чего вы можете достичь, безграничны. Так зачем ждать? Погрузитесь в суть и используйте мощь этих технологий, чтобы создать идеальную интерфейсную демонстрационную среду! Будущее оптимистично, и оно начинается с вашего следующего обязательства.
