Configure SvelteKit for ELB

TODO: collapasable, copyable, download, etc

I have deployed a sveltekit app in production mode with the node adapter behind an AWS ELB. If I set PROTOCOL_HEADER=x-forwarded-proto HOST_HEADER=x-forwarded-host environment variables, should that be enough for my app to see the request.url as https://example.com instead of http://localhost:3000 ?When you deploy a SvelteKit application behind an AWS Elastic Load Balancer (ELB) and use the Node adapter, the application by default sees requests as coming directly to it, which typically means it sees the protocol as HTTP and the host as localhost or whatever internal address the Node server is running on. This is because the ELB acts as a reverse proxy, terminating the HTTPS connection at the ELB and then forwarding the request to your application over HTTP.

To ensure your SvelteKit application correctly recognizes the original protocol (HTTPS) and host as used by the client, you indeed need to use the x-forwarded-proto and x-forwarded-host headers. These headers are set by the ELB to indicate the original protocol and host requested by the client.

Setting the PROTOCOL_HEADER and HOST_HEADER environment variables to x-forwarded-proto and x-forwarded-host, respectively, is a step in the right direction. However, whether that's enough depends on how your SvelteKit application and the Node adapter are configured to handle these headers.

For a SvelteKit application using the Node adapter, here's what you need to ensure:

  1. Application Configuration: Your application or the underlying server framework (like Express, if you're using it with SvelteKit) needs to be configured to trust these headers. This often involves telling your application to trust the proxy.

  2. Trust Proxy Settings: If you're using an express server or a similar setup, you might need to set app.set('trust proxy', true); or a similar configuration to ensure that your application trusts the load balancer as a proxy and respects the x-forwarded-* headers.

  3. SvelteKit Configuration: Ensure that your SvelteKit configuration or custom server code (if you're modifying the server directly or using middleware) correctly reads these environment variables and applies them when reconstructing the request URL for internal use.

    • If you're directly manipulating headers or URLs within your SvelteKit app or server configuration, ensure that you're properly reading these headers and using them to overwrite or set the request's protocol and host.
  4. Security Considerations: Always ensure that only headers from trusted proxies (like your ELB) are respected. This is typically handled by configuring your network or server settings to only trust headers from known IP ranges or ensuring your application is only accessible through the ELB.

  5. Documentation and Version Compatibility: Check the SvelteKit and Node adapter documentation for any version-specific instructions or features related to handling headers and proxies. The approach may vary depending on the versions you are using.

By properly configuring your application to respect the x-forwarded-proto and x-forwarded-host headers, you should be able to make your SvelteKit app recognize and generate URLs with https://example.com instead of http://localhost:3000. Always test your configuration in a staging environment before deploying to production to ensure everything works as expected.

Configure SvelteKit for ELB created at Tue Jan 20 1970 18:24:43 GMT+0000 (Coordinated Universal Time)

Related Chats

ELB Headers Configuration 0.866

EC2 ELB Troubleshoot Setup 0.721

K8s Headers Forwarding Configuration 0.661

Fix ELB IP Forwarding 0.636

Auth Config with Dynamic URL 0.533

SvelteKit REST Proxy 0.483

Privacy Page 404 Error 0.456

Curl with Origin Header 0.424

Troubleshoot Authkit Redirection Loop 0.420