Configure automated Docker builds (#11)

* Configure automated Docker builds (#10)

* Fix Nginx template loading (#10)

.github/workflows/docker-reusable.yml

@@ -0,0 +1,177 @@
+name: Docker - Reusable
+
+
+on:
+  workflow_call:
+    inputs:
+      docker_file:
+        default: docker/Dockerfile
+        description: Dockerfile
+        required: false
+        type: string
+      docker_repo:
+        default: codexstorage/codex-frontend
+        description: DockerHub repository
+        required: false
+        type: string
+      tag_latest:
+        default: true
+        description: Set latest tag for Docker images
+        required: false
+        type: boolean
+      tag_sha:
+        default: true
+        description: Set Git short commit as Docker tag
+        required: false
+        type: boolean
+      tag_suffix:
+        default: ''
+        description: Suffix for Docker images tag
+        required: false
+        type: string
+
+
+env:
+  DOCKER_FILE: ${{ inputs.docker_file }}
+  DOCKER_REPO: ${{ inputs.docker_repo }}
+  TAG_LATEST: ${{ inputs.tag_latest }}
+  TAG_SHA: ${{ inputs.tag_sha }}
+  TAG_SUFFIX: ${{ inputs.tag_suffix }}
+
+
+jobs:
+  # Build platform specific image
+  build:
+    strategy:
+      fail-fast: true
+      matrix:
+        target:
+          - os: linux
+            arch: amd64
+          - os: linux
+            arch: arm64
+        include:
+          - target:
+              os: linux
+              arch: amd64
+            builder: ubuntu-22.04
+          - target:
+              os: linux
+              arch: arm64
+            builder: buildjet-4vcpu-ubuntu-2204-arm
+
+    name: Build ${{ matrix.target.os }}/${{ matrix.target.arch }}
+    runs-on: ${{ matrix.builder }}
+    env:
+      PLATFORM: ${{ format('{0}/{1}', 'linux', matrix.target.arch) }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Docker - Meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.DOCKER_REPO }}
+
+      - name: Docker - Set up Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Docker - Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Docker - Build and Push by digest
+        id: build
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ${{ env.DOCKER_FILE }}
+          platforms: ${{ env.PLATFORM }}
+          push: true
+          labels: ${{ steps.meta.outputs.labels }}
+          outputs: type=image,name=${{ env.DOCKER_REPO }},push-by-digest=true,name-canonical=true,push=true
+
+      - name: Docker - Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Docker - Upload digest
+        uses: actions/upload-artifact@v3
+        with:
+          name: digests
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+
+  # Publish multi-platform image
+  publish:
+    name: Publish multi-platform image
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Docker - Variables
+        run: |
+          # Adjust custom suffix when set and
+          if [[ -n "${{ env.TAG_SUFFIX }}" ]]; then
+            echo "TAG_SUFFIX=-${{ env.TAG_SUFFIX }}" >>$GITHUB_ENV
+          fi
+          # Disable SHA tags on tagged release
+          if [[ ${{ startsWith(github.ref, 'refs/tags/') }} == "true" ]]; then
+            echo "TAG_SHA=false" >>$GITHUB_ENV
+          fi
+          # Handle latest and latest-custom using raw
+          if [[ ${{ env.TAG_SHA }} == "false" ]]; then
+            echo "TAG_LATEST=false" >>$GITHUB_ENV
+            echo "TAG_RAW=true" >>$GITHUB_ENV
+            if [[ -z "${{ env.TAG_SUFFIX }}" ]]; then
+              echo "TAG_RAW_VALUE=latest" >>$GITHUB_ENV
+            else
+              echo "TAG_RAW_VALUE=latest-{{ env.TAG_SUFFIX }}" >>$GITHUB_ENV
+            fi
+          else
+            echo "TAG_RAW=false" >>$GITHUB_ENV
+          fi
+
+      - name: Docker - Download digests
+        uses: actions/download-artifact@v3
+        with:
+          name: digests
+          path: /tmp/digests
+
+      - name: Docker - Set up Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Docker - Meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.DOCKER_REPO }}
+          flavor: |
+            latest=${{ env.TAG_LATEST }}
+            suffix=${{ env.TAG_SUFFIX }},onlatest=true
+          tags: |
+            type=semver,pattern={{version}}
+            type=raw,enable=${{ env.TAG_RAW }},value=latest
+            type=sha,enable=${{ env.TAG_SHA }}
+
+      - name: Docker - Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Docker - Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.DOCKER_REPO }}@sha256:%s ' *)
+
+      - name: Docker - Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.DOCKER_REPO }}:${{ steps.meta.outputs.version }}

.github/workflows/docker.yml

@@ -0,0 +1,26 @@
+name: Docker
+
+
+on:
+  push:
+    branches:
+      - master
+    tags:
+      - 'v*.*.*'
+    paths-ignore:
+      - '**/*.md'
+      - '**/.gitignore'
+      - 'docker/**'
+      - '!docker/Dockerfile'
+      - '!docker/nginx.template'
+      - '.github/**'
+      - '!.github/workflows/docker.yml'
+      - '!.github/workflows/docker-reusable.yml'
+  workflow_dispatch:
+
+
+jobs:
+  build-and-push:
+    name: Build and Push
+    uses: ./.github/workflows/docker-reusable.yml
+    secrets: inherit

Dockerfile.client

@@ -1,16 +0,0 @@
-# Build step #1: build the React front end
-FROM node:18 as build-step
-WORKDIR /frontend
-ENV PATH /frontend/node_modules/.bin:$PATH
-COPY frontend/package.json frontend/yarn.lock frontend/tsconfig.json ./
-COPY frontend/src ./src
-COPY frontend/public ./public
-RUN yarn install
-RUN yarn build --production
-
-# Build step #2: build an nginx container
-FROM nginx:stable-alpine
-COPY --from=build-step /frontend/build /usr/share/nginx/html
-COPY deployment/nginx.template /etc/nginx/nginx.template
-
-CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -2,6 +2,7 @@
 
 A frontend for codex made with Flutter.
 
+
 ## Features
 
 - Upload multiple files at once
@@ -12,28 +13,36 @@ A frontend for codex made with Flutter.
 - Download from codex nodes
 - Now supports marketplace endpoints!
 
+
 ## Planned Features
 
 - Show status of connection to codex peers
 - Settings for the connection
 
-## How To Run It
 
-```console
+## How to run it
-git clone https://github.com/Kayvon-Martinez/codex-frontend
+
+ 1. Clone repository
+    ```shell
+    git clone https://github.com/codex-storage/codex-frontend
     cd codex-frontend
     ```
 
-Grab your codex api link and put it in the dockercompose file in the root of the directory in the value of codex_url
+ 2. Grab your codex api link and define a variable for docker compose file
+    ```shell
+    export codex_url="http://localhost:8080"
+    ```
 
-```console
+ 3. Run codex frontend
+    ```shell
     docker compose up
     ```
 
-Go to [localhost:3000](http://localhost:3000)
+ 4. Go to [localhost:3000](http://localhost:3000)
+
 
 ## Screenshots
 
-![Data page: Upload](https://github.com/Kayvon-Martinez/codex-frontend/blob/master/screenshots/upload-page.png)
+![Data page: Upload](screenshots/upload-page.png)
-![Data page: Upload (with uploads)](https://github.com/Kayvon-Martinez/codex-frontend/blob/master/screenshots/upload-page-uploads.png)
+![Data page: Upload (with uploads)](screenshots/upload-page-uploads.png)
-![Data page: Download](https://github.com/Kayvon-Martinez/codex-frontend/blob/master/screenshots/download-page.png)
+![Data page: Download](screenshots/download-page.png)

build-docker.bat

@@ -1,2 +0,0 @@
-docker build -f Dockerfile.client -t thatbenbierens/codex-frontend:initial .
-docker push thatbenbierens/codex-frontend:initial

deployment/nginx.template

@@ -1,21 +0,0 @@
-server 
-{
-    listen       80;
-    server_name  localhost;
-
-    root   /usr/share/nginx/html;
-    index index.html;
-    error_page   500 502 503 504  /50x.html;
-
-    location /api {
-        proxy_pass $codex_url;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-    }
-    location / {
-        try_files $uri /index.html;
-        add_header Cache-Control "no-cache";
-    }
-}

docker-compose.yml

@@ -3,11 +3,9 @@ services:
   client:
     build:
       context: .
-      dockerfile: Dockerfile.client
+      dockerfile: docker/Dockerfile
     image: codex-frontend-client
     ports:
       - "3000:80"
     environment:
-      - codex_url=http://kubernetes.docker.internal:31264
+      - codex_url=${codex_url:-http://kubernetes.docker.internal:31264}
-    volumes:
-        - ./deployment/nginx.template:/etc/nginx/templates/10-variables.conf.template:ro

docker/Dockerfile

@@ -0,0 +1,32 @@
+# Variables
+ARG BUILDER=node:18
+ARG IMAGE=nginx:stable-alpine
+ARG APP_USER=root
+ARG APP_SRC=frontend
+ARG APP_HOME=/frontend
+ARG NGINX_TEMPLATE=docker/nginx.template
+
+# Build
+FROM ${BUILDER} AS builder
+
+ARG APP_USER
+ARG APP_SRC
+ARG APP_HOME
+
+WORKDIR ${APP_HOME}
+COPY --chown=${APP_USER}:${APP_USER} ${APP_SRC} .
+
+RUN yarn install
+RUN yarn build --production
+
+
+# Create
+FROM ${IMAGE}
+
+ARG APP_USER
+ARG APP_HOME
+ARG NGINX_TEMPLATE
+
+RUN mkdir /etc/nginx/templates
+COPY ${NGINX_TEMPLATE} /etc/nginx/templates/default.conf.template
+COPY --chown=${APP_USER}:${APP_USER} --from=builder ${APP_HOME}/build /usr/share/nginx/html

docker/build-docker.bat

@@ -0,0 +1,9 @@
+:: Variables
+set REPOSITORY=thatbenbierens/codex-frontend
+set TAG=initial
+set APP_SRC=../frontend
+set NGINX_TEMPLATE=docker/nginx.template
+
+:: Build
+docker build --build-arg APP_SRC=%APP_SRC% --build-arg NGINX_TEMPLATE=%NGINX_TEMPLATE% -t %REPOSITORY%:%TAG% .
+docker push %REPOSITORY%:%TAG%

docker/nginx.template

@@ -0,0 +1,30 @@
+log_format custom
+  '$remote_addr - $request_time - [$time_local] - $msec - '
+  '$request_id - $connection-$connection_requests - '
+  '$scheme - $host - $server_port - '
+  '$request_method - $request_uri - $server_protocol - $status - $request_completion - '
+  '$bytes_sent - $request_length - "$http_referer" - "$http_user_agent" - '
+  '$proxy_host - "$upstream_addr" - "$upstream_status" - "$upstream_connect_time" - "$upstream_response_time" ';
+
+server {
+    listen       80;
+    server_name  localhost;
+
+    root   /usr/share/nginx/html;
+    index       index.html;
+    error_page  500 502 503 504  /50x.html;
+    access_log  /var/log/nginx/access.log  custom;
+
+    location / {
+        try_files   $uri  /index.html;
+        add_header  Cache-Control  "no-cache";
+    }
+
+    location /api {
+        proxy_pass                           $codex_url;
+        proxy_set_header  Host               $host;
+        proxy_set_header  X-Real-IP          $remote_addr;
+        proxy_set_header  X-Forwarded-For    $proxy_add_x_forwarded_for;
+        proxy_set_header  X-Forwarded-Proto  $scheme;
+    }
+}

frontend/src/pages/data/tabs/upload/UploadTab.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import UploadedItemModel, {
   UploadedItemStatus,
 } from "../../../../data/models/UploadedItemModel";
-import UploadedItemComponent from "../../../../components/UploadedItem/UploadedItemComponent";
+import UploadedItemComponent from "../../../../components/uploadedItem/UploadedItemComponent";
 import axios from "axios";
 
 import { useDexyStore } from "../../../../store";