Example application for running a web application with Vue.js as a frontend and FastAPI as a backend using nginx in a single docker image and container.

To allow for a single image, nginx unit is used to pass requests directly to the asgi application.

The backend folder contains a Python Poetry project using the FastAPI framework. Use the following commands to start developing.

cd backend
poetry install
poetry run uvicorn app:app --debug --reload

The frontend folder contains a Pnpm project using the Vue.js framework. Use the following commands to start developing.

cd frontend
pnpm install
pnpm dev

After both the frontend and backend are up, you can visit http://localhost:8080/ to view the app.

To configure nginx-unit, modify the docker/config.json file using the provided guide.

The docker build takes advantage of multi-stage builds, so docker 17.05+ is needed.

To build, simply run

docker build . -t nginx-fastapi-vue-docker

Then to run, use

docker run --rm -p 80:80 nginx-fastapi-vue-docker

You now be able to open http://localhost/ and see your application.