feat(docker): add frontend service to docker-compose with env config improvements (#10536)

## Summary
This PR adds the frontend service to the Docker Compose configuration,
enabling `docker compose up` to run the complete stack including the
frontend. It also implements comprehensive environment variable
improvements and fixes Docker networking issues.

## Key Changes

### 🐳 Docker Compose Improvements
- **Added frontend service** to `docker-compose.yml` and
`docker-compose.platform.yml`
- **Production build**: Uses `pnpm build + serve` instead of dev server
for better stability and lower memory usage
- **Service dependencies**: Frontend now waits for backend services
(`rest_server`, `websocket_server`) to be ready
- **YAML anchors**: Implemented DRY configuration to avoid duplicating
environment values

### 🔧 Environment Variable Architecture
- **Dual environment strategy**: 
- Server-side code uses Docker service names
(`http://rest_server:8006/api`)
  - Client-side code uses localhost URLs (`http://localhost:8006/api`)
- **Comprehensive config**: Added build args and runtime environment
variables
- **Network compatibility**: Fixes connection issues between frontend
and backend containers

### 🛠️ Code Improvements
- **Centralized env-config helper** (`/frontend/src/lib/env-config.ts`)
with server-side priority
- **Updated all frontend code** to use shared environment helpers
instead of direct `process.env` access
- **Consistent API**: All environment variable access now goes through
helper functions

### 🔗 Files Changed
- `docker-compose.yml` & `docker-compose.platform.yml` - Added frontend
service
- `frontend/Dockerfile` - Added build args for environment variables
- `frontend/src/lib/env-config.ts` - New centralized environment
configuration
- Multiple frontend files - Updated to use env helpers

## Benefits
-  **Single command deployment**: `docker compose up` now runs
everything
-  **Better reliability**: Production build reduces memory usage and
crashes
-  **Network compatibility**: Proper container-to-container
communication
-  **Maintainable config**: Centralized environment variable management
-  **Development friendly**: Works in both Docker and local development

## Testing
-  Verified Docker service communication works correctly
-  Frontend responds and serves content properly  
-  Environment variables are correctly resolved in both server and
client contexts
-  No connection errors after implementing service dependencies

🤖 Generated with [Claude Code](https://claude.ai/code)

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Zamil Majdy
2025-08-07 12:26:28 +04:00
committed by GitHub
parent a21711a7ff
commit f172b314a4
18 changed files with 302 additions and 372 deletions

View File

@@ -15,6 +15,42 @@ CMD ["pnpm", "run", "dev", "--hostname", "0.0.0.0"]
# Build stage for prod
FROM base AS build
# Accept build args for NEXT_PUBLIC_* variables
ARG NEXT_PUBLIC_SUPABASE_URL
ARG NEXT_PUBLIC_SUPABASE_ANON_KEY
ARG NEXT_PUBLIC_AGPT_SERVER_URL
ARG NEXT_PUBLIC_AGPT_WS_SERVER_URL
ARG NEXT_PUBLIC_FRONTEND_BASE_URL
ARG NEXT_PUBLIC_BEHAVE_AS
ARG NEXT_PUBLIC_LAUNCHDARKLY_ENABLED
ARG NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID
ARG NEXT_PUBLIC_APP_ENV
ARG NEXT_PUBLIC_DEFAULT_LOCALE
ARG NEXT_PUBLIC_LOCALES
ARG NEXT_PUBLIC_SHOW_BILLING_PAGE
ARG NEXT_PUBLIC_TURNSTILE
ARG NEXT_PUBLIC_REACT_QUERY_DEVTOOL
ARG NEXT_PUBLIC_GA_MEASUREMENT_ID
ARG NEXT_PUBLIC_PW_TEST
# Set environment variables from build args
ENV NEXT_PUBLIC_SUPABASE_URL=$NEXT_PUBLIC_SUPABASE_URL
ENV NEXT_PUBLIC_SUPABASE_ANON_KEY=$NEXT_PUBLIC_SUPABASE_ANON_KEY
ENV NEXT_PUBLIC_AGPT_SERVER_URL=$NEXT_PUBLIC_AGPT_SERVER_URL
ENV NEXT_PUBLIC_AGPT_WS_SERVER_URL=$NEXT_PUBLIC_AGPT_WS_SERVER_URL
ENV NEXT_PUBLIC_FRONTEND_BASE_URL=$NEXT_PUBLIC_FRONTEND_BASE_URL
ENV NEXT_PUBLIC_BEHAVE_AS=$NEXT_PUBLIC_BEHAVE_AS
ENV NEXT_PUBLIC_LAUNCHDARKLY_ENABLED=$NEXT_PUBLIC_LAUNCHDARKLY_ENABLED
ENV NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID=$NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_ID
ENV NEXT_PUBLIC_APP_ENV=$NEXT_PUBLIC_APP_ENV
ENV NEXT_PUBLIC_DEFAULT_LOCALE=$NEXT_PUBLIC_DEFAULT_LOCALE
ENV NEXT_PUBLIC_LOCALES=$NEXT_PUBLIC_LOCALES
ENV NEXT_PUBLIC_SHOW_BILLING_PAGE=$NEXT_PUBLIC_SHOW_BILLING_PAGE
ENV NEXT_PUBLIC_TURNSTILE=$NEXT_PUBLIC_TURNSTILE
ENV NEXT_PUBLIC_REACT_QUERY_DEVTOOL=$NEXT_PUBLIC_REACT_QUERY_DEVTOOL
ENV NEXT_PUBLIC_GA_MEASUREMENT_ID=$NEXT_PUBLIC_GA_MEASUREMENT_ID
ENV NEXT_PUBLIC_PW_TEST=$NEXT_PUBLIC_PW_TEST
COPY autogpt_platform/frontend/ .
ENV SKIP_STORYBOOK_TESTS=true
RUN pnpm build