What is Nginx?
NGINX is open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more.
It started out as a web server designed for maximum performance and stability. In addition to its HTTP server capabilities, NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP, TCP, and UDP servers.
In this article I'm going to show you how you can serve a static app like react using nginx.
Let's get started 🚀
1. Install Nginx (Ubuntu)
sudo apt update
sudo apt install nginx
2. Deploy your react app
Clone your react app
git clone https://github.com/<your username>/<your react app repo>.git
Install packages
sudo yarn install
Build the app
sudo yarn build
3. Create an Nginx configuration file
cd /etc/nginx/sites-available
sudo nano react.conf
Paste this codes
server {
listen 80;
server_name your_IP_or_Domain;
root /home/username/path_to_your_react_app/build;
index index.html index.htm;
location / {
try_files $uri/index.html=404;
}
Create an nginx virtual host file.
we are going to do this by creating symlink to our config file for nginx to recognize it
sudo ln -s /etc/nginx/sites-available/react.conf /etc/nginx/sites-enabled
Now that we are done with our configurations, let's test it.
To test if the configurations have no errors we run the command below.
sudo nginx -t
if successful, you should see this in your terminal 🦾
let's test our static app.
this restart our nginx service
sudo service nginx restart
Then open your browser and visit your_ip or domain as used in
our config file.
You should see the app running ✨
Some helpful resources
can check the article here as well
Top comments (0)