(frontend) introduce frontend Docker image

Inspired by the Docker images from numerique-gouv/people and numerique-gouv/impress
(see commit 1a3b396 in the "people" repository).

Due to the lack of a certified cold storage solution (e.g., S3) for serving static files,
we've containerized the frontend as a temporary deployment solution.

Vite.js static output is served using an Nginx reverse proxy.

I am not quite sure of this commit, please @manuhabitela could you review how I exposed
the static build from vite in my Nginx server? and do the appriopriate fix if necessary.
This commit is contained in:
antoine lebaud
2024-07-01 20:30:00 +02:00
parent 847ad709c5
commit f051938ace
2 changed files with 65 additions and 0 deletions

50
src/frontend/Dockerfile Normal file
View File

@@ -0,0 +1,50 @@
FROM node:20-alpine as frontend-deps
WORKDIR /home/frontend/
COPY ./src/frontend/package.json ./package.json
COPY ./src/frontend/package-lock.json ./package-lock.json
RUN npm ci
COPY .dockerignore ./.dockerignore
COPY ./src/frontend/ .
### ---- Front-end builder image ----
FROM frontend-deps as meet
WORKDIR /home/frontend
FROM frontend-deps as meet-dev
WORKDIR /home/frontend
EXPOSE 3000
CMD [ "npm", "run", "dev"]
# Tilt will rebuild Meet target so, we dissociate meet and meet-builder
# to avoid rebuilding the app at every changes.
FROM meet as meet-builder
WORKDIR /home/frontend
RUN npm run build
# ---- Front-end image ----
FROM nginxinc/nginx-unprivileged:1.25 as frontend-production
# Un-privileged user running the application
ARG DOCKER_USER
USER ${DOCKER_USER}
COPY --from=meet-builder \
/home/frontend/dist \
/usr/share/nginx/html
COPY ./src/frontend/default.conf /etc/nginx/conf.d
COPY ./docker/files/usr/local/bin/entrypoint /usr/local/bin/entrypoint
ENTRYPOINT [ "/usr/local/bin/entrypoint" ]
CMD ["nginx", "-g", "daemon off;"]

15
src/frontend/default.conf Normal file
View File

@@ -0,0 +1,15 @@
server {
listen 8080;
server_name localhost;
root /usr/share/nginx/html;
location / {
try_files $uri index.html $uri/ =404;
}
error_page 404 /404.html;
location = /404.html {
internal;
}
}