How To Deploy a React Application with Nginx on Ubuntu 21.04

#Introduction

In this tutorial, how to deploy a React Application using our own Ubuntu Server and Nginx. You can quickly deploy react Applications using the default Create React App build tool.

Prerequisites

• VPS Ubuntu 21.04. I use Linode is Cloud Hosting High-performance SSD Linux servers.
• Nginx: Lightweight and high-performance Web server or Reverse Proxy
• On your local machine: you will need a development environment running node.js.
• A registered domain name. And setup DNS records for your server.
  • An A record with your_domain pointing to your server’s public IP address.
  • An A record with www.your_domain pointing to your server’s public IP address.

Deploy a React Application with Nginx on Ubuntu 21.04

Your local machine

Step 1 — Creating a React Project

npx create-react-app react-deploy
cd react-deploy
npm start

Open a browser and navigate to http://localhost:3000.

Step 2: Build production

npm run build

Your VPS

Step 3: Uploading build files to VPS

Use scp command uploading build files to /var/www/your_domain/html directory on VPS.

 scp -r ./build/* username@server_ip:/var/www/your_domain/html

For example, Nginx configure

I use SSL for the website as below:

root@localhost:~# cat /etc/nginx/conf.d/your_domain.conf
server {
        listen 80;
        #listen [::]:80 ipv6only=on;

        if ($host = www.your_domain) {
        return 301 https://$host$request_uri;
        }

        if ($host = your_domain) {
        return 301 https://$host$request_uri;
        }

        server_name www.your_domain your_domain;
        return 444;
        #return 301 https://$server_name$request_uri;


}



server {
        listen 443 ssl http2 ; # managed by Certbot
        listen [::]:443 ssl http2;
        server_name www.your_domain your_domain;

        root /var/www/your_domain/html;
        index  index.html index.htm;
        access_log off;
        error_log /var/www/your_domain/logs/error.log;

        location / {
        try_files $uri $uri/ /index.html;
        #try_files $uri /index.html;
             #index index.html index.htm;
        }
        location ~ ^/(scripts.*js|styles|images) {
           gzip_static on;
           expires 1y;
           add_header Cache-Control public;
           add_header ETag "";

          break;
        }

        #End Crontab

        gzip on;
        gzip_comp_level    5;
        gzip_min_length    256;
        gzip_proxied       any;
        gzip_vary          on;
        gzip_types
        application/atom+xml
        application/javascript
        application/json
        application/ld+json
        application/manifest+json
        application/rss+xml
        application/vnd.geo+json
        application/vnd.ms-fontobject
        application/x-font-ttf
        application/x-web-app-manifest+json
        application/xhtml+xml
        application/xml
        font/opentype
        image/bmp
        image/svg+xml
        image/x-icon
        text/cache-manifest
        text/css
        text/plain
        text/vcard
        text/vnd.rim.location.xloc
        text/vtt
        text/x-component
        text/x-cross-domain-policy;
        # text/html is always compressed by gzip module
        #add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";

        add_header X-Frame-Options DENY;
        add_header X-Content-Type-Options nosniff;
        add_header X-XSS-Protection "1; mode=block";

        ###
        # Retrict bad bot and bad referer
        ###
        # Block HTTP method not include GET,HEAD,POST
        if ($request_method !~ ^(GET|HEAD|POST)$ ) {
            return 444;
        }

        # Block bad http_referer (link contain bad word)
    if ( $http_referer ~* (adult|babes|click|diamond|forsale|girl|jewelry|love|nudit|organic|poker|porn|poweroversoftware|sex|teen|webcam|zippo|replica|onload\.pw) ) {
            return 444;
         }
    ## Block download agents ##
         if ($http_user_agent ~* (LWP::Simple|BBBike|wget) ) {
            return 444;
         }

    location = /robots.txt  {
                                allow all;
                            }
    location ~ /.well-known {
                allow all;
     }
    location = /favicon.ico { access_log off; log_not_found off; expires 30d; }
    location ~ /\.          { access_log off; log_not_found off; deny all; }
    location ~ ~$           { access_log off; log_not_found off; deny all; }
    location ~ /\.git       { access_log off; log_not_found off; deny all; }
    location = /nginx.conf  { access_log off; log_not_found off; deny all; }
    location ~* /(?:uploads|files)/.*\.php$ { access_log off; log_not_found off; deny all; }
    location ~ /(readme.html|license.txt) { deny all; }
    location ~* \.(ogg|ogv|3gp|gif|jpg|jpeg|png|ico|wmv|avi|asf|asx|mpg|mpeg|mp4|pls|mp3|mid|wav|swf|flv|exe|zip|tar|rar|gz|tgz|bz2|uha|7z|doc|docx|xls|xlsx|pdf|iso|eot|svg|svgz|ttf|woff|otf|rss|atom|ppt|midi|bmp|rtf)$ {
           gzip_static     off;
            #add_header      Cache-Control "public, must-revalidate, proxy-revalidate";
            add_header Cache-Control "public, no-transform";
            access_log      off;
            log_not_found   off;
            expires         max;
            break;
    }
    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
            #add_header      Cache-Control "public, must-revalidate, proxy-revalidate";
            add_header Cache-Control "public, no-transform";
            access_log      off;
            log_not_found   off;
            expires         30d;
            break;
    }
    ssl_dhparam /etc/letsencrypt/dhparams.pem; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot

}

Conclusion

You Deploy a React Application with Nginx on Ubuntu 21.04. I hope will this your helpful. Thank you for reading the DevopsRoles page!