NGINX Reverse Proxy Guide
This guide is targetted for Linux (Debian, Ubuntu) users. A Windows based guide can be found here
Terminology
- API: The API of SnailyCAD - the backend.
- Client: The client (UI) of SnailyCAD - the frontend.
- NGINX: NGINX is a web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache.
1. Installing NGINX
First, we need to install NGINX. To do this, we will use the apt package manager. To install NGINX, run the following command:
sudo apt install nginx
2. Configuring NGINX
Next, we need to configure NGINX. To do this, we will use the nano text editor. We will separate the configuration for the API and the client.
2.1 Configuring NGINX for SnailyCAD's API
To open the NGINX configuration file, run the following command:
sudo nano /etc/nginx/sites-available/cad-api
Now, we need to add the following configuration to the file:
# SnailyCAD API Reverse Proxy
server {
# Replace `example.com` with your domain name.
server_name cad-api.example.com;
location / {
proxy_pass http://localhost:8080; # The API port of SnailyCAD's API (Default: 8080)
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
# Security headers
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header X-DNS-Prefetch-Control on;
add_header Cross-Origin-Resource-Policy "same-site";
add_header X-Frame-Options DENY always;
# keep this as-is unless you know what you're doing.
# for SSL, see step 6
listen 80;
}
To save the file, press CTRL + X and then Y to confirm.
2.2 Configuring NGINX for SnailyCAD's client (UI)
Again, to open the NGINX configuration file, run the following command:
sudo nano /etc/nginx/sites-available/cad-client
Now, we need to add the following configuration to the file:
# SnailyCAD Client Reverse Proxy
server {
# Replace `example.com` with your domain name.
server_name cad.example.com;
location / {
proxy_pass http://localhost:3000; # The API port of SnailyCAD's client (Default: 3000)
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
# Security headers
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header X-DNS-Prefetch-Control on;
add_header Cross-Origin-Resource-Policy "same-site";
add_header X-Frame-Options DENY always;
# keep this as-is unless you know what you're doing.
# for SSL, see step 6
listen 80;
}
To save the file, press CTRL + X and then Y to confirm.
2.3 Verify NGINX configuration
To verify the NGINX configuration, run the following command:
sudo nginx -t
If the configuration is valid, you should see the following output:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
3. Enabling NGINX configuration
Now, we need to enable the NGINX configuration. To do this, run the following commands:
sudo ln -s /etc/nginx/sites-available/cad-api /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/cad-client /etc/nginx/sites-enabled/
4. Restarting NGINX
Finally, we need to restart NGINX. To do this, run the following command:
sudo systemctl restart nginx
SnailyCAD is now running behind NGINX. You can now access SnailyCAD by visiting http://cad.example.com with the API accessible via http://cad-api.example.com.
5. Enabling Firewall
To enable the firewall, we will use the ufw tool. To install ufw, run the following command:
sudo apt install ufw
Now, we need to allow the SSH, HTTP and HTTPS ports. To do this, run the following commands:
sudo ufw allow ssh
sudo ufw allow http
sudo ufw allow https
Now, we need to enable the firewall. To do this, run the following command:
sudo ufw enable
You will be asked to confirm the action. Type y and press Enter to confirm.
6. SSL
To enable SSL, we will use the certbot tool. To install certbot, run the following command:
sudo apt install certbot python3-certbot-nginx
Now, we need to generate the SSL certificate. To do this, run the following command:
certbot --nginx
You will be asked to enter your email address and agree to the terms of service.
Once accepted the ToS, Certbot will ask you to select the domain name you want to generate the SSL certificate for.
Select the domain name you want to generate the SSL certificate for and press Enter.
Now, Certbot will generate the SSL certificate for you. Once it's done, you should see the following output:
Certificate Deployed
Successfully deployed certificate for https://cad.example.com
#...
7. Updating SnailyCAD configuration
You must now update your SnailyCAD instance configuration to use the SSL certificate. To do this, open your SnailyCAD instance .env file:
# This is the URL to your site where the CAD is hosted.
CORS_ORIGIN_URL="https://cad.example.com"
# This is the URL to your site where the CAD is hosted.
NEXT_PUBLIC_CLIENT_URL="https://cad.example.com"
# The URL to where the API is hosted.
NEXT_PUBLIC_PROD_ORIGIN="https://cad-api.example.com/v1"
# The domain of your site. Without any subdomains or paths.
DOMAIN="example.com"
Replace example.com with your domain name.
You can now access SnailyCAD via https://cad.example.com with the API accessible via https://cad-api.example.com.
Troubleshooting
If you are having issues with NGINX, you can check the NGINX logs. To do this, run the following command:
sudo tail -f /var/log/nginx/error.log