To facilitate deployment on Kubernetes, we've introduced a Docker image for the frontend. The Next.js project is built, and its static output is served using an Nginx reverse proxy. Since DevOps lacks a certified cold storage solution (e.g., S3) for serving static files, we've decided to containerize the frontend as a quick workaround for deploying staging environments. Please note this Docker Image is WIP. One of the main issue still not resolved concerns environment variables, which are only available when building the Docker Image. Thus, having different environment variables values between environment (dev, pre-prod, prod) will require us to build several frontend images, and tag them with the appropriate target environment. The `.env.production` values are not the final ones. For now, they were set to dev values. It allows us to test the frontend image with the development setup. Important: The frontend image is built-on top of an unprivileged Nginx image, which exposes by default port 8080 instead of 80 for classic Nginx image. You can find more info https://github.com/nginxinc/docker-nginx-unprivileged. The Docker Compose Nginx service is used to proxy OIDC requests to keycloak, in order to share the same host when initiating an OIDC flow, from outside and inside docker virtual network. All Nginx configurations related to serve frontend static build were moved to a newly created conf file under src/frontend/apps/desk. When starting the frontend image, we desire to start the minimum Nignx config required to serve frontend statics.
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.