Giter Site home page Giter Site logo

Comments (9)

Murderlon avatar Murderlon commented on August 22, 2024 1

You can add the port if you want with generateUrl

from uppy.

punowo avatar punowo commented on August 22, 2024 1

It's me again. I solved the issue by using relativeLocation
Here is also my final nginx.conf for good measure. Thank you for the guidance @Murderlon . I didn't get to generateUrl.

# Define the number of worker connections
events {
    worker_connections 1024; # Maximum number of simultaneous connections per worker process
}

# Main HTTP server configuration block
http {
    # Include MIME types definitions
    include /etc/nginx/mime.types;
    # Set default MIME type if not detected
    default_type application/octet-stream;
    server {
        listen 80; # Listen on port 80 for HTTP connections
        root /usr/share/nginx/html; # Set the root directory for serving files
        index index.html; # Specify the default index file

        # This handles the client-side routing for Single Page Applications (SPA)
        location / {
            try_files $uri $uri/ /index.html; # Try to serve the requested URI, then fall back to index.html
        }

        # Cache static assets for better performance
        location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
            expires 1y; # Set expiration time to 1 year
            add_header Cache-Control "public, max-age=31536000, immutable"; # Add cache control headers
        }

        # Enable gzip compression for specified file types
        gzip on;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        # Proxy configuration for API requests
        location /api-example-restlike {
            # Forward requests to the backend service
            proxy_pass http://node-example-restlike:6502;

            # Options required for file uploads (TUS protocol)
            proxy_request_buffering off; # Disable request buffering
            proxy_buffering off; # Disable response buffering
            proxy_http_version 1.1; # Use HTTP 1.1 for proxying

            # Add X-Forwarded-* headers for proper handling behind a reverse proxy (TUS protocol)
            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Proto $scheme;

            client_max_body_size 0; # Remove limit on the request body size (TUS protocol)
        }
    }
}

from uppy.

punowo avatar punowo commented on August 22, 2024

Vue.js uppy snippet:

  uppyDashboard.value = new Uppy({
    debug: true,
    autoProceed: false,
  })
    .use(DashboardPlugin, {
      id: "vueDashboard",
      inline: true,
      target: "#uppyDashboard",
      hideUploadButton: true,
      proudlyDisplayPoweredByUppy: false,
      fileManagerSelectionType: "both",
    })
    .use(Tus, {
      endpoint: "/api-example/files/",
      retryDelays: [0, 1000, 3000, 5000],
    });

Tus Backend Side

const { Server } = require("@tus/server");
const { FileStore } = require("@tus/file-store");
const nfs = require("fs/promises");

const setupTusServer = async (fastifyServer, getTemporaryDirectoryFullPath) => {
  const tusServer = new Server({
    path: "/api/files",
    respectForwardedHeaders: true,
    datastore: new FileStore({
      directory: await getTemporaryDirectoryFullPath(),
    }),
  });
  fastifyServer.addContentTypeParser(
    "application/offset+octet-stream",
    (_, __, done) => done(null)
  );
  fastifyServer.all("/api/files", (req, res) => {
    tusServer.handle(req.raw, res.raw);
  });
  fastifyServer.all("/api/files/*", (req, res) => {
    tusServer.handle(req.raw, res.raw);
  });
  fastifyServer.delete("/api/fileops/", async (req, res) => {
    try {
      const temporaryFilesDirectoryFullPath =
        await getTemporaryDirectoryFullPath();
      const tusIdsArray = req.body;
      for (const id of tusIdsArray) {
        try {
          const fullFilePath = `${temporaryFilesDirectoryFullPath}/${id}`;
          const fullJsonPath = `${temporaryFilesDirectoryFullPath}/${id}.json`;
          await nfs.unlink(fullFilePath);
          await nfs.unlink(fullJsonPath);
        } catch (err) {
          console.error(`Failed to delete ${id}`, err);
        }
      }
      res.send({
        message: "File deletion process completed",
        files: tusIdsArray,
      });
    } catch (err) {
      console.error(err);
      res.code(500).send(err);
    }
  });
};

module.exports = { setupTusServer };

nginx configuration

events {
    worker_connections 1024;
}

http {
    proxy_headers_hash_max_size 512;
    proxy_headers_hash_bucket_size 64;

    server {
        listen 80;

        location / {
            proxy_pass http://frontend;
        }

        location /api-example {
            proxy_pass http://backend:6502;

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;

            rewrite ^/api-example(.*) /api$1 break;

            proxy_request_buffering off;
            proxy_buffering off;
            proxy_http_version 1.1;

            proxy_set_header X-Forwarded-Host $host;
            proxy_set_header X-Forwarded-Proto $scheme;

            client_max_body_size 0;
        }
    }
}

from uppy.

punowo avatar punowo commented on August 22, 2024

Sorry if this doesn't represent a bug and I've mangled some configuration. The Community Forum doesn't load at all for me.

EDIT: tus/tus-node-server#520 (comment) , so the location header from the initial post needs to be re-written ?

EDIT 2: respectForwardedHeaders is true, so there's something wrong with the nginx configuration. Likely not a bug.

from uppy.

Murderlon avatar Murderlon commented on August 22, 2024

Hi, you are setting /api-example/files/ on the client but /api/files on the server, this needs to be the same. And as you mentioned yourself you need respectForwardedHeaders and a correct nginx configuration.

from uppy.

punowo avatar punowo commented on August 22, 2024

@Murderlon I can't get it working. Do you happen to have any examples for node-tus-server ? I've tried both caddy and nginx in the last hours.

from uppy.

Murderlon avatar Murderlon commented on August 22, 2024

Are you sure you set /api-example or /api/files everywhere and you are not mixing them?

from uppy.

punowo avatar punowo commented on August 22, 2024

Are you sure you set /api-example or /api/files everywhere and you are not mixing them?

No. Frontend calls /api-example/ which gets rewritten by the reverse proxy to /api/. Backend everything is /api/. Right now I'm attempting to use /api-example/ everywhere both frontend and backend.

from uppy.

punowo avatar punowo commented on August 22, 2024

Are you sure you set /api-example or /api/files everywhere and you are not mixing them?

No. Frontend calls /api-example/ which gets rewritten by the reverse proxy to /api/. Backend everything is /api/. Right now I'm attempting to use /api-example/ everywhere both frontend and backend.

Even with all this, the location response header does not include the port I use for the ingress nginx.
Thanks for the help. I'm going to take a break from looking at this.

from uppy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.