Dockerize frontend #4

.github/workflows/frontend.yml

@@ -0,0 +1,40 @@
+name: Knapset-UI CI
+
+on:
+  push:
+    branches: [ main ]
+    tags: ['v*']
+  release:
+    types: [ published ]
+
+env:
+  REGISTRY: ghcr.io/peres-richard
+  IMAGE_NAME: knapset-ui
+
+jobs:
+  build-and-publish-docker-image:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: ./frontend
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+

docker-compose.yml

@@ -20,4 +20,13 @@ services:
     read_only: false
     cap_drop:
       - 'ALL'
+  frontend:
+    build: ./frontend
+    image: ghcr.io/peres-richard/knapset-ui
+    container_name: knapset-ui
+    ports:
+      - "3000:3000"
+#    read_only: false
+    cap_drop:
+      - 'ALL'
 

frontend/Dockerfile

@@ -0,0 +1,18 @@
+# build stage
+FROM node:lts-alpine as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# production stage
+FROM nginx:stable-alpine as production-stage
+RUN  touch /var/run/nginx.pid && \
+     chown -R nginx:nginx /var/cache/nginx /var/run/nginx.pid
+USER nginx
+COPY --chown=nginx:nginx --from=build-stage /app/dist /usr/share/nginx/html
+COPY --chown=nginx:nginx nginx.conf /etc/nginx/conf.d
+EXPOSE 3000
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,16 @@
+server {
+  listen       3000;
+  server_name  localhost;
+
+  location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri $uri/ /index.html;
+  }
+
+  error_page   400 500 502 503 504  /50x.html;
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+}
+