Can I deploy without using port 80 ？

[lsm1103]

Discussed in https://github.com/Agenta-AI/agenta/discussions/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; ![Uploading image.png…]() 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[bot]]

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[bot]]

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.