DEV Community

Cover image for Deploy Web Application using Nginx and Docker on Ubuntu
Jay Sheth
Jay Sheth

Posted on Edited on

Deploy Web Application using Nginx and Docker on Ubuntu

#react #docker #ubuntu #nginx

Prerequisites:

  1. Ubuntu Machine
  2. Basic Docker knowledge
  3. Node and NPM on Local Device and Ubuntu
  4. Docker on Ubuntu machine

Flow:

  • On local machine create a React App if you don't already have 1 by following command 
npx create-react-app react-app
cd react-app
npm start
Enter fullscreen mode Exit fullscreen mode

NOTE: You can name your project anything, I have kept it react-app in this demo

  • Create a Dockerfileon root level of react-app directory with below content. 
FROM node:lts-alpine as build  # Use Node.js LTS Alpine image as build environment

WORKDIR /app  # Set working directory inside the container to /app

COPY package*.json ./  # Copy package.json and package-lock.json files to /app directory

RUN npm ci  # Install dependencies using npm's CI mode for faster and consistent builds

COPY . .  # Copy the rest of the application files to /app directory

RUN npm run build  # Build the application using npm script

FROM nginx:latest as prod  # Use the latest Nginx image as production environment

COPY --from=build /app/build /usr/share/nginx/html  # Copy built files from the previous stage to Nginx HTML directory

COPY nginx.conf /etc/nginx/nginx.conf  # Copy custom Nginx configuration file to override default configuration

EXPOSE 80/tcp  # Expose port 80 for incoming HTTP traffic

CMD ["/usr/sbin/nginx", "-g", "daemon off;"]  # Start Nginx server with daemon off for foreground execution
Enter fullscreen mode Exit fullscreen mode
  • We will also need to create a Nginx configuration file to listen for any connection at port 80. Create a new file name nginx.confat root level of project directory. 
http {

  include mime.types;

  set_real_ip_from        0.0.0.0/0;
  real_ip_recursive       on;
  real_ip_header          X-Forward-For;
  limit_req_zone          $binary_remote_addr zone=mylimit:10m rate=10r/s;

  server {
    listen 80;
    server_name localhost;
    root /proxy;
    limit_req zone=mylimit burst=70 nodelay;

    location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri /index.html;   
    }
  }
}

events {}
Enter fullscreen mode Exit fullscreen mode
  • Push this code on GitHub Repo
  • Deploy Ubuntu machine on any cloud provider if you don't have setup on local device
  • On Ubuntu machine we need to node, npm, docker installed, if it is not configured then do so.
  • After installing node, npm, docker, pull the code from GitHub Repo & run these commands to run our application on server.
  • This command will create an image for the above mentioned dockerfile. docker build -t react-app-image:1.0.0 .
  • Now we will create a container for the image we created, by running the following command. docker run -d -p 80:80 --name react-server with-docker Now our application should running on the PORT 80. If you are using cloud for ubuntu machine then search in browser public_ip_of_machine:80, if you are deploying it on local device then open localhost:80 in browser.

BYE 👋👋

Top comments (0)