Tell me the steps to set up base path, including the necessary config change for nginx, web and api

[Stan1987]

Self Checks

• I have read the Contributing Guide and Language Policy.
• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report, otherwise it will be closed.
• Please do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing? Tell me about your story.

I'm trying to config the customized base path for web, let's say /dify, but it's not working by directly update the NEXT_PUBLIC_BASE_PATH in .env. Moreover I also need to config the nginx so that it should proxy the new url correctly inside docker. Show me the steps to achieve this.

2. Additional context or comments

No response

3. Can you help us with this feature?

• I am interested in contributing to this feature.

[dosubot[bot]]

Hi @Stan1987! I'm Dosu and I’m helping the dify team.

To set up a custom base path (like /dify) for Dify, you need to coordinate changes in the frontend, backend, and Nginx. Here’s a step-by-step guide:

1. Frontend (web):

   • Edit web/.env (or .env.local) and set NEXT_PUBLIC_BASE_PATH to /dify. Also update NEXT_PUBLIC_API_PREFIX, NEXT_PUBLIC_PUBLIC_API_PREFIX, and any other relevant API URLs to include the base path.
   • If your deployment uses web/utils/var-basePath.js or web/utils/var.ts, set basePath to /dify.
   • Important: You must rebuild the frontend Docker image with the new base path, e.g.:

     cd web
     docker build . -t dify-base-path:latest --build-arg NEXT_PUBLIC_BASE_PATH=/dify

   • Use this custom image in your Docker Compose or deployment config instead of the default one. details

2. Backend (API):

   • Update all relevant API URL environment variables in your .env (like CONSOLE_API_URL, SERVICE_API_URL, APP_WEB_URL, etc.) to include the /dify prefix.
   • Set RESPECT_XFORWARD_HEADERS_ENABLED=true in your backend .env to ensure proper URL generation behind a proxy.
   • The backend Flask API does not natively support subpaths; your proxy must strip the /dify prefix before forwarding to the backend. No code changes are needed unless you want to serve APIs directly under a subpath, which would require editing all url_prefix values in Flask blueprints. reference

3. Nginx (reverse proxy):

   • Add a location block for /dify/ that proxies to your frontend service and rewrites the URL to strip the prefix:

     location /dify/ {
         proxy_pass http://127.0.0.1:3000/;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header X-Forwarded-Prefix /dify;
         rewrite ^/dify/(.*)$ /$1 break;
     }

   • Do the same for API endpoints if needed, ensuring /dify/api is proxied to /api on the backend. example

4. Restart all containers to apply the new configuration.

Common pitfalls:

• Just changing .env or Nginx is not enough; you must rebuild the frontend image for the base path to take effect.
• Don’t set the base path in both Next.js config and the reverse proxy—pick one approach to avoid double-prefix issues and 404s. discussion
• If you see 404s for static assets or APIs, check that Nginx is stripping the prefix and that all URLs in your configs include the base path.

Test all routes and static assets after making these changes to ensure everything works as expected.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[dosubot[bot]]

To set up a custom base path (like /dify) for Dify, you need to coordinate changes across the frontend, backend, and Nginx. Here’s a step-by-step guide:

1. Frontend (Next.js):

• Build a custom Docker image for the web frontend with the base path:

  cd web
  docker build . -t dify-base-path:latest --build-arg NEXT_PUBLIC_BASE_PATH=/dify

• Update your Docker Compose to use this custom image for the web service.
• Set environment variables for API prefixes in your frontend config (e.g., .env.local or Docker Compose):

  NEXT_PUBLIC_API_PREFIX=/dify/api
  NEXT_PUBLIC_PUBLIC_API_PREFIX=/dify/api
  NEXT_PUBLIC_MARKETPLACE_API_PREFIX=/dify/marketplace
  

• Make sure all asset and API URLs use the base path. Rebuild the frontend after changes. Source

2. Backend (Flask API):

• Update the url_prefix for each Flask Blueprint to include the base path (e.g., /dify/api).
• Update all backend URL environment variables in your .env or Docker Compose file to include the base path:

  CONSOLE_API_URL=http://your-domain/dify/api
  CONSOLE_WEB_URL=http://your-domain/dify
  SERVICE_API_URL=http://your-domain/dify/service
  APP_API_URL=http://your-domain/dify/app
  APP_WEB_URL=http://your-domain/dify
  

• If you use subpath support, set RESPECT_XFORWARD_HEADERS_ENABLED=true in the backend .env. Source

3. Nginx (Reverse Proxy):

• Add a location block for the base path and configure proxy headers. Example:

  server {
      listen 80;
      server_name your-domain.com;
  
      location /dify/ {
          proxy_pass http://127.0.0.1:3000/;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_set_header X-Forwarded-Prefix /dify;
          rewrite ^/dify/(.*)$ /$1 break;
      }
  }

• This setup strips the /dify prefix before proxying to the backend and ensures headers are set for correct routing. Source

Important Caveats:

• You must rebuild the frontend Docker image with the correct build argument; changing .env alone is not enough for asset paths.
• All layers (frontend, backend, Nginx) must use the same base path.
• Do not set the base path in both Next.js config and Nginx; pick one approach to avoid double base path issues and routing errors. Source
• After making these changes, restart all containers and test all routes and static assets.

Let me know if you want more details on any step or want to discuss contributing improvements!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[MB-MuratBayraktar]

hello @Stan1987
did you work it out with the recommendations write by the dosubot? or did you enable itin other ways?