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