Today I’m going to share a container setup for React based on Nginx.
![](https://i0.wp.com/images.pexels.com/photos/808510/pexels-photo-808510.jpeg?w=1200&ssl=1)
To do this, we are going to create this docker-compose.yml
version: '3.1' services: nginx_frailstop: build: . container_name: nginx_frailstop restart: unless-stopped ports: - "80:80" - "443:443" volumes: - ./dist:/usr/share/nginx/html - ./config/nginx/cache/:/var/cache/nginx/ - ./config/nginx/sites/:/etc/nginx/sites-enabled/ - ./config/nginx/config/nginx.conf:/etc/nginx/nginx.conf
Now we are going to create our Dockerfile
# syntax=docker/dockerfile:1 FROM nginx:alpine # Copy static files from the /dist folder to Nginx directory COPY dist /usr/share/nginx/html # Expose port 80 (Nginx default port) EXPOSE 80 # Command to start Nginx in foreground CMD ["nginx", "-g", "daemon off;"]
Finally, we will create the necessary folders:
config nginx cache config -> nginx.conf sites
The nginx.conf file must contain:
user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #Disable cache: fastcgi_cache_bypass $http_cache_control; fastcgi_no_cache $http_cache_control; #gzip on; server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } include /etc/nginx/conf.d/*.conf; }
Remember that the React distribution folder generated with Vite is inside dist, you must place it in the root of this configuration.
So it looks like this:
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2024/02/imagen-19.png?resize=209%2C117&ssl=1)
Now we will use the command:
docker compose up -d
And we will be able to see the result on port 80: localhost:80.
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/07/cropped-light_logo-5.png?resize=100%2C100&ssl=1)