From 2d0dcfb40255640526dc3357f67d8bc96bbea7f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ji=C5=99=C3=AD=20=C5=A0tefka?= Date: Mon, 29 Apr 2024 00:02:25 +0200 Subject: [PATCH] [Feature] Base setup for Frontend Docker image (#279) * feat: Add files needed to build a Docker image * docs: Add setup instructions for the frontend * feat: Add workflow to automatically build a docker image * fix(docker): Use the `--no-cache` switch to avoid the need to use `--update` and remove `/var/cache/apk/*` From https://www.codefactor.io/repository/github/ree6-applications/webinterface/pull/279 * fix(CI/CD): obsolete name for workflow job * feat(docker): Support environment variables was added, new image name There's no longer a need for the `start.sh` script Names for the docker images were changed to use the project's name --------- Co-authored-by: Presti --- .github/workflows/dockerPush.yml | 40 ++++++++++++++++++++++++++++-- Frontend/README.md | 34 +++++++++++++++++++++++++ Frontend/docker/Dockerfile | 28 +++++++++++++++++++++ Frontend/docker/docker-compose.yml | 38 ++++++++++++++++++++++++++++ 4 files changed, 138 insertions(+), 2 deletions(-) create mode 100644 Frontend/docker/Dockerfile create mode 100644 Frontend/docker/docker-compose.yml diff --git a/.github/workflows/dockerPush.yml b/.github/workflows/dockerPush.yml index 38b9be23..d6530c5f 100644 --- a/.github/workflows/dockerPush.yml +++ b/.github/workflows/dockerPush.yml @@ -15,8 +15,8 @@ on: workflow_dispatch: {} jobs: - push_to_registry: - name: Push Docker image to Docker Hub + backend: + name: Build and push Backend image runs-on: ubuntu-latest steps: - name: Check out the repo @@ -41,3 +41,39 @@ jobs: push: true tags: ${{ steps.meta.outputs.tags }} labels: ${{ steps.meta.outputs.labels }} + + frontend: + name: Build and push Frontend image + - name: Check out the repo + uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4 + + - name: Set up QEMU + uses: docker/setup-qemu-action@v2 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v1 + with: + driver-opts: network=host + platforms: linux/amd64,linux/arm64 + + - name: Log in to Docker Hub + uses: docker/login-action@v3.0.0 + with: + username: ${{ secrets.DOCKER_USERNAME }} + password: ${{ secrets.DOCKER_PASSWORD }} + + - name: Extract metadata (tags, labels) for Docker + id: meta + uses: docker/metadata-action@v5.5.0 + with: + images: ree6/frontend + + - name: Build and push Docker image + uses: docker/build-push-action@v5.1.0 + with: + platforms: linux/amd64,linux/arm64 + context: Frontend/docker + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + diff --git a/Frontend/README.md b/Frontend/README.md index 5c91169b..483e37f2 100644 --- a/Frontend/README.md +++ b/Frontend/README.md @@ -1,3 +1,35 @@ +# Ree6 Frontend + +## Netlify + +If you don't have your own hosting you'd like to use we recommend using [Netlify](https://www.netlify.com/). +It's free, fast and easy to setup. + +To use it [follow the instructions in our Wiki](https://wiki.ree6.de/webinterface/self-hosting). + +## Docker + +If you'd like to use your own hosting `Docker` + `Docker Compose` is the second best choice. +To familiarize yourself with `Docker Compose` you can look read through Docker's +[Try Docker Compose](https://docs.docker.com/compose/gettingstarted/) +manual. + +We provide a [basic `docker-compose.yml` file](https://github.com/Ree6-Applications/Webinterface/tree/master/Frontend/docker/docker-compose.yml) +for easier setup. + +Don't forget to change `BACKEND_URL` and `INVITE_URL` to your values. + +## Manual build + +This web app is built using [Swelte](https://svelte.dev/). + +Please keep in mind that Swelte can sometimes be hader to build so we recommend using one of the above options. + +Below is a README for Swelte applications: + +
+Swelte README + # create-svelte Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). @@ -36,3 +68,5 @@ npm run build You can preview the production build with `npm run preview`. > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. + +
diff --git a/Frontend/docker/Dockerfile b/Frontend/docker/Dockerfile new file mode 100644 index 00000000..07aca96a --- /dev/null +++ b/Frontend/docker/Dockerfile @@ -0,0 +1,28 @@ +# Created by "Jiří Štefka " +# This code is under the GPLv3 license. +FROM node:18-alpine + +LABEL developer="Jiří Štefka " +LABEL maintainer="Jiří Štefka " + +# Install git (needed to download the Frontend) +RUN apk add --no-cache git + +# Clone Ree6 frontend +RUN git clone https://github.com/Ree6-Applications/Webinterface /Webinterface + +# Setup the files and permissions +RUN chown -R node:node /Webinterface +USER node:node +WORKDIR /Webinterface/Frontend + +# Install the needed modules +RUN npm install vite && npm install && npm i -D @sveltejs/adapter-node --force + +# Patch the config to use the node adapter +RUN sed -i "s@import adapter from '\@sveltejs/adapter-auto';@import adapter from '\@sveltejs/adapter-node';@g" svelte.config.js + +RUN npm run build +RUN rm -rf src/ static/ + +CMD ["node", "build/index.js"] diff --git a/Frontend/docker/docker-compose.yml b/Frontend/docker/docker-compose.yml new file mode 100644 index 00000000..0b70f200 --- /dev/null +++ b/Frontend/docker/docker-compose.yml @@ -0,0 +1,38 @@ +version: "3" +# Created by "Jiří Štefka " +# This code is under the GPLv3 license. + +services: + ree6_frontend: + container_name: ree6_frontend + image: ree6/frontend + + environment: + - BACKEND_URL="https://api.ree6.de" # Change this to use your backend url + - INVITE_URL="https://invite.ree6.de" # Change this to your bot's invite link + + - HOST=0.0.0.0 # IP address to listen to + + - TZ=Europe/Prague # Set your timezone + - NODE_ENV=production # Internal server error messages will not send stacktrace to the browser in production + + # Uncomment the lines below to enable Traefik + # Don't forget to uncomment the bottom of the file as well + # Don't forget to comment out the `ports` section + # labels: + # - traefik.http.routers.ree6_frontend.rule=Host(`ree6.example.com`) # Set to your domain (+subdomain) + # - traefik.http.routers.ree6_frontend.entrypoints=websecure + # - traefik.http.routers.ree6_frontend.tls.certresolver=lets-encrypt + # - traefik.http.routers.ree6_frontend.service=ree6_frontend + # - traefik.http.services.ree6_frontend.loadBalancer.server.port=3000 # Must be same as `PORT` variable + # networks: + # - traefik + ports: # Comment this out if using traefik + - 3000:3000 # Comment this out if using traefik + + restart: unless-stopped + +# Uncomment this for Traefik +# networks: +# traefik: +# external: true