[Fixed]-Docker container set up for Django & VueJS

*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.

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

#docker-compose.yml
version: "3.9"

services:
db:
image: postgres
environment:
   - POSTGRES_NAME=postgres
   - POSTGRES_USER=postgres
   - POSTGRES_PASSWORD=postgres
server:
 build: server/
 command: python manage.py runserver 0.0.0.0:8000
 ports:
   - "8000:8000"
environment:
   - POSTGRES_NAME=postgres
   - POSTGRES_USER=postgres
   - POSTGRES_PASSWORD=postgres
 depends_on:
   - db
client:
  build: client/
  command: npm run serve
  ports:
    - '8081:8080'
  depends_on:
    - server

#server django Dockerfile
# pull the official base image
FROM python:3

# set work directory
WORKDIR /usr/src/app

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
ENV DJANGO_SUPERUSER_PASSWORD="admin"

# install dependencies
RUN pip install --upgrade pip
COPY ./requirements.txt /usr/src/app
RUN pip install -r requirements.txt

# copy project
COPY . /usr/src/app

EXPOSE 8000


CMD ["python", "manage.py", "runserver"]

#client vue Dockerfile
FROM node:14.17.5 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build
EXPOSE 8080
CMD [ "npm", "run", "serve" ]

it’s working