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.
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 |
I hope you enjoyed this little idea of my maintenance container π
Top comments (0)