langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 20:15:31 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

How to deploy dify-web on sub-domain like http://xxx/dify #7046

New Issue
Closed
opened 2026-02-21 18:18:35 -05:00 by yindo · 11 comments
yindo commented 2026-02-21 18:18:35 -05:00
Owner
Copy Link
Copy Source

Originally created by @SupremeMonster on GitHub (Dec 4, 2024).

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).
  • [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
  • Please do not modify this template :) and fill in all the required fields.

Dify version

0.10.2

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

I want to deploy dify-web on sub-domain like http://xxx/dify,
step 1:
add basePath:'/dify' in next.config.js and build frontend again
step 2:
run docker-compose down & docker-compose up -d;
step 3:
modify nginx configuration

But the end result was a lot of 404s, and I would like to know how I can achieve my goal.

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

Originally created by @SupremeMonster on GitHub (Dec 4, 2024). ### Self Checks - [X] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [X] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [X] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:） - [X] Please do not modify this template :) and fill in all the required fields. ### Dify version 0.10.2 ### Cloud or Self Hosted Self Hosted (Docker) ### Steps to reproduce I want to deploy dify-web on sub-domain like http://xxx/dify, step 1: add basePath:'/dify' in next.config.js and build frontend again step 2: run docker-compose down & docker-compose up -d; step 3: modify nginx configuration But the end result was a lot of 404s, and I would like to know how I can achieve my goal. ### ✔️ Expected Behavior _No response_ ### ❌ Actual Behavior _No response_
yindo added the 🙋‍♂️ question label 2026-02-21 18:18:35 -05:00
yindo closed this issue 2026-02-21 18:18:35 -05:00
yindo commented 2026-02-21 18:18:35 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Dec 4, 2024):

Hello @SupremeMonster! I'm here to help you with any bugs, questions, or contributions for dify-web. Let's work together to solve this issue.

I found some similar discussions that might be helpful for your issue:

  1. How can I set up dify server behind a nginx reverse proxy? - This discussion is still open and might contain relevant information about configuring nginx for Dify.

  2. Can the nginx of dify implement forwarding requests to the web and API through sub paths - This is another open discussion that could provide insights into handling sub-paths with nginx for Dify.

These discussions might offer some guidance on configuring nginx and handling sub-paths, which seems to be related to the 404 errors you're encountering.

To continue talking to Dosu, mention @dosu.

@dosubot[bot] commented on GitHub (Dec 4, 2024): <!-- Greeting --> Hello @SupremeMonster! I'm here to help you with any bugs, questions, or contributions for dify-web. Let's work together to solve this issue. <!-- Answer --> I found some similar discussions that might be helpful for your issue: 1. [How can I set up dify server behind a nginx reverse proxy?](https://github.com/langgenius/dify/discussions/7463) - This discussion is still open and might contain relevant information about configuring nginx for Dify. 2. [Can the nginx of dify implement forwarding requests to the web and API through sub paths](https://github.com/langgenius/dify/discussions/6076) - This is another open discussion that could provide insights into handling sub-paths with nginx for Dify. These discussions might offer some guidance on configuring nginx and handling sub-paths, which seems to be related to the 404 errors you're encountering. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
yindo commented 2026-02-21 18:18:36 -05:00
Author
Owner
Copy Link
Copy Source

@SupremeMonster commented on GitHub (Dec 4, 2024):

Some static resources have 'dify' and another don't have
微信图片_20241204165337

@SupremeMonster commented on GitHub (Dec 4, 2024): Some static resources have 'dify' and another don't have ![微信图片_20241204165337](https://github.com/user-attachments/assets/0492c800-2682-46df-8508-f63937afd3f6)
yindo commented 2026-02-21 18:18:36 -05:00
Author
Owner
Copy Link
Copy Source

@SupremeMonster commented on GitHub (Dec 4, 2024):

@dosu

@SupremeMonster commented on GitHub (Dec 4, 2024): @dosu
yindo commented 2026-02-21 18:18:36 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Dec 4, 2024):

Could you provide more details about your current nginx configuration and any specific changes you made to the next.config.js file? This information will help in understanding how the static resources are being served and why some might not include the 'dify' path.

To continue talking to Dosu, mention @dosu.

@dosubot[bot] commented on GitHub (Dec 4, 2024): <!-- Answer --> Could you provide more details about your current nginx configuration and any specific changes you made to the `next.config.js` file? This information will help in understanding how the static resources are being served and why some might not include the 'dify' path. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
yindo commented 2026-02-21 18:18:36 -05:00
Author
Owner
Copy Link
Copy Source

@SupremeMonster commented on GitHub (Dec 4, 2024):

nginx:

server {
    listen 80;
    server_name _;

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

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

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

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

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

    # placeholder for acme challenge location


    # placeholder for https config defined in https.conf.template

}

next.config.js

const { codeInspectorPlugin } = require("code-inspector-plugin");
const withMDX = require("@next/mdx")({
  extension: /\.mdx?$/,
  options: {
    // If you use remark-gfm, you'll need to use next.config.mjs
    // as the package is ESM only
    // https://github.com/remarkjs/remark-gfm#install
    remarkPlugins: [],
    rehypePlugins: [],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  },

});

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/dify',
  webpack: (config, { dev, isServer }) => {
    config.plugins.push(codeInspectorPlugin({ bundler: "webpack" }));
    return config;
  },

  productionBrowserSourceMaps: false, // enable browser source map generation during the production build
  // Configure pageExtensions to include md and mdx
  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
  experimental: {},
  // fix all before production. Now it slow the develop speed.
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
    dirs: [
      "app",
      "bin",
      "config",
      "context",
      "hooks",
      "i18n",
      "models",
      "service",
      "test",
      "types",
      "utils",
    ],
  },
  typescript: {
    // https://nextjs.org/docs/api-reference/next.config.js/ignoring-typescript-errors
    ignoreBuildErrors: true,
  },
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/",
        destination: "/apps",
        permanent: false,
      },
    ];
  },
  output: "standalone",
};

module.exports = withMDX(nextConfig);


@dosu
@SupremeMonster commented on GitHub (Dec 4, 2024): nginx: ``` server { listen 80; server_name _; location /dify/console/api { proxy_pass http://api:5001; include proxy.conf; } location /dify/api { proxy_pass http://api:5001; include proxy.conf; } location /dify/v1 { proxy_pass http://api:5001; include proxy.conf; } location /dify/files { proxy_pass http://api:5001; include proxy.conf; } location /dify/ { proxy_pass http://web:3000/; include proxy.conf; } # placeholder for acme challenge location # placeholder for https config defined in https.conf.template } ``` next.config.js ``` const { codeInspectorPlugin } = require("code-inspector-plugin"); const withMDX = require("@next/mdx")({ extension: /\.mdx?$/, options: { // If you use remark-gfm, you'll need to use next.config.mjs // as the package is ESM only // https://github.com/remarkjs/remark-gfm#install remarkPlugins: [], rehypePlugins: [], // If you use `MDXProvider`, uncomment the following line. // providerImportSource: "@mdx-js/react", }, }); /** @type {import('next').NextConfig} */ const nextConfig = { basePath: '/dify', webpack: (config, { dev, isServer }) => { config.plugins.push(codeInspectorPlugin({ bundler: "webpack" })); return config; }, productionBrowserSourceMaps: false, // enable browser source map generation during the production build // Configure pageExtensions to include md and mdx pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"], experimental: {}, // fix all before production. Now it slow the develop speed. eslint: { // Warning: This allows production builds to successfully complete even if // your project has ESLint errors. ignoreDuringBuilds: true, dirs: [ "app", "bin", "config", "context", "hooks", "i18n", "models", "service", "test", "types", "utils", ], }, typescript: { // https://nextjs.org/docs/api-reference/next.config.js/ignoring-typescript-errors ignoreBuildErrors: true, }, reactStrictMode: true, async redirects() { return [ { source: "/", destination: "/apps", permanent: false, }, ]; }, output: "standalone", }; module.exports = withMDX(nextConfig); @dosu ```
yindo commented 2026-02-21 18:18:36 -05:00
Author
Owner
Copy Link
Copy Source

@SupremeMonster commented on GitHub (Dec 4, 2024):

@dosu

@SupremeMonster commented on GitHub (Dec 4, 2024): @dosu
yindo commented 2026-02-21 18:18:36 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Dec 4, 2024):

To deploy your Next.js application on a sub-path like /dify, you need to ensure that both your nginx configuration and next.config.js are correctly set up to handle the base path. Here are some steps and considerations:

  1. Next.js Configuration:

    • You've set basePath: '/dify' in your next.config.js, which is correct. This tells Next.js to serve all assets and pages under the /dify path.

  2. Nginx Configuration:

    • Your nginx configuration seems mostly correct for handling requests to /dify. However, ensure that the trailing slash in proxy_pass http://web:3000/; is consistent with how paths are handled. Sometimes, removing the trailing slash can help with path resolution issues.

  3. Static Assets:

    • Ensure that all static assets are being requested with the /dify prefix. If some assets are missing this prefix, it could be due to hardcoded paths in your application or incorrect handling of the basePath in your code.

  4. Check for Hardcoded Paths:

    • Review your application code to ensure there are no hardcoded paths that do not include the basePath. This includes links, image sources, and any other asset paths.

  5. Testing:

    • After making changes, clear your browser cache or use an incognito window to ensure you're not seeing cached versions of your assets.

  6. Debugging 404 Errors:

    • Use browser developer tools to inspect network requests and ensure that all requests are being made to the correct paths with the /dify prefix.

By ensuring that both your nginx configuration and application code are correctly set up to handle the basePath, you should be able to resolve the 404 errors you're encountering.

To continue talking to Dosu, mention @dosu.

@dosubot[bot] commented on GitHub (Dec 4, 2024): <!-- Answer --> To deploy your Next.js application on a sub-path like `/dify`, you need to ensure that both your `nginx` configuration and `next.config.js` are correctly set up to handle the base path. Here are some steps and considerations: 1. **Next.js Configuration**: - You've set `basePath: '/dify'` in your `next.config.js`, which is correct. This tells Next.js to serve all assets and pages under the `/dify` path. 2. **Nginx Configuration**: - Your `nginx` configuration seems mostly correct for handling requests to `/dify`. However, ensure that the trailing slash in `proxy_pass http://web:3000/;` is consistent with how paths are handled. Sometimes, removing the trailing slash can help with path resolution issues. 3. **Static Assets**: - Ensure that all static assets are being requested with the `/dify` prefix. If some assets are missing this prefix, it could be due to hardcoded paths in your application or incorrect handling of the `basePath` in your code. 4. **Check for Hardcoded Paths**: - Review your application code to ensure there are no hardcoded paths that do not include the `basePath`. This includes links, image sources, and any other asset paths. 5. **Testing**: - After making changes, clear your browser cache or use an incognito window to ensure you're not seeing cached versions of your assets. 6. **Debugging 404 Errors**: - Use browser developer tools to inspect network requests and ensure that all requests are being made to the correct paths with the `/dify` prefix. By ensuring that both your `nginx` configuration and application code are correctly set up to handle the `basePath`, you should be able to resolve the 404 errors you're encountering. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
yindo commented 2026-02-21 18:18:36 -05:00
Author
Owner
Copy Link
Copy Source

@Davidwhw commented on GitHub (Dec 12, 2024):

I had the same problem as you. How did you solve it?
Currently I have modified the docker/nginx/conf.d/default.conf.template and web/next.config.js program files. Build the next.config.js file and then restart all containers.
In addition, I also made changes to the sub-domain of the relevant urls in docker/.env.
Finally got a 404 error when visiting http://xxx/dify/install, as described in 6076.
Looking forward to your reply.

@Davidwhw commented on GitHub (Dec 12, 2024): I had the same problem as you. How did you solve it? Currently I have modified the `docker/nginx/conf.d/default.conf.template` and `web/next.config.js` program files. Build the `next.config.js` file and then restart all containers. In addition, I also made changes to the sub-domain of the relevant urls in `docker/.env`. Finally got a 404 error when visiting `http://xxx/dify/install`, as described in [6076](https://github.com/langgenius/dify/discussions/6076). Looking forward to your reply.
yindo commented 2026-02-21 18:18:36 -05:00
Author
Owner
Copy Link
Copy Source

@GitHub4LP commented on GitHub (Jan 9, 2025):

use server workers for Forward Proxy, nginx for Reverse Proxy.
May solve it

@GitHub4LP commented on GitHub (Jan 9, 2025): use server workers for Forward Proxy, nginx for Reverse Proxy. May solve it
yindo commented 2026-02-21 18:18:36 -05:00
Author
Owner
Copy Link
Copy Source

@gq957534377 commented on GitHub (Mar 13, 2025):

https://github.com/langgenius/dify/issues/15591

@gq957534377 commented on GitHub (Mar 13, 2025): https://github.com/langgenius/dify/issues/15591
yindo commented 2026-02-21 18:18:36 -05:00
Author
Owner
Copy Link
Copy Source

@gq957534377 commented on GitHub (Apr 23, 2025):

https://github.com/langgenius/dify/pull/18658/files

@gq957534377 commented on GitHub (Apr 23, 2025): https://github.com/langgenius/dify/pull/18658/files
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 🙋‍♂️ question
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#7046
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?