The article provides a guide on how to build a Docker image of a React Next.js application and deploy it in Nginx and map it to a domain. Docker is a containerization technology that allows that is commonly used by developers to package their applications and dependencies into a single deployable unit. Nginx on the other hand a high-performance web server that can serve as a reverse proxy, load balancer, and HTTP cache. React Next.js is a popular framework for building server-side rendered React applications and deploying web UI Services.

Requirements

To be able to achieve dockerizing react js, deploy on Nginx, and map it on the domain these are some of the requirements needed:

• Ensure you understand Docker and containerization
• and be well conversant with React Next.js
• You need to get a server or virtual machine running Ubuntu 18.04 or the latest
• Ensure you install Docker installed on the server

Step 1: Create a Next.js Application

for us to create a Next.js application. the following command is used to create a new Next.js application :

npx create-next-app my-nextjs_app

when the command is executed a new Next.js application is in a directory named my-app.

Step 2: Create a Dockerfile

We need to have a Dockerfile that will describe ways to build the application into a Docker image and create a new file called Docker in the root directory, this is the content to be placed in a Docker file:

# We have used the official Node.js 14 image as the base image
FROM node:14
# Set the working directory to /app
WORKDIR /app
# Copy the package.json and package-lock.json files to the container
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application code to the container
COPY . .
# Build the application for production
RUN npm run build
# Expose port 3000
EXPOSE 3000
# Start the application
CMD ["npm", "start"]

This Dockerfile uses the official Node.js 14 image as the base image. It then sets the working directory to /app and copies the package.json and package-lock.json files to the container. It installs the dependencies using npm install, copies the rest of the application code to the container, builds the application for production using npm run build, and exposes port 3000. Finally, it starts the application using npm start.

Step 3: Build the Docker Image

Using the Dockerfile we have created, proceed to build the Docker Image by running the below command in the root directory of the Next.js application:

docker build -t my-nextjs_app .

This command builds a Docker image with the tag my-app using the Dockerfile in the current directory.

Step 4: Run the Docker Container

once the above command is successful now proceed to run the Doker container using the image generated:

docker run -p 4000:4000 my-nextjs_app

This command will run the Docker container with the name my-nextjs_app and maps on port 4000 on the host machine, to access the Next.js application proceed using the link http://localhost:4000 on web browsers.

Step 5: Configure Nginx to work Reverse Proxy

What follows is now to configure Nginx as a reverse proxy for the Next.js application. Nginx will be listening to incoming requests on port 80 and then forwards them to the Next.js application that we have configured to run on port 4000.

below are the commands to use to Install Nginx:

sudo apt-get update
sudo apt-get install nginx

Create a file my-nextjs-app.conf in the /etc/nginx/sites-available directory with below content:

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://localhost:4000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

The configuration defines the Nginx server block that will be listening for incoming requests on port 80 and then proceed to forward them to our Next.js application that is running on http://localhost:4000 as well as set the HTTP headers that are required by the application. the command below allows us to enable the Nginx configuration.

sudo ln -s /etc/nginx/sites-available/my-nextjs-app.conf /etc/nginx/sites-enabled/

Test your Nginx configuration:

sudo nginx -t

Ensure no errors, and restart Nginx:

sudo systemctl restart nginx

We now have to update our DNS records to point to our custom domain to the Server Ip address of our Next.js application. Once this is done you will now be in a position to access the application from the browser using the domain example https://advancelearnlinux.com.

Conclusion

In this tutorial, we have shown how to build a Docker image of a React Next.js application and deploy it in Nginx while mapping it to a domain. by deploying the solution using the above method it allows to provide high performance and scalability solutions through Nginx.

More