#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!
