Home >Web Front-end >JS Tutorial >Dockerizing Your Frontend Application with Nginx for Seamless Deployment
Most often, deploying a frontend application requires separating the serving of static assets from backend APIs. A good approach to this is to couple Nginx as the reverse proxy and web server with Docker for containerization. This guide takes you through the process of how to deploy a frontend application using Nginx and Docker.
How to Deploy a Frontend Application Using Nginx and Docker
Introduction
Efficiently deploying a frontend application often involves separating the serving of static assets from backend APIs. A powerful approach is combining Nginx as a reverse proxy and web server with Docker for containerization. This guide walks you through the process of deploying a frontend application using Nginx and Docker.
Prerequisites
To follow this guide, you should have:
A clear project structure simplifies deployment. Place all necessary files in a folder to build your Docker image. These files should include:
For an in-depth explanation of the Nginx configuration, refer to this
Elevating React: Unleashing the Power of Nginx for Effortless Deployment
Amit Kumar Rout ・ Dec 9 '23
#javascript #tutorial #react #nginx
npm run build
This command creates a build/ directory containing optimized static files.
FROM nginx:latest # Clean the default HTML directory and remove default nginx.conf RUN rm -rf /usr/share/nginx/html/* RUN rm /etc/nginx/nginx.conf # Copy custom Nginx configuration COPY nginx.conf /etc/nginx/ # Copy the production build files into Nginx's HTML directory COPY build/ /usr/share/nginx/html/ # Copy additional Nginx configurations (if any) COPY ./sites-enabled/* /etc/nginx/sites-enabled/ # Expose port 80 EXPOSE 80 # Start Nginx CMD ["nginx", "-g", "daemon off;"]
Once your files are ready, build the Docker image:
docker build -t my-app-img:prod .
If deploying on another VM, you can package the image as a .tar file:
docker save my-app-img > my-app-img.tar
cat my-app-img.tar | docker load
docker run -itd -p 80:80 --name my-app my-app-img
This starts the container, exposing it on port 80.
Creating a docker-compose.yml file:
version: "3" services: web: container_name: my_app image: my-app-img ports: - "80:80" volumes: - ./template:/etc/nginx/templates/ environment: NGINX_ENVSUBST_OUTPUT_DIR: /etc/nginx/sites-enabled
Then, start the container:
docker-compose up -d
The use of Nginx and Docker to deploy a frontend application gives a strong, scalable solution. This is because it separates static assets from backend APIs, giving the best performance. Customize your Nginx configuration to meet your needs, such as:
This setup enables your frontend application to be reliable in production-ready environments.
If you have any suggestions for improving the process, please leave them in the comments section. If you found this post helpful, please like and share it.
Happy Coding!
The above is the detailed content of Dockerizing Your Frontend Application with Nginx for Seamless Deployment. For more information, please follow other related articles on the PHP Chinese website!