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)