This project consists of two POCs that have became two ready-to-use archetypes combining Django as backend with a RESTful API with Vue as frontend with full CRUD operations examples. It's also dockerized meaning the set up both for testing or production are very easy and should run in every machine no matter the system or specs. It cames in two flavors: one aimed for local testing and developing which uses both Django's and Vue's developer servers with hot reload ability; the other using Gunicorn, Nginx and Postgres aimed for production.
This version consist on two Docker images (one for frontend y the other for backend) with a bind mount that connects the container with the local folder containing the code.
Python >= 3.6
Node >= 10
NPM >= 6
Docker CE >= 19
Clone the repo in the folder we want to work
This option allow us to build and run two containers sepparately with only one command.
docker-compose up
That's it. We should have both enviroments up.
docker image build -t frontvue . -f front.Dockerfile
docker image build -t backdjango . -f back.Dockerfile
docker container run -d -p 80:8000 -v $(pwd):/home/project/ backdjango
docker container run -d -p 8080:8080 -v $(pwd):/home/project/ frontvue
You can now visit localhost (or localhots: if we have specified another port)
Este proyecto es una prueba de concepto pero también un arquetipo listo para utilizarse, del stack Django como Backend (en este caso por defecto utiliza la versión 2.1.11 pero puede ser modificado) Vue.js como frontend (en este caso utiliza la versión 2.6.6 pero también puede ser modificado).
Entre las principalesa características de este proyecto se encuentran que está listo para ser utilizado de inmediato con Docker y que a su vez se presenta en dos versiones pensadas para desarrollo y producción respectivamente. Ambas están dockerizadas pero con diferentes métodos pensadas para facilitar enormemente el desarrollo utilizando este stack. Describimos a continuación las dos variantes.
Esta versión consiste de dos imágenes Docker que se levantan por separado (una para el frontend y otra para el back) con la particularidad de que se usa un bind-mount a la carpeta de desarrollo local. Esto, en conjunto con una técnica que utilizamos de este curso, permite usar hot reload para el back y para el front al mismo tiempo. La combinación del bind mount que prooponemos y la técnica de hot reload doble permiten un entorno muy cómodo para desarrollar en el que ambos servidores de desarrollo (de Django y de NPM-Vue) se levantan con un solo comando de Docker, en donde cualquier cambio que hagamos a nuestros archivos locales se refleja directamente dentro del contenedor y en donde cualquier cambio persiste, es decir, se puede parar el contenedor, levantarlo de nuevo mañana y continuar por donde dejamos con todos los cambios guardados.
Python >= 3.6
Node >= 10
NPM >= 6
Docker CE >= 19
En una carpeta local que seleccionemos para trabajar, abrir una terminal y hacer git clone de este repositorio
Esta opción nos permite buildear y levantar dos contenedores por separado con un solo comando. Abajo describimos como funciona internamente y el equivalente si queremos buildear las imágenes por separado.
docker-compose up
Ahí ya deberíamos tener dos servidores de desarrollo corriendo y podemos saltar al apartado "Todo listo".
Dentro de la carpeta que se nos crea cuando clonamos el repositorio, tenemos que buildear la imagen para levantar con Docker el Front y el Backend.
docker image build -t frontvue . -f front.Dockerfile
docker image build -t backdjango . -f back.Dockerfile
docker container run -d -p 80:8000 -v $(pwd):/home/project/ backdjango
docker container run -d -p 8080:8080 -v $(pwd):/home/project/ frontvue
Así como está, por defecto expone los puertos locales 80 y 8080 y los mapea con los puertos necesarios de los contenedores de Docker. Si por alguna razón tenemos alguno de estos puertos locales, se puede cambiar especificar otro. Por ejemplo para exponer nuestro puerto 8888 para el backend haríamos "-p 8888:8000" y en lugar de ir luago a "localhost" iríamos a "localhost:8888".
Ya se puede visitar "localhost" (ó "localhost:puerto-del-backend" si hemos especificado un puerto distinto en el contenedor del backend).
Para comprobar que todo está funcionando, podemos hacer cualquier cambio en los archivos de nuestra carpeta local (sea en el Front o en el Back) y se deberían reflejar automáticamente.
Adicionalmente, si se desea ver los logs de cada contenedor, se pueden correr los comandos "docker container run" sin la opción "-d", cada uno en una terminal distinta.
Los contenedores se puede parar y volver a levantar, o incluso para y borrar, y los cambios deberían persistir en nuestra carpeta de trabajo local.
Para ejecutar una consola dentro de un contenedor (que tiene que estar corriendo), debemos obtener el id del contendor haciendo
docker container ls
Una vez que tenemos en mente el ID del contendor al que queremos entrar, hacemos:
docker container exec -it <ID del contenedor> sh
"No se puede acceder a este sitio" "ERR_CONNECTION_REFUSED"
Podemos revisar los logs del contenedor del backend y veremos que dice: You're accessing the development server over HTTPS, but it only supports HTTP.
Si lo forzamos manualmente a no accceder mediante HTTPS, sino HTTP, debería funcionar bien: http://localhost:80
Son las únicas dos vistas que están hechas con templates de django. Se pueden encontrar en la carpeta templates/registration y templates/django_registration.
https://gitlab.com/devsar/innovation-lab/vue-django-archetype-prod/