In diesem Video zeige ich dir, wie du deine Web App (egal ob Angular, React oder VueJS) ganz einfach als Docker Image in deiner eigenen privaten Registry hochlädst.

Hierzu verwende ich Github als Plattform um sowohl die Build Pipeline mit Github Actions anzulegen, als auch die Github Container Registry (GHCR) als kostenlosen Speicher für unsere Docker Images.

00:00 Intro 00:23 Erstellen von Web App 01:40 Dockerfile 02:58 NGINX Config File 04:11 lokaler Test Dockerfile 04:44 Anlegen von Repository 07:00 Erstellen von Personal Access Token 09:43 Hinzufügen Build Pipeline 13:21 Test von GHCR Image 15:54 Auto Build von Änderungen

Dockerfile

FROM node:18-alpine AS builder WORKDIR /app COPY public/ ./public COPY src/ ./src COPY package*.json tsconfig.json tsconfig.node.json index.html ./ RUN npm install RUN npm run build

FROM nginx:latest WORKDIR /app COPY --from=builder /app/dist /usr/share/nginx/html COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

nginx-custom.conf File

server { listen 80; server_name localhost;

location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html = 404;
}

}

Github Action Workflow

name: Node.js CI

on: push: branches: [ "main" ] pull_request: branches: [ "main" ]

jobs: build:

runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3
- name: Deply to Github Container Registry
  run: |
    docker login --username YOUR_USERNAME --password ${{ secrets.GHCR_TOKEN }} ghcr.io
    docker build . --tag ghcr.io/YOUR_USERNAME/YOUR_PROJECT_NAME:latest
    docker push ghcr.io/YOUR_USERNAME/YOUR_PROJECT_NAME:latest