Contenedor Nginx para React con Docker Compose

Tiempo de lectura: 2 minutos

Hoy os voy a compartir una configuración de contenedor para React basado en Nginx.

Para ello vamos a crear este 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

Ahora vamos a crear nuestro Dockerfile

# syntax=docker/dockerfile:1
FROM nginx:alpine

# Copia los archivos estáticos de la carpeta /dist al directorio de Nginx
COPY dist /usr/share/nginx/html

# Expone el puerto 80 (el puerto por defecto de Nginx)
EXPOSE 80

# Comando para iniciar Nginx en primer plano
CMD ["nginx", "-g", "daemon off;"]

Finalmente, crearemos las carpetas necesarias:

config
   nginx
      cache
      config -> nginx.conf
      sites

El fichero nginx.conf debe contener:

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;

    #Desactivar 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;
}

Recuerda que la carpeta de distribución de React generada con Vite está dentro de dist, debes ponerla en la raíz de esta configuración.

Quedando asi:

Ahora utilizaremos el comando:

docker compose up -d

Y podremos ver el resultado en el puerto 80: localhost:80.