Can I deploy without using port 80 ？

[lsm1103]

Discussed in #1907

^{Originally posted by lsm1103 July 18, 2024}
When I try to deploy without using port 80, the front-end keeps requesting the port 80 interface;

When I changed the environment variables for frontend deployment to the backend ports;

(I changed it to nginx deployment here)

Still unable to access, the front-end keeps requesting the interface of port 80;

Is it like this that x modification doesn't work?

[lsm1103]

[lsm1103]

[dosubot]

To deploy without using port 80 and resolve the issue where the front-end keeps requesting the port 80 interface, follow these steps:

1. Update Traefik Configuration:
   Ensure that Traefik is correctly routing requests to the new port. Modify the docker-compose.prod.yml file to reflect the new port configuration.

2. Backend Service Configuration:
   Ensure the backend service is correctly configured to listen on the specified port and path. Update the backend service configuration to match the new port.

3. Front-end Environment Variables:
   Update the front-end environment variables to point to the correct API URL, including the new port.

Here is an example of how you can modify your docker-compose.prod.yml file:

services:
  reverse-proxy:
    image: traefik:v2.10
    command: --api.insecure=true --providers.docker --entrypoints.web.address=:90
    ports:
      - "90:90"
      - "8080:8080"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    networks:
      - agenta-network
    restart: always

  backend:
    build: ./agenta-backend
    environment:
      - MONGODB_URI=mongodb://username:password@mongo:27017
      - REDIS_URL=redis://redis:6379/0
      - ALLOW_ORIGINS=${ALLOW_ORIGINS}
      - ENVIRONMENT=production
      - FEATURE_FLAG=oss
      - AGENTA_TEMPLATE_REPO=agentaai/templates_v2
      - CELERY_BROKER_URL=amqp://guest@rabbitmq//
      - CELERY_RESULT_BACKEND=redis://redis:6379/0
      - TEMPLATES_BASE_URL=https://llm-app-json.s3.eu-central-1.amazonaws.com
      - REGISTRY_REPO_NAME=agentaai
      - DOCKER_HUB_URL=https://hub.docker.com/v2/repositories
    volumes:
      - ./agenta-backend/agenta_backend:/app/agenta_backend
      - ./agenta-backend/tests:/app/tests
      - /var/run/docker.sock:/var/run/docker.sock
      - ./agenta-backend/db:/db
    labels:
      - "traefik.http.routers.backend.rule=Host(`${BARE_DOMAIN_NAME}`) && PathPrefix(`/api/`)"
      - "traefik.http.routers.backend.entrypoints=web"
      - "traefik.http.middlewares.backend-strip.stripprefix.prefixes=/api"
      - "traefik.http.middlewares.backend-strip.stripprefix.forceslash=true"
      - "traefik.http.routers.backend.middlewares=backend-strip"
      - "traefik.http.services.backend.loadbalancer.server.port=8881"
      - "traefik.http.routers.backend.service=backend"
    networks:
      - agenta-network
    extra_hosts:
      - "host.docker.internal:host-gateway"
    command:
      [
        "uvicorn",
        "agenta_backend.main:app",
        "--host",
        "0.0.0.0",
        "--port",
        "8881",
        "--reload",
        "--root-path",
        "/api"
      ]
    env_file:
      - .env
    depends_on:
      mongo:
        condition: service_healthy
    restart: always

  agenta-web:
    build:
      context: ./agenta-web
      dockerfile: prod.Dockerfile
    volumes:
      - ./agenta-web/src:/app/src
      - ./agenta-web/public:/app/public
    ports:
      - "3001:3000"
    networks:
      - agenta-network
    labels:
      - "traefik.http.routers.agenta-web.rule=Host(`${BARE_DOMAIN_NAME}`) && PathPrefix(`/`)"
      - "traefik.http.routers.agenta-web.entrypoints=web"
      - "traefik.http.services.agenta-web.loadbalancer.server.port=3000"
    environment:
      - NEXT_PUBLIC_POSTHOG_API_KEY=phc_hmVSxIjTW1REBHXgj2aw4HW9X6CXb6FzerBgP9XenC7
    restart: always

Additionally, ensure that your .env file in the agenta-web directory is correctly configured:

NEXT_PUBLIC_AGENTA_API_URL=http://localhost:90/api
NEXT_PUBLIC_FF=oss
NEXT_PUBLIC_TELEMETRY_TRACKING_ENABLED=true

Make sure the BARE_DOMAIN_NAME environment variable is set correctly in your environment, and that the front-end is making requests to the correct API endpoint, which should include the /api prefix. This should resolve the issues with the front-end requesting port 80 and the 404 Not Found errors for API requests ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[lsm1103]

The agenta web I executed in this way is in development mode. How can I change it to online mode

[dosubot]

To change your Agenta web application from development mode to production mode, follow these steps:

1. Ensure Environment Variables are Set Correctly:
   Make sure your .env file contains the correct values for production. For example, ensure ENVIRONMENT=production and other necessary environment variables are set.

2. Use the Provided Script to Start in Production Mode:
   Use the start_web_standalone.sh script with the prod argument to set the environment to production.

   ./start_web_standalone.sh prod

3. Verify the Services:
   Ensure all services are running correctly by checking the status of the containers.

   docker-compose -f docker-compose.prod.yml ps

4. Access the Application:
   Once the containers are up and running, you should be able to access your application through the configured domain and ports.

Additionally, ensure that your Dockerfile is optimized for production. Here is an example of a production Dockerfile:

# Stage 1: Build Stage
FROM node:22-alpine3.18 AS builder

WORKDIR /app

# Install only production dependencies
COPY package.json package-lock.json* ./
RUN npm ci
# Copy only necessary files
COPY src ./src
COPY public ./public
COPY next.config.js .
COPY tsconfig.json .
COPY postcss.config.js .
COPY tailwind.config.ts .
COPY .env.production .
COPY sentry.* .

# Build the Next.js app for production
RUN npm run build

# Stage 2: Production Stage
FROM node:22-alpine3.18 AS prod

WORKDIR /app

# Copy only the necessary files from the build stage
COPY --from=builder /app/package.json /app/package-lock.json* /app
COPY --from=builder /app/.next /app/.next
COPY --from=builder /app/public /app/public
COPY --from=builder /app/next.config.js /app/tsconfig.json /app/postcss.config.js /app/tailwind.config.ts /app/.env.production /app/sentry.* /app/

# Install only production dependencies
RUN npm ci --omit=dev

# Expose the necessary port
EXPOSE 3000

# Start the production server
CMD ["npm", "start"]

By following these steps and using the start_web_standalone.sh script, you will switch your Agenta web application from development mode to production mode ^[1][2][3][4].

To continue talking to Dosu, mention @dosu.

[av]

It looks like gh version also has the same problem. NEXT_PUBLIC_ env vars are needed build-time, whereas ghcr.io images are of course built without them.

App code needs to be fixed to fetch those via server side props or inlining them during the SSR pipeline

Edit

gh image appears to be sufficient to launch in dev mode:

agenta-web:
  image: ghcr.io/agenta-ai/agenta-web
  command: npm run dev

However, served app does seem to have issues:

Edit 2 - styling

• gh image is missing tailwind config, needs to be added manually
• antd-themeConfig.json contains hardcoded references to the next/font with dev hash ('__Inter_36bd41', '__Inter_Fallback_36bd41') - that'd change whenever google updates the font files (it does pretty frequently)
  • I've changed it to use next's CSS env var as a workaround, similarly to Tailwind: var(--font-inter)

Both files override image contents as mounted volumes:

volumes:
  - ./agenta/tailwind.config.ts:/app/tailwind.config.ts
  - ./agenta/antd-themeConfig.json:/app/src/styles/tokens/antd-themeConfig.json

The app finally matches cloud version after that:

Edit 3

I'm not sure how this line is supposed to work at all:
https://github.com/Agenta-AI/agenta/blob/main/agenta-backend/agenta_backend/services/app_manager.py#L83

If that code is in prod - it shouldn't be possible to create new apps.

Edit 4

You can't Docker networks with name different from agenta-network - the app template will fail to start

[mmabrouk]

@av Thanks for all the comments. Unfortunately I missed the notification the first time, then since you were making edits I did not get any notification.

Port issue:

I am looking into this now. We'll have a PR ready soon.

Inter issue:

Thanks for noticing this, that has been fixed

How does this code work in prod

Thanks for noticing this. It works because the logging level is set to error and thereby the command is not executed. I am creating a fix now.

Docker network issue

Yes that is a limitation, not sure what is the use case of having a different network name?