Docker container set up for Django & VueJS

Question

Good afternoon,

I am looking for some guidance on where to concentrate my efforts. I keep getting off down these rabbit holes and cannot seem to find the path I am looking for.

I have developed a couple small internal django apps but wish to integrate VueJS into the mix for more dynamic front end.

My goals are:

• I want to use Django-restframework for the backend calls
• I want to use VueJS for the front end and make calls back to the REST API.
• I want all of this to live in Docker container(s) that I can sync using Jenkins.

My questions / concerns:

• I keep trying to build a single docker container for both VueJS and Django but starting with either Node or Python, I seem to end up in dependency hell. Does anyone have a good reference link?
• I can't decide if I want it completely decoupled or to try to preserve some of the Django templates. The reason for the latter is that I don't want to lose the built in Django authentication. I am not skilled enough to write the whole authentication piece so I would rather not lose that already being done.
• If I am complete decoupled and django is strictly the API, I could also have a single docker container for the django, and a second docker container for the front end. Thoughts?
• Finally, these webapps are all the same risk level and exist on the same web app server with a separate postgres database server. Should nginx be on the server, then gunicorn in the docker container with django? Where do most devs draw the line on what is native on the server and what is being served from a docker container? These are all pretty low volume apps targeted for specific purposes.

Thanks for all your guidance as I continue to venture into new territory.

Kevin

Answer 1

I've been working with Django/Vue and this is what I do:

• Create the Django project
• Initialize the project's folder as new Vue project using the vue-cli

From here I can start two development servers, one for Django and the other for Vue:

python manage.py runserver

In another terminal:

npm run serve

In order to consume my API in Vue this I use this configuration in vue.config.js:

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/static/'
    : '/',
  outputDir: '<PROJECT_BASE_DIR>/static',
  indexPath: '../templates/index.html',
  filenameHashing: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000'
      }
    }
  },
}

devServer redirects the requests to the API, outputDir and indexPath help to build the app to the project's folder, <PROJECT_BASE_DIR>/templates/ and <PROJECT_BASE_DIR>/static/

The next thing is to create a TemplateView and set the template_name to index.html (the file built by Vue), with this you have your SPA inside a Django view/template.

With this approach you can use a Docker container for Django.

I hope this gives you some basic guidance to continue.

Alejandro

Answer 2

*Update December 2020

If you are interested in SSR, here's an outline for an approach I have been working on:

Update December 2020

Here's another way to do Django with Vue in containers on DigitalOcean with docker swarm. It a lot simpler than the approach with AWS shown below, but not as scalable:

Update June 2020

I have made some changes to the project that make use of the Cloud Development Kit (CDK) and AWS Fargate instead of ECS with container instances to take advantage of serverless infrastructure.

Here's an overview of the project architecture: https://verbose-equals-true.gitlab.io/django-postgres-vue-gitlab-ecs/start/overview/

and here's an updated architecture diagram:

Edit May 2019

Here is a setup for Django and Vue using ECS, the AWS container orchestration tool and GitLab for CI/CD. The repo is here.

I have been working on a project that demonstrates how to set up a Django + Vue project with docker. It is an ope source project called verbose-equals-true (https://verbose-equals-true.tk). The source code for this project is available here: https://gitlab.com/briancaffey/verbose-equals-true

Here is an overview of how I'm structuring the project for production. The project uses docker compose to orchestrate the different containers for production and also for development.

Let me know if you have any questions any questions about how I'm using Django/Vue/docker. I have documentation with detailed descriptions at https://verbose-equals-true.tk/docs.

Here are some thoughts on your questions/concerns:

• I started with the official recommendations from VueJS for how to dockerize a Vue app, and an official example from Docker about how to dockerize a postgres + Django app. You can probably put everything in the same container, but I like separating things out as a way of keeping things modular and clear.

• I'm using JWT for authentication with djangorestframework_jwt package. I can also use the builtin Django authentication system and Django admin.

• I think it makes sense to have separate containers. In development you can serve the Vue app from the node container running npm run serve, and in production you can serve the production app's static files from an nginx container (you can use a multi-stage build for this part).

• I would keep everything in containers with nothing on the server except the docker engine. This will simplify setup and will allow you to keep your application portable to wherever you decide to deploy it. The only thing that makes sense to keep separate is the postgres database. It is often much easier to connect to a managed database service like AWS RDS, but it is also possible to run a postgres container on your docker host machine to keep things even simpler. This will require that you do backups on your own, so you will need to be familiar with docker volumes.