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:
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.
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 thex-forwarded-*
headers.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.
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.
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.
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