How to Deploy a ReactJS Web Application on DigitalOcean
DigitalOcean is a cloud provider that offers services structured around different cloud service models — infrastructure-as-a-service (IaaS),platform-as-a-service(PaaS), software-as-a-service(SaaS) and so on.
This article is a walkthrough on how to deploy a ReactJS web application on DigitalOcean’s IaaS offering — DigitalOcean Droplets — with Nginx.
CAVEAT: Creating a React app is outside the scope of this article. However — after you are done writing code for your React application — you will need to run
npm run build
to bundle your React application into a/build
directory — in order to optimize your application for best performance within a deployment environment.
For this article, the main highlights are:
- Create a DigitalOcean Droplet.
- Install Nginx on it.
- Get source files from Git repository.
- Modify configuration files
- Serve web content from source files for React app.
Now, let’s get into it.
Setup a DigitalOcean Droplet
DigitalOcean offers an infrastructure-as-a-service (IaaS) option in the form of virtual machine instances called Droplets.
Provision a droplet with an Ubuntu 20.04 image, with the lowest payment plan ($5/month) — since we will be using the instance for demonstration purposes. Also, choose password-based authentication at this stage. This droplet is our host machine for the Nginx server.
Note that the default username is
root@<droplet-external-IP>
; that is,root@xxx.xx.xx.xx
. Your password is whatever value you pass in while creating the droplet.
Once the droplet is created, set up SSH keys for secure log in to your droplet.
Install Nginx
After you set up SSH-based authentication, create a new user with administrative privileges.
Switch to the new user:
$ su <username>
Install Nginx:
$ sudo apt update
$ sudo apt install nginx
Configure firewall
You need to set firewall rules using the firewall service ufw
to allow web access to the Nginx server. View a list of firewall configurations with the following command:
$ sudo ufw app list
You should get this output:
Available applications:
Nginx Full
Nginx HTTP
Nginx HTTPS
OpenSSH
To allow HTTP traffic, use the actual profile name — rather than the value 80 for HTTP and 443 for HTTPS. Run the command:
$ sudo ufw allow 'Nginx HTTP'
$ sudo ufw allow OpenSSH
Verify that the configuration is active:
$ sudo ufw status
This should be the output:
Status: activeTo Action From
-- ------ ----
OpenSSH ALLOW Anywhere
Nginx HTTP ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
Nginx HTTP (v6) ALLOW Anywhere (v6)
If your output says
status:inactive
, run the commandsudo ufw enable
Run the following commands to restart the server (for the changes to take effect) and check the status of the Nginx server:
$ sudo systemctl restart nginx
$ sudo systemctl status nginx
Nginx should be active and running as shown:
nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Tue 2021-09-07 17:20:37 UTC; 23h ago
Docs: man:nginx(8)
Main PID: 6448 (nginx)
Tasks: 5 (limit: 9513)
Memory: 5.1M
CGroup: /system.slice/nginx.service
├─6448 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
├─6449 nginx: worker process
├─6450 nginx: worker process
├─6451 nginx: worker process
└─6452 nginx: worker process
Enter your droplet’s IP address on your browser to confirm that Nginx is running properly. You can retrieve your IP address using the command:
$ curl -4 icanhazip.com
If Nginx is running properly, the default Nginx start-up page should display on your browser.
Deploy React application
Generally, Nginx serves web documents from the /var/www
directory — the default start-up page originates from an index.html
file in the /var/www/html
directory.
Therefore, as a rule, place the web documents for your website in a named directory within the /var/www
directory.
Let’s add the source files for the ReactJS application.
Clone your Git repository (for the React app) the /var/www
directory:
$ cd /var/www
$ git clone <git-repo-link>
This should create a directory /var/www/<your-directory-name>
containing your source files/directories.
The /build
directory for the React application — within /var/www/<your-directory-name>
— is the most important here because it contains the index.html
file to be served.
TIP: You may delete all other files and directories except the
/build
directory that contains theindex.html
file — since that is the only directory needed.
Change ownership of the /var/www/<your-directory-name>
directory to ensure you have the permissions to modify files within the directory. Run the command:
$ sudo chown -R $USER:$USER /var/www/<your-directory-name>
This will assign ownership to the new user you created above.
Next, let’s create a server configuration for our React application.
Add server configurations
All Nginx configuration files are within the /etc/nginx
directory:
- The main configuration file for global Nginx settings is the
nginx.conf
located in/etc/nginx/
. - Configuration files for each domain(website) hosted on the server are located within
/etc/nginx/sites-available
.
The configuration files in /etc/nginx/sites-available
usually end with the .conf
extension — however, you may choose to name them without the extension. These configuration files help Nginx identify and track the websites that it hosts.
Navigate to /etc/nginx/sites-available
. It should contain a default
or default.conf
file. Create your own .conf
file:
$ touch <filename>.conf
Open the newly created file in any text editor — we’ll be using vi
:
$ vi <filename>.conf
The configuration for the React application will be placed in a server
block. This block specifies how requests to the IP address or domain should be handled.
Paste the following configuration snippet:
# Virtual Host configuration for <your-domain-name>server {
listen 80;
listen [::]:80;# server_name <your-domain-name>; root /var/www/<your-directory-name>/build;
index index.html; location / {
try_files $uri $uri/ =404;
}
}
- The
listen
directive specifies the HTTP port to allow web access —80 for IPv4 and [::]:80 for IPv6
. - The
server_name
directive specifies the domain name or website address the server handles requests for. (This directive can be omitted if you do not have a domain name). - The
root
directive points to the location of the web documents —html
,css
,js
files. The line below theroot
directive specifies the possiblehtml
files to look for and read from. - The
location
directive takes a URL parameter and matches it with whatever is specified —/
in our case — to enable the server to respond with the appropriate content for that URL.
Run the command :wq
to save and exit the editor.
Create a symbolic link between your/etc/nginx/sites-available<filename>.conf
file and /etc/nginx/sites-enabled
directory:
$ ln -s /etc/nginx/sites-available<filename>.conf /etc/nginx/sites-enabled
Some information on symbolic links:
A symbolic link creates a special type of file that contains a pointer to a referenced file or directory.
Both the symbolic link and the file being referenced are indistinguishable from one another — whatever is written to the original file reflects in the symbolic link.
A common use case for symbolic links is in managing multiple versions of a single software. The symbolic link can point to the latest version of the software even though previous versions are available on the system — this way all files that depend on the software can just use the symbolic link instead of having to worry about versions.
Symbolic links to the configuration files are in the
/etc/nginx/sites-enabled
directory. The global Nginx configuration filenginx.conf
reads from this directory — through theinclude
directive — in order to ensure that only the current versions of configurations are applied.
Run the following command to confirm that there are no issues with your configuration:
$ sudo nginx -t
The following output indicates a satisfactory configuration:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
Now, restart the Nginx server. Run the command:
$ sudo systemctl restart nginx
Refresh your browser. The React application should be successfully deployed.
Conclusion
Deploying an application on the cloud makes it possible to easily get an application up and running with minimal cost. You can take this process a step further by setting up a CI/CD pipeline to automate the build/deploy process.
You can also explore DigitalOcean’s App Platform — a PaaS offering — here.