Build Pipeline & Deployment für deine Web App
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