If you’re like me and you don’t want things to be complicated, then you obviously want everything to run in the same container (I’m exagerating obviously)

In this example I’ll be containerizing a Django application and a Nuxt.JS application into a single Docker Image. Currently my application only have a few users and it isn’t worth the time to over-compilcate things, I want to code, push and let the image update everything together.

This will also simplify the development, versioning and deployment flow.

So let’s get right into it.

Folder Structure

I’m using a simple folder structure with `backend/` and `frontend/` where the code resides, there’s a bunch of other folders we can ignore (workflows, scripts, configs, docs, etc)

At the root level I have the `Dockerfile`

Dockerfile

The Dockerfile contains a frontend-build stage and a backend stage (the one that’s deployed), the frontend-build stage uses node:lts and the backend uses some minimal image (here I chose opensuse/leap)

The Dockerfile:

FROM node:lts-bookworm as frontend-build# Create app directoryWORKDIR /usr/src/app# Install app dependenciesCOPY frontend/package*.json ./COPY frontend/yarn.lock ./RUN yarn install# Bundle app sourceCOPY ./frontend .RUN yarn generateFROM opensuse/leap:15.5RUN zypper --non-interactive si -d python311 python311-pip \    && zypper --non-interactive in python311 \    && python3.11 -m ensurepipCOPY backend/requirements.txt /requirements.txtRUN python3.11 -m pip install -r /requirements.txtWORKDIR /appCOPY backend .EXPOSE 8000COPY --from=frontend-build /usr/src/app/.output/public /app/staticfilesRUN python3.11 manage.py collectstatic --noinputCMD ["gunicorn", "--bind", "0.0.0.0:8000", "accounting.wsgi"]

That’s it.

When I push code from any of backend/ or frontend/, my CI/CD will build, bump version and deploy the latest docker image. I’ve been delaying an article on that kind of (basic) CI/CD (that meets most needs), but if enough interest don’t hesitate leaving a comment

Also, SUBSCRIBE! Thank you