Feature/docker image and deployment (#4)

* Added dockerfile for simple image of Dashboard

---------

Co-authored-by: Kamil Stasiak <[email protected]>

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+build
+.dockerignore
+Dockerfile
+.gitignore

.eslintrc

@@ -8,6 +8,7 @@
     "plugin:@typescript-eslint/recommended"
   ],
   "rules": {
+    "eol-last": ["error", "always"],
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "error",
     "@typescript-eslint/ban-ts-comment": "off",

.github/workflows/dockerize.yml

@@ -0,0 +1,51 @@
+#
+name: Create and publish a Docker image
+
+# Configures this workflow to run every time a change is pushed to the main with the tag of current version. Testing version
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - "v*.*.*"
+
+# Defines two custom environment variables for the workflow. These are used for the Container registry domain, and a name for the Docker image that this workflow builds.
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+# There is a single job in this workflow. It's configured to run on the latest available version of Ubuntu.
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    # Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job.
+    permissions:
+      contents: read
+      packages: write
+      #
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      # Uses the `docker/login-action` action to log in to the Container registry registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here.
+      - name: Log in to the GitHub Hub
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      # This step uses [docker/metadata-action](https://github.com/docker/metadata-action#about) to extract tags and labels that will be applied to the specified image. The `id` "meta" allows the output of this step to be referenced in a subsequent step. The `images` value provides the base name for the tags and labels.
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      # This step uses the `docker/build-push-action` action to build the image, based on your repository's `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages.
+      # It uses the `context` parameter to define the build's context as the set of files located in the specified path. For more information, see "[Usage](https://github.com/docker/build-push-action#usage)" in the README of the `docker/build-push-action` repository.
+      # It uses the `tags` and `labels` parameters to tag and label the image with the output from the "meta" step.
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -12,6 +12,8 @@ dist
 dist-ssr
 docs
 *.local
+.secrets
+.env
 
 # Editor directories and files
 .vscode/*

Dockerfile

@@ -0,0 +1,20 @@
+FROM node:19.5.0-alpine as builder
+
+WORKDIR /app
+
+COPY . ./
+
+RUN npm ci
+
+RUN npm run build
+
+# Bundle static assets with nginx
+FROM nginx:1.25-alpine as development
+# Copy built assets from `builder` image
+COPY --from=builder app/dist /usr/share/nginx/html
+# Add your nginx.conf
+COPY nginx.conf /nginx.conf
+# Expose port
+EXPOSE 3001
+# Start nginx
+CMD ["nginx", "-c", "/nginx.conf", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,56 @@
+# Determine the number of worker processes automatically
+worker_processes auto;
+
+# Events module configuration
+events {
+  # Maximum number of simultaneous connections that can be opened by a worker process
+  worker_connections 1024;
+}
+
+http{
+  # Enable high-performance file transfer
+  sendfile on;
+
+  # Route to log files. Log level is set to warn
+  access_log /var/log/nginx/access.log;
+  error_log /var/log/nginx/error.log warn;
+
+  server {
+    listen 3001;
+    server_name ${DOMAIN}; #Your domain
+
+    # Turn on gzip compression.
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss image/svg+xml;
+
+
+    location / {
+        # Enable Gzip static file serving.
+        gzip_static on;
+        # Enable runtime decompression before sending downstream.
+        gunzip on;
+
+        # Root directory
+        root /usr/share/nginx/html/;
+        index index.html;
+
+        # MIME types and caching
+        include /etc/nginx/mime.types;
+        expires 30d;
+
+        # add_header Cache-Control "public, no-transform";
+
+        add_header X-Frame-Options "SAMEORIGIN" always; # defence agains Clickjacking attacks
+        add_header X-XSS-Protection "1; mode=block" always; # defence agains Cross-Site Scripting (XSS) attacks
+        add_header X-Content-Type-Options "nosniff" always; # defence agains MIME type sniffing attacks
+
+        try_files $uri $uri/ /index.html;
+
+        # Hide the Nginx version number in the HTTP headers
+        server_tokens off;
+    }
+  }
+}