11 KiB
Конфигурация проекта projects-frontend
Документ описывает, как конфигурируется микрофронтенд projects-frontend: переменные сборки, способы запуска, параметры Docker/nginx, Helm-чарта и CI.
Способы конфигурирования
projects-frontend — это клиентский микрофронтенд (React 17 + MobX, сборка Webpack 5, Module Federation). У приложения нет runtime-конфигурации и файла .env: всё поведение, зависящее от окружения, определяется на этапе сборки одной переменной BUILD_ENV.
Разбор выполняется в configWebpack/config/build.config.ts (extractBuildOptions): значение process.env.BUILD_ENV (одно из local / stage / prod / preprod / contour, по умолчанию prod) определяет режим сборки (development/production) и «endpoint». Полученный endPoint через DefinePlugin (configWebpack/buildPlugins.ts) подставляется в бандл как глобальная константа __ENDPOINT__:
new DefinePlugin({ __ENDPOINT__: JSON.stringify(endPoint) })
Константа __ENDPOINT__ используется в рантайме бандла для выбора:
- карты хостов API —
src/shared/api/http-service.ts(const endpoint = (__ENDPOINT__ as TypeEnvironment) || "prod") поверхsrc/shared/api/hosts.ts; - URL удалённого модуля timeline —
src/widgets/remote-timeline/ui/timelineProxy.tsx; - локального провайдера разработки —
src/app/bootstrap.tsx(__ENDPOINT__ === "local" ? <LocalDevProvider /> : <div />).
Отдельного конфиг-файла (yaml/env) у приложения нет.
Переменные сборки и запуска
| Переменная | Где используется | Значение по умолчанию | Назначение |
|---|---|---|---|
BUILD_ENV |
webpack.config.ts, configWebpack/config/build.config.ts, Dockerfile (build-arg) |
prod |
Целевое окружение сборки: local/stage/prod/preprod/contour. Определяет режим (development/production), карту хостов и URL удалённых модулей |
NPM_NEXUS_TOKEN |
.npmrc, Dockerfile (build-arg) |
— | Токен доступа к приватному npm-реестру Nexus (https://nexus.infra.sarex.io/repository/npm/) для установки пакетов @sarex-team/* |
PORT |
webpack.config.ts |
9001 |
Порт dev-сервера Webpack |
Версия Node фиксирована в .nvmrc — v16.0.0. Приватный реестр и авторизация заданы в .npmrc:
@sarex-team:registry=https://nexus.infra.sarex.io/repository/npm/
//nexus.infra.sarex.io/repository/npm/:_authToken=${NPM_NEXUS_TOKEN}
npm-скрипты (package.json)
| Команда | Действие |
|---|---|
npm run dev |
Локальная разработка: BUILD_ENV=local webpack serve --config webpack.config.ts |
npm run build-module |
Сборка модуля: webpack --config webpack.config.ts (окружение — из BUILD_ENV) |
npm run build:start |
Раздача собранного бандла: serve -s ./dist -l 9001 |
npm run lint |
Форматирование Prettier: npx prettier --write . |
Сборка Webpack и Module Federation
Точка входа — src/app/index.ts (webpack.config.ts). Для всех окружений, кроме local, добавляется ModuleFederationPlugin:
name:srx_projects;filename:module/remoteEntry.js;exposes:./ProjectsPage→./src/app/App.tsx;shared(singleton,requiredVersion: false):react,react-dom,@material-ui/core,@sarex-team/sdk-js.
Плагины (configWebpack/buildPlugins.ts): HtmlWebpackPlugin, DefinePlugin. В режиме local дополнительно ProgressPlugin, ForkTsCheckerWebpackPlugin, ReactRefreshWebpackPlugin; вне local — MiniCssExtractPlugin (хеши в именах файлов).
Dev-сервер (configWebpack/buildDevServer.ts)
HTTPS, порт 9001, historyApiFallback, hot. Прокси на stage-окружение с pathRewrite:
| Префикс | Target |
|---|---|
/sarex-backend |
https://stage.sarex.io |
/sarex-gateway |
https://stage-api.sarex.io/gateway |
/sarex-documentations |
https://stage-api.sarex.io/documentations |
/sarex-api |
https://stage-api.sarex.io |
Заголовки CORS dev-сервера разрешают любой origin, методы GET, POST, PUT, DELETE, PATCH, OPTIONS и заголовки X-Requested-With, content-type, Authorization.
Docker
Многоступенчатая сборка (Dockerfile):
- Стадия сборки (
node:16): установка зависимостей (npm iсNPM_NEXUS_TOKEN),npm run lint,BUILD_ENV=$BUILD_ENV npm run build-module→dist. - Стадия раздачи (
nginx:1.19.6): копированиеdistв/distиnginx/nginx.confв/etc/nginx/nginx.conf.
Build-args: BUILD_ENV, NPM_NEXUS_TOKEN.
nginx (nginx/nginx.conf)
Статика раздаётся с root /dist на порту 80. Особенности:
location = /ping→ возвращает200 {"result": "ok"}(используется как liveness/readiness-проба);location = /module/remoteEntry.js→Cache-Control: no-store, no-cache, must-revalidate…,expires off(точка входа Module Federation не кешируется);gzip on, логи вstdout/stderr.
Helm-чарт (.helm)
Чарт projects-frontend (Chart.yaml, type: application, version: 0.1.0, appVersion: 1.16.0) разворачивает статику как Deployment + Service (templates/static.yaml) и публикует её через Istio VirtualService (templates/mesh-config.yaml).
Значения задаются в values-<env>.yaml (блок static):
| Параметр | stage |
preprod |
production |
|---|---|---|---|
static.host |
stage-modules.sarex.io |
modules.preprod.sarex.io |
modules.sarex.io |
static.replicas |
1 |
2 |
2 |
static.path |
/projects/static/ |
/projects/static/ |
/projects/static/ |
static.image |
sarex/projects-frontend-static:latest |
то же | то же |
static.port / static.service_port |
80 / 80 |
80 / 80 |
80 / 80 |
static.requests |
memory: 100Mi, cpu: 100m |
то же | то же |
imagePullSecrets |
dockerhub |
dockerhub |
dockerhub |
Общее для всех окружений: static.name: projects-frontend-static, static.service_name: projects-frontend-static-service, static.version: stable. Пробы livenessProbe/readinessProbe бьют в /ping (templates/static.yaml).
VirtualService (templates/mesh-config.yaml): хост static.host, шлюз gateway/modules-gateway, матч по префиксу static.path (/projects/static/) с rewrite на /. Политика CORS: allowOrigins по регулярке (https://.*\.sarex\.io)|(https://localhost:.*), allowMethods: [GET, POST, PUT, PATCH, HEAD, DELETE], allowHeaders: [Authorization, Content-Type], maxAge: 24h.
CI/CD (.gitlab-ci.yml)
Пайплайн подключает общие шаблоны из generic/common-ci (universal-pipeline-*, common-security-scan, common-build) и переключает окружение по ветке/тегу через workflow.rules:
| Условие | STAND | Namespace | BUILD_ENV |
|---|---|---|---|
ветка master |
preprod |
projects-preprod |
preprod |
ветка stage |
stage |
projects-stage |
stage |
тег (CI_COMMIT_TAG) |
prod |
projects-prod |
prod |
Ключевые переменные пайплайна (общие для всех окружений): RELEASE_NAME/CHART_NAME = projects-frontend, IMAGE_PATH = static.image, HELM_SET_ARGS = --set static.image=${IMAGE_NAME}, BUILD_ARGS = --build-arg BUILD_ENV=<env> --build-arg NPM_NEXUS_TOKEN=${NPM_NEXUS_TOKEN}, DOCKERFILE_PATH = Dockerfile. Флаги этапов: ENABLE_LINTER (false), ENABLE_BUILD_CHART, ENABLE_BUILD_IMAGE, ENABLE_STATE_UPDATE, ENABLE_DEPLOY (true). CHART_VERSION задаётся как 0.0.1-<env>. Стадии: linter → test → unittest → prebuild-secscan → build → state-update → deploy.
Замечания и потенциальные проблемы
- Нет runtime-конфигурации. Всё, что зависит от окружения, «зашивается» в бандл на этапе сборки через
BUILD_ENV/__ENDPOINT__. Пересборка под другое окружение обязательна — переопределить хосты в рантайме нельзя. - Значение по умолчанию
BUILD_ENV=prod. Если переменная не задана при сборке, собирается production-вариант (build.config.ts,webpack.config.ts,http-service.ts). Для локальной разработки нужно явноBUILD_ENV=local(скриптnpm run devэто делает). - Окружение
contourнеполно сконфигурировано. Оно перечислено вbuild.config.tsи типах, но вsrc/shared/api/hosts.tsкарта хостов дляcontourотсутствует, а URL удалённого модуля timeline дляcontourпуст (timelineProxy.tsx). Сборка сBUILD_ENV=contourне сможет разрешить хосты API. - README не совпадает с
package.json. ВREADME.mdуказаныnvm use 16.0.0иnpm run start:local, однако скриптаstart:localвpackage.jsonнет — локальный запуск выполняется командойnpm run dev..nvmrcфиксируетv16.0.0. - Версии чарта расходятся. В
Chart.yaml—version: 0.1.0/appVersion: 1.16.0, тогда как в CICHART_VERSIONзадаётся как0.0.1-<env>. Значения не синхронизированы. - Приватный реестр. Установка зависимостей требует валидный
NPM_NEXUS_TOKEN(.npmrc); без негоnpm i(в т.ч. в Docker-сборке) завершится ошибкой авторизации.
Минимальный набор для локального запуска
nvm use(Nodev16.0.0из.nvmrc).- Экспортировать
NPM_NEXUS_TOKEN(доступ к Nexus) и выполнитьnpm i. npm run dev— соберёт сBUILD_ENV=localи поднимет HTTPS dev-сервер наhttps://localhost:9001(запросы к backend проксируются на stage через/sarex-backend,/sarex-gateway,/sarex-documentations,/sarex-api).