This repository contains a basic CI/CD (Continuous Integration/Continuous Deployment) workflow for automatically building and deploying static frontend applications using GitHub Actions and a Compute Instance.
- Trigger: The workflow is initiated when a new semantic versioning (semver) tag is pushed to the repository.
- Release Creation: A new GitHub Release is automatically created based on the semver tag.
- Build and Deploy: The creation of the release triggers the build and deploy workflow.
- The build process is executed on a GitHub Runner.
- After successful build, the generated static files are sent to a Compute Instance via SSH.
- The example uses Nginx as the web server for hosting the static files.
- You can easily adapt this to use other web servers like Apache, Caddy, etc.
This workflow is suitable for frontend libraries/frameworks that require a build step to generate static files, such as:
- React
- Angular
- Vue.js
- And similar libraries/frameworks
- Next.js
- Nuxt.js
- SvelteKit
- Other SSR-focused frameworks
- Ensure you have a Compute Instance / VPS with SSH access. It can be an EC2 instance, DigitalOcean Droplet, or any other cloud provider.
- Generate an SSH key pair and add the public key to the Compute Instance's
~/.ssh/authorized_keys
file. - Setup your SSH_HOST, SSH_USER, and SSH_PRIVATE_KEY in the repository secrets. The PRIVATE_KEY is the private key you generated in the previous step.
- Focus on the
.github/workflows/
dir. You can customize the deployment process to suit your needs.
- Develop your frontend application as usual.
- When ready to deploy, create and push a new semver tag:
git tag v1.0.0 git push origin v1.0.0
- The workflow will automatically trigger, creating a new release and deploying your application.