Deploying Django + Vuejs in containers (AWS Elastic Beanstalk)

Question

I'm developing an app with Django and Vuejs and the time has come to test deployment related things. My app will be deployed several times (1 instance per future customer) so I'd like to use containers for faster deployments and removal of virtual machine maintenances.

The thing is :

I do not now how to build the vuejs part in production.

The Django backend is supposed to serve the bundle assets and, while I see on the AWS documentation that I can migrate, collect static files,... a Django application when the container starts, I do not know when/where I'm supposed to build the vuejs part in order to let Django collect the built things.

Can someone help me on this ?

When/where/how should I build the vuejs part ?

Note that Django and Vuejs are integrated this way : whatever the URL, Django serves the Vuejs SPA. And the Vuejs SPA consumes the Django API made with Django Rest Framework.

Thanks in advance for your help.

If more information is needed I will edit this post.

Answer 1

Didn't use beanstalk, so try to help with ECR + ECS + ALB stack.

Also you didn't provide many information about your configuration and your question little bit wide to answer definitely. So description below is a typical situation and may be not applicable to your case.

1. Create your own custom container images:

   • One for frontend. That will be Nginx + compiled Vue code. In other words image for static contents
   • One for backend. That will be Django + some application server (gunicorn, uwsgi, etc).

   And pool it to ECR.

   These images will be updated by some CI/CD tool or manually. You must to build it every time somewhere at your environment. Up to you

2. Create ECS cluster (or two for Front and Back). Set how many containers must run simultaneously, what ports to listen, etc. ECS will use your images from 1st step to run containers.

3. Create application load balancer and redirect all paths with api/ (domain.com/api/url) to backend containers and all others to frontend (two target groups must be created).

4. Create SSL certificate for load balancer HTTPS listener

UPDATE 1: answer to When/where/how should I build the vuejs part ?

According this information beanstalk can use your custom images to run containers

The Docker and Multicontainer Docker platforms for Elastic Beanstalk support the use of Docker images stored in a public or private online image repository.

So, if you store your Vue and Django in one container:

1. When should I build the vuejs part

   Anytime time when you want to release new code to your infrastructure

2. where should I build the vuejs part

   Anywhere at your server/compute service that has installed Docker

3. how should I build the vuejs part

   • Build Vue static code
   • Copy it to Django directory
   • Create Docker image with Django + Vue contents
   • Pull image to AWS ECR and update it version
   • Release (run new containers) updated service from updated image
   • Repeat on new release

UPDATE 2: answer to Concerning the uploaded images, I guess I have to save them on some AWS S3 storage somehow ?

The best way is to use S3 as static content storage (You can even store all Vue code at S3 and don't use containers for frontend at all)
Django also supports S3 . And it is pretty convenient.

※ Don't forget about CORS settings if you will try to run Vue on S3

But as I can suppose, you already have a completed service that using usual POSIX storage instead of S3-like Object storage . So here will be easier to mount permanent shared EFS volume to your containers . In this case you can run service without any code changes.

If you have time to adjust code for Object storage, I recommend use this way.