Binary Coffee

Integrar nuestros proyectos locales con Nginx usando Docker

docker linux nginx

驴Por qu茅 necesito Nginx?

Aunque binary-coffee.dev lleva ya m谩s de 1 a帽o desplegado y en funcionamiento (que se dice f谩cil), desde sus inicios ha sido un problema el trabajar con los dos proyectos que conforman el frontend.

Para quien desconozca c贸mo est谩 desarrollado el frontend del sitio, el mismo se divide en 2 aplicaciones:

  • Blog: el 谩rea conformada por el listado de art铆culos y los art铆culos en s铆, adem谩s de otras 谩reas tales c贸mo suscripciones, y dem谩s.
  • Dashboard: s贸lo es accesible para usuarios autenticados en el sitio, y es donde el usuario puede ver sus datos personales, adem谩s de donde puede crear y publicar sus art铆culos.

Ambos frontends se despliegan en el mismo servidor, con la 煤nica diferencia de que para acceder al dashboard, se hace con el prefijo /dashboard/ en la url.

Todo esto puede parecer simple, por lo que al mismo tiempo innecesario que se necesite un Nginx para unificar ambas aplicaciones. El problema est谩 dado en que la autenticaci贸n se realiza en el dashboard y los credenciales son compartidos entre las dos aplicaciones. Por este motivo, si se quiere de manera local probar el Blog con un usuario autenticado, se hace muy complejo el proceso.

Aqu铆 es donde entra Nginx en el proyecto, y para no tener que instalarlo en nuestro entorno de trabajo vamos a utilizar Docker.

Utilizando Nginx para unificar los Frontends

Como dije anteriormente, b谩sicamente lo que se necesita es un Nginx que reparta las peticiones entre los proyectos locales y que a la vez permita que para el desarrollador todo est茅 accesible a trav茅s de un solo puerto.

Actualmente el blog en desarrollo utiliza el puerto 4200 y en el caso del dashboard el puerto 4201. Lo que vamos a hacer a continuaci贸n, es crear un Nginx que distribuya las peticiones entre ambos proyecto seg煤n sea necesario. A continuaci贸n muestro c贸mo qued贸 la configuraci贸n del Dockerfile:

Dockerfile

FROM nginx:1.13.9-alpine

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

CMD ["nginx", "-g", "daemon off;"]

Como se puede notar en el c贸digo anterior, se hace referencia al archivo de configuraci贸n de Nginx. Dado el contexto del proyecto, dicho archivo quedar铆a de la siguiente manera:

nginx.conf

server {
  listen 80;

  gzip on;
  gzip_disable "msie6";
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

  location /dashboard/ {
   proxy_pass http://host.docker.internal:4201;
  }

  location / {
    proxy_pass http://host.docker.internal:4200;
  }
}

Analizando un poco m谩s a fondo la configuraci贸n de Nginx, se puede decir que en la primera l铆nea (2) se define el puerto por el que Nginx estar谩 activo. Luego, en las siguientes l铆neas se hacen las redirecciones a los proyectos correspondientes seg煤n la petici贸n en cuesti贸n. En caso de que la petici贸n tenga el prefijo dashboard, pues se redirecciona al proyecto dashboard por el puerto 4201 y en caso contrario, pues se redirecciona al proyecto del blog por el puerto 4200. Luego de definidas las configuraciones del Nginx y de Docker, y para facilitar las cosas, prepar茅 un docker-compose que nos ayudar谩 a la hora de desplegar dicho proyecto.

docker-compose.yml

version: '3'

services:
  deploy:
    build:
      context: .
    ports:
      - '4202:80'
    extra_hosts:
      - "host.docker.internal:host-gateway"

Con esta 煤ltima configuraci贸n, ya se puede iniciar Nginx con el siguiente comando:

docker-compose up -d

En este caso para utilizar el contenedor de Docker antes mostrado, se puede acceder por el puerto 4202 y a partir de las peticiones que se hagan a dicho puerto, el Nginx repartir谩 seg煤n se defini贸 en el mismo.

Conclusiones

Espero que si te encuentras en una situaci贸n parecida o igual a la antes descrita, el contenido de este art铆culo te facilite solucionar el problema.

Happy coding!

Opiniones