Nginx Container for React with Docker Compose

Today I’m going to share a container setup for React based on Nginx.

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

Now we will use the command

docker compose up -d

And we will be able to see the result on port 80: localhost:80.

Written by

DevCodeLight