Binary Coffee

Integrar nuestros proyectos locales con Nginx usando Docker

docker linux nginx
## ¬ŅPor qu√© necesito Nginx? Aunque [binary-coffe.dev](http://binary-coffe.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