Can the nginx of dify implement forwarding requests to the web and API through sub paths

[linronghua921122]

Self Checks

• This is only for bug report, if you would like to ask a question, please head to Discussions.
• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• Please do not modify this template :) and fill in all the required fields.

Dify version

0.6.11

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

When I start the service based on the default nginx configuration file and it can be accessed normally, the default nginx configuration is as follows:

But I have a problem that the root path of the domain name has already been used, so I want to add sub paths to all location forwarding paths in the nginx configuration, such as location/diffyserver/, The specific configuration is as follows：

After I made the configuration changes and restarted the service, the browser accessed http://ip:port/difyserver Address, page cannot be displayed properly, page displays 404

✔️ Expected Behavior

I hope the above methods can be supported

❌ Actual Behavior

No response

[dosubot[bot]]

To configure Nginx to forward requests to the web and API through sub-paths without encountering 404 errors, you can use the following configuration as a reference:

server {
    listen 80;
    server_name _;

    location /difyserver/console/api {
      proxy_pass http://api:5001/console/api;
      include proxy.conf;
    }

    location /difyserver/api {
      proxy_pass http://api:5001/api;
      include proxy.conf;
    }

    location /difyserver/v1 {
      proxy_pass http://api:5001/v1;
      include proxy.conf;
    }

    location /difyserver/files {
      proxy_pass http://api:5001/files;
      include proxy.conf;
    }

    location /difyserver/ {
      proxy_pass http://web:3000/;
      include proxy.conf;
    }

    # If you want to support HTTPS, please uncomment the code snippet below
    #listen 443 ssl;
    #ssl_certificate ./../ssl/your_cert_file.cer;
    #ssl_certificate_key ./../ssl/your_cert_key.key;
    #ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    #ssl_prefer_server_ciphers on;
    #ssl_session_cache shared:SSL:10m;
    #ssl_session_timeout 10m;
}

This configuration ensures that:

• Requests to /difyserver/console/api, /difyserver/api, /difyserver/v1, and /difyserver/files are forwarded to the API service running on http://api:5001.
• All other requests to /difyserver/ are forwarded to the web service running on http://web:3000.

Make sure that the proxy.conf file includes the necessary proxy settings to handle the forwarding correctly. This setup should prevent 404 errors as long as the paths exist on the respective services ^[1][2].

Additionally, ensure that the environment variables in your docker-compose.yaml and .env files are set to include the sub-paths. For example:

web:
  image: langgenius/dify-web:0.6.12
  restart: always
  environment:
    CONSOLE_API_URL: 'http://yourdomain.com/difyserver/console'
    APP_API_URL: 'http://yourdomain.com/difyserver/app'

And in your .env file:

CONSOLE_API_URL=http://yourdomain.com/difyserver/console
CONSOLE_WEB_URL=http://yourdomain.com/difyserver/console
APP_WEB_URL=http://yourdomain.com/difyserver/app

These configurations ensure that the Dify web application is aware of the base URLs and any sub-paths configured ^[3][4][5][6].

To continue talking to Dosu, mention @dosu.

[dosubot[bot]]

To configure Nginx to forward requests to the web and API through sub-paths without encountering 404 errors, you can use the following configuration as a reference:

server {
    listen 80;
    server_name _;

    location /difyserver/console/api {
      proxy_pass http://api:5001/console/api;
      include proxy.conf;
    }

    location /difyserver/api {
      proxy_pass http://api:5001/api;
      include proxy.conf;
    }

    location /difyserver/v1 {
      proxy_pass http://api:5001/v1;
      include proxy.conf;
    }

    location /difyserver/files {
      proxy_pass http://api:5001/files;
      include proxy.conf;
    }

    location /difyserver/ {
      proxy_pass http://web:3000/;
      include proxy.conf;
    }

    # If you want to support HTTPS, please uncomment the code snippet below
    #listen 443 ssl;
    #ssl_certificate ./../ssl/your_cert_file.cer;
    #ssl_certificate_key ./../ssl/your_cert_key.key;
    #ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    #ssl_prefer_server_ciphers on;
    #ssl_session_cache shared:SSL:10m;
    #ssl_session_timeout 10m;
}

This configuration ensures that:

• Requests to /difyserver/console/api, /difyserver/api, /difyserver/v1, and /difyserver/files are forwarded to the API service running on http://api:5001.
• All other requests to /difyserver/ are forwarded to the web service running on http://web:3000.

Make sure that the proxy.conf file includes the necessary proxy settings to handle the forwarding correctly. This setup should prevent 404 errors as long as the paths exist on the respective services ^[1][2].

Additionally, ensure that the environment variables in your docker-compose.yaml and .env files are set to include the sub-paths. For example:

web:
  image: langgenius/dify-web:0.6.12
  restart: always
  environment:
    CONSOLE_API_URL: 'http://yourdomain.com/difyserver/console'
    APP_API_URL: 'http://yourdomain.com/difyserver/app'

And in your .env file:

CONSOLE_API_URL=http://yourdomain.com/difyserver/console
CONSOLE_WEB_URL=http://yourdomain.com/difyserver/console
APP_WEB_URL=http://yourdomain.com/difyserver/app

These configurations ensure that the Dify web application is aware of the base URLs and any sub-paths configured ^[3][4][5][6].

To continue talking to Dosu, mention @dosu.

[dosubot[bot]]

Yes, the Dify application has hard-coded paths that could interfere with sub-path forwarding configurations. Specifically, routes defined using @app.route decorators such as /health, /threads, and /db-pool-stat are hard-coded paths ^[1].

To verify this, you can inspect the source code of the Dify application, particularly the route definitions in the app.py file or similar files where routes are defined. If these routes are not dynamically constructed to account for sub-paths, it confirms that the application does not natively support sub-path forwarding.

For example, you can look for route definitions like this in the source code:

@app.route('/health')
def health():
    return Response(json.dumps({
        'status': 'ok',
        'version': app.config['CURRENT_VERSION']
    }), status=200, content_type="application/json")

These hard-coded paths indicate that the application expects to be accessed at the root level and does not account for sub-paths, which can lead to issues when trying to use sub-path forwarding in Nginx or other reverse proxies.

To continue talking to Dosu, mention @dosu.

[linronghua921122]

Is the path corresponding to all the resources loaded on the dify service's homepage fixed? Can you see it in which source code file?

[dosubot[bot]]

Yes, the resource paths on the Dify service's homepage are hardcoded. You can see these paths in the README.md file of the repository. Here is an example of the hardcoded paths:

<p align="center">
  <a href="https://cloud.dify.ai">Dify Cloud</a> ·
  <a href="https://docs.dify.ai/getting-started/install-self-hosted">Self-hosting</a> ·
  <a href="https://docs.dify.ai">Documentation</a> ·
  <a href="https://cal.com/guchenhe/60-min-meeting">Enterprise inquiry</a>
</p>
<p align="center">
    <a href="https://dify.ai" target="_blank">
        <img alt="Static Badge" src="https://img.shields.io/badge/Product-F04438"></a>
    <a href="https://dify.ai/pricing" target="_blank">
        <img alt="Static Badge" src="https://img.shields.io/badge/free-pricing?logo=free&color=%20%23155EEF&label=pricing&labelColor=%20%23528bff"></a>
    <a href="https://discord.gg/FngNHpbcY7" target="_blank">
        <img src="https://img.shields.io/discord/1082486657678311454?logo=discord&labelColor=%20%235462eb&logoColor=%20%23f5f5f5&color=%20%235462eb"
            alt="chat on Discord"></a>
    <a href="https://twitter.com/intent/follow?screen_name=dify_ai" target="_blank">
        <img src="https://img.shields.io/twitter/follow/dify_ai?logo=X&color=%20%23f5f5f5"
            alt="follow on Twitter"></a>
    <a href="https://hub.docker.com/u/langgenius" target="_blank">
        <img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/langgenius/dify-web?labelColor=%20%23FDB062&color=%20%23f79009"></a>
    <a href="https://github.com/langgenius/dify/graphs/commit-activity" target="_blank">
        <img alt="Commits last month" src="https://img.shields.io/github/commit-activity/m/langgenius/dify?labelColor=%20%2332b583&color=%20%2312b76a"></a>
    <a href="https://github.com/langgenius/dify/" target="_blank">
        <img alt="Issues closed" src="https://img.shields.io/github/issues-search?query=repo%3Alanggenius%2Fdify%20is%3Aclosed&label=issues%20closed&labelColor=%20%237d89b0&color=%20%235d6b98"></a>
    <a href="https://github.com/langgenius/dify/discussions/" target="_blank">
        <img alt="Discussion posts" src="https://img.shields.io/github/discussions/langgenius/dify?labelColor=%20%239b8afb&color=%20%237a5af8"></a>
</p>

You can find this in the README.md file of the Dify repository ^[1].

To continue talking to Dosu, mention @dosu.

[linronghua921122]

May I ask where the JS and CSS files for error 404 are configured? Can they be modified to relative paths?

[dosubot[bot]]

To modify the paths to JavaScript and CSS files in the Dify project to be relative, you need to adjust the basePath in the Next.js configuration file (next.config.js). This will ensure that all asset paths are relative, which is necessary for sub-path forwarding in your Nginx configuration.

Here is how you can do it:

1. Open the next.config.js file in the root of your Dify project.
2. Add or modify the basePath property to specify the sub-path you are using in your Nginx configuration.

For example, if your sub-path is /difyserver, your next.config.js should look like this:

module.exports = {
  basePath: '/difyserver',
  // other configurations
};

This configuration will ensure that all JavaScript and CSS files are served with the relative path /difyserver.

After making this change, rebuild your project:

npm run build

And then start the server:

npm run start

This will make sure that your assets are correctly served from the sub-path specified in your Nginx configuration ^[1].

To continue talking to Dosu, mention @dosu.