Hacktoberfest2022 - React18 Website and Nginx Docker image to show your visitors maintenance informations

Matthias Meyer — Sat, 08 Oct 2022 13:45:24 +0000

It's Hacktober 🎃 and the Hacktoberfest 🧑🏽‍💻 has started. I wanted do contribute with a small React maintenance website you can show to your visitors when you are doing some maintenance work to your services.

For that i created a small template repository which you can easily clone and make it your own personal maintenance website.

thematchless / website-maintenance-container

A small custom website maintenance container.

website-maintenance-container

The idea of this website-maintenance-container is to have a fairly simple website that will display a friendly maintenance message whenever you update your services.

To customize the displayed texts, you only have to change the text strings inside the info.json file.

{
  "headline": "Website maintenance",
  "description": "We are back in a couple of minutes.",
  "favicon_url": "https://oflisback.github.io/react-favicon/img/github.ico"
}

commands

command	description
`npm run start`	to start the local dev environment
`npm run build`	to build the production version

dockerfile included

To build this Website use the included Dockerfile:

docker build -t website-maintenance-container:latest .

To test this Website use the following command:

docker run -p 8000:80 website-maintenance-container:latest

Now open your browser and navigate to 127.0.0.1:8000 to see the website.

View on GitHub

If you only want to make basic adjustments, it is enough for you to adjust the texts strings inside the info.json file.

You can change the headline, the description and the favicon.

{
  "headline": "Website maintenance",
  "description": "We are back in a couple of minutes.",
  "favicon_url": "https://oflisback.github.io/react-favicon/img/github.ico"
}

If you prefer to make some more adjustments you feel free to do it. It's a pretty basic React v18 Application with Prettier and ESLint. You can customize everything to your needs.

If you are done with your changes you can use the included Dockerfile to build a production ready image.

docker build -t website-maintenance-container:latest .

To test your freshly created docker image use the following command:

docker run -p 8000:80 website-maintenance-container:latest

Now open your browser and navigate to 127.0.0.1:8000 to see the website.

CI (Continues Integration)

This repository comes with a preconfigured GitHub action that checks your commit history for commits that conform to the Conventional Commits specification. When the workflow detects a new commit, it automatically determines the next version number and creates a freshly built Docker image of your maintenance application. This image is then transferred to the GitHub Container Registry and the Git version tags are automatically assigned based on the newly determined version number. 🥳

If you want to use that GitHub action and the automatic push to the GitHub Container Repository you have to create a token for your action for your account. Name it PAT_TOKEN or change it to your needs inside the build.yml.

CD (Continues Deployment)

Now you have a nice little project with a working CI pipeline. You can easily extend the workflow with a CD statement inside the build.yml. For this I had built a small independent GitHub action last year. 🎉

thematchless / bump-image-version-action

GitHub action to bump up a docker image version deployed in a docker-compose file on a remote server via ssh

Bump docker image version on a remote host

This repository contains an GitHub action to bump up a docker image version specified in your docker-compose stack.

Requirements for this GitHub Action to work

your remote server must be accessible via ssh and is reachable
you have a ssh private and public key to authenticate via ssh
you have saved your private and public key to the GitHub project secrets

Configuration options for the action

required	key	example	default	description
✅	remote_docker_host	thematchless@fancyServer.de	username@host
✅	ssh_private_key	-----BEGIN OPENSSH PRIVATE KEY---- UgAAAAtzc2gtZWQyNTUxOQAAACALBUg UgAAAAtzc2gtZWQyNTUxOQAAACALBUg UgAAAAtzc2gtZWQyNTUxOQAAACALBUg -----END OPENSSH PRIVATE KEY-----	private key in PEM format
✅	ssh_public_key	ssh-ed25519 ABCDABCDu027374972309	public key of the PEM
✅	service_name	super-fancy-react-app	name of the service inside of the compose file
✅	deploy_path	/home/thematchless/stack-1	path which contains your compose file on the remote host
✅	args	up -d	arguments how to start your service
❌	stack_file_name	docker-compose.yaml	docker-compose.yml	name

…

View on GitHub

I hope you enjoyed this little idea of my maintenance container 😎

GitHub Actions Hackathon 2021 - Bump docker image version on a remote host

Matthias Meyer — Thu, 02 Dec 2021 22:33:29 +0000

Submission Category: DIY Deployments

We live in a time in which we should pay particular attention to how we deal with our ⚡ energy balance. The first step for this is to know your current personal consumption of electricity and gas.

To address this problem I have a small personal React project in which I log my current consumption values 📈 for electricity and gas.

My gas consumption over the last years

My electricity consumption over the last years

At the beginning of the month I take the readings from the electricity and gas meter and add them to a text document in my repository. After that, I want the GitHub actions to take over and do the heavy lifting for me:

Checkout the code and build the project
Build a new docker image with some nice tags
Publish the new image in the awesome GitHub Container Registry
Connect to my remote server and deploy the new image

I was able to successfully implement this with the following workflow:

My Workflow

name: Dockerize React Application
on:
  push:
    branches:
      - 'master'
jobs:
  build-container:
    name: Build Docker image and deploy to production
    runs-on: ubuntu-latest
    steps:
      -
        name: Checkout code
        uses: actions/checkout@v2
      -
        name: Login to GitHub Container Registry
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}
      -
        name: Publish to GitHub Packages
        uses: docker/build-push-action@v2.3.0
        with:
          push: true
          tags: ghcr.io/${{ github.repository }}:latest, ghcr.io/${{ github.repository }}:${{ github.run_number }}
      -
        name: Deploy on Remote Server
        uses: thematchless/bump-image-version-action@v2
        with:
          remote_docker_host: username@thematchless.de
          ssh_private_key: ${{ secrets.DOCKER_SSH_PRIVATE_KEY }}
          ssh_public_key: ${{ secrets.DOCKER_SSH_PUBLIC_KEY }}
          service_name: electricity-gas-consumption
          deploy_path: /thematchless/electricity-gas-consumption
          args: up -d
          pull_images_first: true

The last step in this workflow is my own created GitHub Action. This GitHub action bumps up a docker image version deployed in a docker-compose stack on a remote server via the SSH protocol. I utilized the GitHub project secrets to add my SSH certificates for the connection.

If you need something similar and simple you can use this action too. Just fork my action or use it as it is 🎉

thematchless / bump-image-version-action

GitHub action to bump up a docker image version deployed in a docker-compose file on a remote server via ssh

Bump docker image version on a remote host

This repository contains an GitHub action to bump up a docker image version specified in your docker-compose stack.

Requirements for this GitHub Action to work

your remote server must be accessible via ssh and is reachable
you have a ssh private and public key to authenticate via ssh
you have saved your private and public key to the GitHub project secrets

Configuration options for the action

required	key	example	default	description
✅	remote_docker_host	thematchless@fancyServer.de	username@host
✅	ssh_private_key	-----BEGIN OPENSSH PRIVATE KEY---- UgAAAAtzc2gtZWQyNTUxOQAAACALBUg UgAAAAtzc2gtZWQyNTUxOQAAACALBUg UgAAAAtzc2gtZWQyNTUxOQAAACALBUg -----END OPENSSH PRIVATE KEY-----	private key in PEM format
✅	ssh_public_key	ssh-ed25519 ABCDABCDu027374972309	public key of the PEM
✅	service_name	super-fancy-react-app	name of the service inside of the compose file
✅	deploy_path	/home/thematchless/stack-1	path which contains your compose file on the remote host
✅	args	up -d	arguments how to start your service
❌	stack_file_name	docker-compose.yaml	docker-compose.yml	name

…

View on GitHub

I've added a table to the README.md with all the flags you can configure in this GitHub action. If anything is unclear, please let me know and I'll try to help.

Have mercy 🙏 on me, this is my first post 😎

DEV Community: Matthias Meyer

Hacktoberfest2022 - React18 Website and Nginx Docker image to show your visitors maintenance informations

thematchless / website-maintenance-container

A small custom website maintenance container.

website-maintenance-container

commands

dockerfile included

CI (Continues Integration)

CD (Continues Deployment)

thematchless / bump-image-version-action

GitHub action to bump up a docker image version deployed in a docker-compose file on a remote server via ssh

Bump docker image version on a remote host

Requirements for this GitHub Action to work

Configuration options for the action

GitHub Actions Hackathon 2021 - Bump docker image version on a remote host

Submission Category: DIY Deployments

My gas consumption over the last years

My electricity consumption over the last years

My Workflow

thematchless / bump-image-version-action

GitHub action to bump up a docker image version deployed in a docker-compose file on a remote server via ssh

Bump docker image version on a remote host

Requirements for this GitHub Action to work

Configuration options for the action