CORS problem solution

Reviewed-on: #3

.env.example

@@ -1,6 +1,7 @@
-VITE_CLOUD_API_URL=http://localhost:3101
+branch=
+DEV_API_URL=http://localhost:3101
 VITE_DIAGRAM_API_URL=http://localhost:3002
 VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru
-VITE_KEYCLOAK_URL=
-VITE_KEYCLOAK_REALM=
-VITE_KEYCLOAK_CLIENT_ID=
+VITE_KEYCLOAK_URL=https://sso.greact.ru
+VITE_KEYCLOAK_REALM=toir
+VITE_KEYCLOAK_CLIENT_ID=localhost

.env.local.example

@@ -1,10 +0,0 @@
-VITE_CLOUD_API_URL=http://localhost:3101
-VITE_DIAGRAM_API_URL=http://localhost:3002
-
-# Если эти переменные не заданы, greact.drill.ui работает без SSO для локальной разработки.
-VITE_KEYCLOAK_URL=https://sso.greact.ru
-VITE_KEYCLOAK_REALM=toir
-VITE_KEYCLOAK_CLIENT_ID=drill-ui-frontend
-
-# Origin встроенного ТОиР light. По умолчанию используется https://toir-light.greact.ru.
-VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru

Dockerfile

@@ -7,13 +7,11 @@ FROM node:22-alpine AS build
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-ARG VITE_CLOUD_API_URL
 ARG VITE_DIAGRAM_API_URL
 ARG VITE_TOIR_LIGHT_ORIGIN
 ARG VITE_KEYCLOAK_URL
 ARG VITE_KEYCLOAK_REALM
 ARG VITE_KEYCLOAK_CLIENT_ID
-ENV VITE_CLOUD_API_URL=$VITE_CLOUD_API_URL
 ENV VITE_DIAGRAM_API_URL=$VITE_DIAGRAM_API_URL
 ENV VITE_TOIR_LIGHT_ORIGIN=$VITE_TOIR_LIGHT_ORIGIN
 ENV VITE_KEYCLOAK_URL=$VITE_KEYCLOAK_URL

docker-compose.yml

@@ -1,9 +1,9 @@
 services:
   drill-ui:
+    container_name: drill-ui${branch:+-${branch}}
     build:
       context: .
       args:
-        VITE_CLOUD_API_URL: ${VITE_CLOUD_API_URL}
         VITE_DIAGRAM_API_URL: ${VITE_DIAGRAM_API_URL}
         VITE_TOIR_LIGHT_ORIGIN: ${VITE_TOIR_LIGHT_ORIGIN}
         VITE_KEYCLOAK_URL: ${VITE_KEYCLOAK_URL}
@@ -11,7 +11,9 @@ services:
         VITE_KEYCLOAK_CLIENT_ID: ${VITE_KEYCLOAK_CLIENT_ID}
     expose:
       - "80"
+    networks:
+      - proxy
 
 networks:
-  external:
-    true
+  proxy:
+    external: true

src/shared/config/env.ts

@@ -1,4 +1,5 @@
-export const cloudApiUrl = import.meta.env.VITE_CLOUD_API_URL as string;
+/** Базовый путь cloud API; маршрутизация на бэкенд — на уровне реверс-прокси. */
+export const cloudApiUrl = '/api';
 export const diagramApiUrl = import.meta.env.VITE_DIAGRAM_API_URL as string;
 export const toirLightOrigin = import.meta.env.VITE_TOIR_LIGHT_ORIGIN as string;
 export const keycloakUrl = import.meta.env.VITE_KEYCLOAK_URL;

src/vite-env.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_CLOUD_API_URL?: string;
   readonly VITE_DIAGRAM_API_URL?: string;
   readonly VITE_TOIR_LIGHT_ORIGIN?: string;
   readonly VITE_KEYCLOAK_URL?: string;

vite.config.ts

@@ -1,19 +1,23 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    chunkSizeWarningLimit: 700,
-  },
-  server: {
-    port: 5173,
-    proxy: {
-      '/api': {
-        target: 'https://beta.backend.drill.greact.ru',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ''),
+export default defineConfig(({ mode }) => {
+  const { DEV_API_URL } = loadEnv(mode, '.', '');
+
+  return {
+    plugins: [react()],
+    build: {
+      chunkSizeWarningLimit: 700,
+    },
+    server: {
+      port: 5173,
+      proxy: {
+        '/api': {
+          target: DEV_API_URL,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
       },
     },
-  },
+  };
 });