Add CD

.github/workflows/main.yaml

@@ -0,0 +1,51 @@
+name: Deploy everything
+on:
+  push:
+    branches:
+      - main
+env:
+  CONTAINER_REGISTRY: schmelczera
+  DOMAIN: '161.35.71.163'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout current branch with lfs
+        uses: actions/checkout@main
+        with:
+          lfs: true
+
+      - name: Setup auth tokens
+        run: |
+          docker login -u ${{ secrets.DOCKER_USER }} -p ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push
+        run: |
+          docker build . -t $CONTAINER_REGISTRY/timeline
+          docker push $CONTAINER_REGISTRY/timeline
+
+  push:
+    runs-on: ubuntu-latest
+    needs:
+      - build-frontend
+      - build-ingress
+    steps:
+      - name: Checkout current branch with lfs
+        uses: actions/checkout@main
+        with:
+          lfs: true
+
+      - name: Setup auth tokens
+        run: |
+          # SSH key
+          mkdir ~/.ssh
+          echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_ed25519
+          chmod 400 ~/.ssh/id_ed25519
+          ssh -o StrictHostKeyChecking=no root@$DOMAIN uptime
+
+      - name: Stack up
+        run: |
+          DOCKER_HOST=ssh://root@$DOMAIN docker login -u ${{ secrets.DOCKER_TOKEN }} -p ${{ secrets.DOCKER_TOKEN }} $CONTAINER_REGISTRY
+          DOCKER_HOST=ssh://root@$DOMAIN docker stack up declared -c docker-compose.yml --with-registry-auth
+        working-directory: infrastructure

Dockerfile

@@ -1,9 +1,23 @@
-FROM node:latest as build
+FROM schmelczera/error-pages as build-error-pages
+RUN python build.py 403 404 50x
 
+FROM node:latest as build-webpage
 WORKDIR /home/node
-COPY . .
+
+COPY src src
+COPY package.json custom.d.ts tsconfig.json webpack.config.js ./
+
 RUN npm install
 RUN npm run build
 
 FROM nginx:alpine
-COPY --from=build /home/node/dist/ /usr/share/nginx/html
+
+WORKDIR /usr/share/nginx/html
+
+RUN rm -rf *
+COPY --from=build-webpage /home/node/dist .
+COPY --from=build-error-pages /home/python/built errors
+RUN find . -type f | xargs gzip -k9     &&\
+    chmod -R 555 .
+
+COPY nginx-config /etc/nginx/

docker-compose.yml

@@ -0,0 +1,34 @@
+version: "3.8"
+
+services:
+  timeline:
+    init: true
+    image: schmelczera/timeline
+    depends_on:
+      - frontend
+    networks:
+      - network
+    deploy:
+      replicas: 2
+      resources:
+        limits:
+          cpus: "0.5"
+          memory: 32M
+        reservations:
+          cpus: "0.2"
+          memory: 32M
+      placement:
+        max_replicas_per_node: 1
+      update_config:
+        parallelism: 1
+        failure_action: rollback
+        delay: 10s
+        monitor: 10s
+      restart_policy:
+        condition: on-failure
+        window: 30s
+    ports:
+      - "80"
+
+networks:
+  network:

nginx-config/nginx.conf

@@ -0,0 +1,54 @@
+user  nginx;
+worker_processes  auto;
+
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    sendfile_max_chunk 1m;
+    tcp_nopush on;
+
+    keepalive_timeout  65;
+
+    gzip on;
+    gzip_static on;
+    gzip_vary on;
+    gzip_min_length 10240;
+    gzip_proxied any;
+    gzip_disable "MSIE [1-6]\.(?!.*SV1)";
+    
+    server {
+        listen 80;
+        server_name localhost;
+
+        root /usr/share/nginx/html;
+        index index.html;
+
+        location ~* \.(jpg|jpeg|png|ico)$ {
+            expires 30d;
+        }
+
+        error_page 403 /403.html;
+        error_page 404 /404.html;
+        error_page 500 501 502 503 504 /50x.html;
+
+        location ~ ^/(403|404|50x).html$ {
+            root /usr/share/nginx/html/errors;
+            internal;
+        }
+    }
+}

package.json

@@ -5,8 +5,7 @@
   "private": true,
   "scripts": {
     "start": "webpack-dev-server --mode development",
-    "build": "webpack",
-    "build-docker": "webpack && docker build -t portfolio . && docker save -o target/portfolio portfolio"
+    "build": "webpack && find dist -type f -regex \".*\\(js\\|css\\|txt\\)\" | xargs rm"
   },
   "repository": {
     "type": "git",
@@ -33,9 +32,9 @@
   ],
   "homepage": "https://github.com/schmelczerandras/timeline#readme",
   "devDependencies": {
-    "autoprefixer": "^9.7.6",
+    "autoprefixer": "^9.8.6",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.5.2",
+    "css-loader": "^3.6.0",
     "cssnano": "latest",
     "file-loader": "^5.1.0",
     "html-webpack-inline-source-plugin": "0.0.10",
@@ -47,16 +46,16 @@
     "prettier": "^1.19.1",
     "resolve-url-loader": "^3.1.1",
     "responsive-loader": "^1.2.0",
-    "sass": "^1.26.3",
+    "sass": "^1.26.10",
     "sass-loader": "^8.0.2",
     "sharp": "^0.23.4",
-    "style-loader": "^1.1.4",
+    "style-loader": "^1.2.1",
     "svg-url-loader": "^3.0.3",
-    "terser-webpack-plugin": "^2.3.5",
+    "terser-webpack-plugin": "^2.3.7",
     "ts-loader": "^6.2.2",
-    "typescript": "^3.8.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "typescript": "^3.9.7",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   }
 }

src/page/footer/footer.html.ts

@@ -16,7 +16,7 @@ export const generate = ({
         <ul>
             ${curiumVitaes
               .map(
-                cv =>
+                (cv, i) =>
                   `<li>
                       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512.002 512.002" style="enable-background:new 0 0 512.002 512.002;" xml:space="preserve" width="512px" height="512px" class="">
                           <path d="M394.667,42.667h-128c-11.782,0-21.333,9.551-21.333,21.333v128c0,11.782,9.551,21.333,21.333,21.333h128     c11.782,0,21.333-9.551,21.333-21.333V64C416,52.218,406.449,42.667,394.667,42.667z M290.347,192     c7.707-22.268,32.007-34.072,54.275-26.365c12.366,4.28,22.085,13.999,26.365,26.365H290.347z M309.333,117.333     c0-11.782,9.551-21.333,21.333-21.333C342.449,96,352,105.551,352,117.333c0,11.782-9.551,21.333-21.333,21.333     C318.885,138.667,309.333,129.116,309.333,117.333z M394.667,192h-1.387c-4.028-18.843-16.331-34.868-33.493-43.627     c17.25-16.053,18.221-43.051,2.167-60.301c-16.053-17.25-43.051-18.221-60.301-2.167c-17.25,16.053-18.221,43.051-2.167,60.301     c0.696,0.748,1.419,1.471,2.167,2.167c-17.203,8.734-29.548,24.763-33.6,43.627h-1.387V64h128V192z" class="active-path" fill="#31343F"/>
@@ -27,7 +27,7 @@ export const generate = ({
                           <rect x="149.333" y="416" width="170.667" height="21.333" class="active-path" fill="#31343F"/>
                           <rect x="341.334" y="416" width="21.333" height="21.333" class="active-path" fill="#31343F"/>
                       </svg>
-                    <a id="cv" href="${cv.url}" target="_blank">${cv.name}</a>
+                    <a id="cv-${i}" href="${cv.url}" target="_blank">${cv.name}</a>
                  </li>`
               )
               .join('\n')}

webpack.config.js

@@ -9,6 +9,7 @@ const Sharp = require('responsive-loader/sharp');
 const Sass = require('sass');
 
 const isProduction = process.env.NODE_ENV === 'production';
+const isDevelopment = !isProduction;
 
 module.exports = {
   watchOptions: {