32 lines
2.1 KiB
Markdown
32 lines
2.1 KiB
Markdown
# Overview
|
|
This is a practical example of a "basic" fullstack application. This application has been fully containerized to be run locally in development mode as well as for deployment to production. It is composed of the following services:
|
|
|
|
- frontend - Basic React app bootstrapped with `yarn create vite`
|
|
- backend - AdonisJS API Backend [https://adonisjs.com]()
|
|
- database - Postgres database
|
|
- reverse_proxy - Traefik ingress controller handling reverse proxy for the frontend and backend applications.
|
|
|
|
## Getting Started
|
|
Clone the repo and `cd` into the `compose` directory.
|
|
|
|
```shell
|
|
cp backend/.env.example backend/.env
|
|
docker compose up
|
|
```
|
|
|
|
The first time you run `docker compose up` it may take a few minutes as Docker will need to build images for the frontend and backend. Also there are some database migrations and seed data that need to happen. Those are handled by `backend/dev-entrypoint.sh`. This is handled for you automatically since it is baked into the image. You will most likely need to run `sudo docker compose up` or add yourself to the privileged `docker` group (`sudo usermod -aG docker YOUR_USER`) in order for `Traefik` to bind to port 80.
|
|
|
|
|
|
|
|
|
|
### Proxying and routes
|
|
You will notice that the backend is listening on `http://0.0.0.0:3333/` but the frontend is making requests to `/api/`. This is designed to mimic how you would deploy something like this in production where the backend would be behind a reverse proxy. Traefik has some really nice middleware that allows us to easily tell it to route requests destined for `/api` to `/`. The bit that handles that are these labels:
|
|
|
|
```compose
|
|
labels:
|
|
- "traefik.http.middlewares.strip-api-prefix.stripprefix.prefixes=/api"
|
|
- "traefik.http.routers.backend.rule=Host(`app.docker.localhost`) && PathPrefix(`/api`)"
|
|
- "traefik.http.routers.backend.middlewares=strip-api-prefix@docker"
|
|
```
|
|
|
|
We are defining a middleware named `strip-api-prefix` using the built in `strippreffix` Traefik middleware. We are then telling it to remove `/api` from any requests it handles. We then attach that to our backend router. |