Nginx reverse proxy setup and server hardening for production apps
This video covers the essential steps of setting up Nginx as a reverse proxy for a full-stack application and hardening your server with vital HTTP security headers. You will learn how to bridge the gap between your backend API and your frontend static files to make your website accessible to the world.
We start by syncing our frontend and backend URLs. You’ll see how to configure the Vite proxy for local development and modify your production code to avoid complex Cross-Origin Resource Sharing (CORS) issues. Once the code is ready, we install Nginx on Ubuntu and walk through building a custom configuration file block-by-block, covering upstreams, server names, and location routing.
A significant portion of the video is dedicated to troubleshooting. We encounter and fix the notorious "502 Bad Gateway" error by inspecting Nginx logs and resolving Unix socket permission issues. Finally, we dive into web security, using tools like Mozilla HTTP Observatory to implement a robust Content Security Policy (CSP), HSTS, and other headers to protect your users and achieve a high security rating.
Useful links:
Source code:
https://github.com/ImadSaddik/ImadSad...
Full stack deployment handbook:
https://github.com/ImadSaddik/FullSta...
Nginx playground:
https://nginx-playground.wizardzines....
Mozilla HTTP observatory
https://observatory.mozilla.org/
Security Headers Test
https://securityheaders.com/
Don't forget to like, subscribe, and leave a comment if you have any questions or feedback!
⭐️ Contents ⭐️
(00:00) Introduction & Recap
(00:32) Roadmap: Reverse Proxy & Security
(01:28) Syncing Frontend & Backend URLs
(03:52) Configuring Vite Proxy for Development
(08:35) Building the Frontend
(09:15) Nginx: The Traffic Cop (Theory)
(13:30) Installing Nginx on Ubuntu
(13:46) Writing the Nginx Configuration
(22:24) Testing Configs with Nginx Playground
(25:11) Master Configuration File in Nginx
(26:48) Enabling the Site with Symbolic Links
(29:30) Firewall Setup (UFW)
(31:00) Debugging 502 Bad Gateway & Permissions
(40:50) Introduction to Security Headers
(44:04) Configuring Strict Transport Security
(45:40) Configuring CORP, X-Frame-Options, and X-Content-Type-Options
(49:25) Configuring Referrer-Policy and Permissions-Policy
(50:40) Step-by-Step Content Security Policy (CSP)
(01:02:45) Final Security Audit & Summary