Configure Nginx for MERN GraphQL app on Digitalocean

You can configure Nginx for your MERN GraphQL app on the Digitalocean droplet and redirect www to the non-www domain over SSL. Copy and paste the following code in /etc/nginx/sites-available/domain.com.conf and then create a symbolic link to enable the new server block with the following command:

$ sudo ln -s /etc/nginx/sites-available/domain.com.conf /etc/nginx/sites-enabled/

server {
    listen 443 ssl http2;
    #Path to the React front end
    root /var/www/html/domain.com;

    #the main html file
    index index.html;

    #Enter the domain name
    server_name domain.com;

    #STORE the nginx access logs for this app here
    access_log /var/log/nginx/domain.com.access.log;
    #Store the error logs for this app here
    error_log /var/log/nginx/domain.com.error.log;

    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        # Without this line routing in your Single Page APP will not work  
        try_files $uri $uri/ /index.html =404;
    }

    #GRAPHQL BACKEND CONFIG
    location /api/ {
        proxy_pass https://localhost:6443/;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

}
# redirect all https traffic from www to non-www
server {
    listen 443 ssl;
    server_name www.domain.com;
    return 301 https://domain.com$request_uri;

    #change this to your certificate paths 
    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem;   
}
# redirect all traffic from http to https
server {
    listen 80;
    server_name domain.com www.domain.com;
    return 301 https://$host$request_uri;
}

Configure Nginx for MERN GraphQL app on Digitalocean

Comments

TIL

React Nodejs Express & Mongodb - The MERN FullStack Guide

More from this blog

Improve Laravel development experience

Add Calendly to Nextjs 13

DbGate - The Smartest SQL+noSQL Database Client

Add responsive video to Nextjs using Bootstrap5

How to create a middleware in Laravel?

Command Palette

Comments

TIL

React Nodejs Express & Mongodb - The MERN FullStack Guide

More from this blog