How to Deploy a React Application on Ubuntu Server with Nginx and SSL: A Comprehensive Guide

Deploying your React application on a server might seem overwhelming at first, but with the right tools and steps, it's easier than you think. In this guide, we'll walk you through how to deploy a React app on an Ubuntu server, using Nginx as your web server and securing your site with SSL using Certbot. Whether you're a beginner or a seasoned web developer, this step-by-step guide will make the process simple and efficient.

Prerequisites

Before you start, ensure you have the following:

• An AWS EC2 instance (Ubuntu recommended)
• SSH access to the EC2 instance
• A domain name (recommended, but optional)
• A React.js project ready for deployment

Step 1: Connect to Your EC2 Instance

To begin, you'll need to connect to your EC2 instance via SSH. Run the following command in your terminal:

ssh -i your-key.pem ubuntu@your-ec2-instance-ip

Step 2: Prepare Your Server

Start by updating your server and installing the necessary packages for deployment, including Nginx, Git, and Curl:

sudo apt update -y && sudo apt upgrade -y

sudo apt install -y nginx git curl

These tools are essential for serving your React app and downloading files from your repository.

Step 3: Clone Your React Application

Next, clone your React project repository to the server. Use the following command, replacing the URL with your Git repository:

git clone --depth 1 --filter=blob:none --sparse https://github.com/your-repo-url

cd repo

git sparse-checkout set /build

This process will only clone the latest build files, optimizing your deployment. The sparse-checkout mode ensures only the build folder is pulled from the repository.

Step 4: Move Build Files to Nginx's Directory

Now, move your React build files to Nginx’s root directory:

sudo mv /var/www/repo /var/www/react

sudo chown -R www-data:www-data /var/www/react

sudo chmod -R 755 /var/www/react

This ensures Nginx has the necessary permissions to serve your React application from the /var/www/react directory.

Step 5: Configure Nginx to Serve Your React App

Now it's time to configure Nginx to serve your React app. Open the configuration file using the following command:

sudo vim /etc/nginx/sites-available/react-app

Add the following configuration:

server {

    listen 80;

    server_name yourdomain.com www.yourdomain.com;

    # Redirect www to non-www

    if ($host = www.yourdomain.com) {

        return 301 http://yourdomain.com$request_uri;

    }

    root /var/www/react;

    index index.html;

    location / {

        try_files $uri /index.html;

    }

}

This ensures that Nginx will route all requests to the index.html of your React application, making it compatible with React's single-page application (SPA) structure.

Step 6: Enable Nginx Configuration

Enable the site configuration and restart Nginx:

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/

sudo nginx -t

sudo systemctl restart nginx

The nginx -t command checks the configuration for errors, and restarting Nginx applies the changes.

Step 7: Allow Traffic on HTTP and HTTPS Ports

Ensure that your server's firewall allows both HTTP (port 80) and HTTPS (port 443) traffic:

sudo ufw allow 'Nginx Full'

Step 8: Secure Your Website with SSL (HTTPS)

To secure your website with SSL, install Certbot and the Certbot Nginx plugin:

sudo apt install -y certbot python3-certbot-nginx

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com --non-interactive --agree-tos -m [email protected]

This will automatically configure SSL certificates for your domain, encrypting the traffic between your server and visitors, which is crucial for security and SEO.

Step 9: Restart Nginx

After SSL is set up, restart Nginx to apply the SSL configuration:

sudo systemctl restart nginx

Step 10: Check Your Website

Finally, navigate to https://yourdomain.com to ensure that your React app is live and securely accessible via HTTPS.

Conclusion

Congratulations! You've successfully deployed your React app on an Ubuntu server using Nginx and secured it with SSL. By following this guide, you’ve set up a fast and secure environment for your React app, ensuring a smooth experience for your users. With Nginx and Certbot, you can rest assured that your app will be served quickly and securely.

Need expert help with deploying your React app? Contact us for professional assistance and ensure a smooth, secure deployment!