How To Deploy a React Application with Nginx on Ubuntu 21.04

#Introduction

In this tutorial, how to deploy 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!

, , ,

About HuuPV

My name is Huu. I love technology and especially Devops Skill such as Docker, vagrant, git so forth. I likes open-sources. so I created DevopsRoles.com site to share the knowledge that I have learned. My Job: IT system administrator. Hobbies: summoners war game, gossip.
View all posts by HuuPV →

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.

This site uses Akismet to reduce spam. Learn how your comment data is processed.