Prerequisites:
- Ubuntu Machine
- Basic Docker knowledge
- Node and NPM on Local Device and Ubuntu
- 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
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
- 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 {}
- 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-dockerNow our application should running on thePORT 80. If you are using cloud for ubuntu machine then search in browserpublic_ip_of_machine:80, if you are deploying it on local device then openlocalhost:80in browser.
BYE 👋👋
Top comments (0)