In the fast-paced world of web development, efficiency is key. Every developer loves the auto-deployment process that takes their code from GitHub to production with minimal effort.
In this blog post, I am going to make developers' lives easy. This will be your easy explanation blog on how you can use the power of GitHub Actions CI/CD to deploy your Next.js app to an AWS EC2 instance.
What Concepts should we have?
Continuous Integration (CI)
Continuous Integration (CI) is a software development method in which team members regularly integrate code changes into a common repository, generally many times per day. Each integration is validated using automated builds and tests to find integration faults as soon as possible.
Let's get it more clear with a real-life example😎
Assume you're building a house with a group of builders. Each builder is responsible for a certain aspect, such as plumbing, electrical, or carpentry. Instead of waiting until the end to bring everything together, you integrate your work regularly.
Every time a builder completes a part, they transport it to a central location where all of the pieces are assembled. This is similar to submitting code changes to a shared repository in CI.
Then, a team of inspectors inspects each integrated component to verify it fits together and functions properly. If they discover any problems, they promptly contact the builders so that they may be resolved. This is similar to automated tests used in continuous integration💁.
By integrating often and spotting errors early on, the team guarantees that the house is completed easily and without major complications. Similarly, continuous integration (CI) enables software teams to consistently and effectively provide high-quality code👌.
Continuous Deployment (CD)
After passing these tests, the code is immediately deployed to a staging environment for additional testing by quality assurance (QA) teams. If everything looks fine, the code is automatically pushed to the production environment, allowing end users to get new features or problem fixes without requiring any manual interaction😍.
GitHub Actions
What are the Steps?
Step 1 - Create a GitHub Repository
Step 2 - Get your SSH key at your Disposal
SSH -i yourkey.pem ubuntu@11.22.11.22
Step 3 - Get all your Essential Keys
EC2_PRIVATE_KEY: Enter the value of your private key. To authenticate SSH connections to your AWS EC2 instance, you need to use this key.
EC2_HOST: Enter the IP address or hostname of your AWS EC2 instance here.
EC2_USERNAME: Enter the username that you use to connect to your AWS EC2 instance via SSH.
You're able to safely keep private data needed to access your AWS EC2 instance inside of your GitHub repository by adding these secrets. Your GitHub Actions workflows can subsequently employ these secrets to automate processes like deploying your application to your EC2 instance.
Step 4 - Create a YAML File
- Go to your project repository.
- Create a folder named "Actions" if it doesn't already exist.
- Inside the "Actions" folder, create a new folder named "Workflows."
- Within the "Workflows" folder, create a new workflow file named "deploy.yml."
on:
push:
branches: [main]
name: 🚀 Deploy website on push
jobs:
web-deploy:
name: 🎉 Deploy
runs-on: ubuntu-latest
steps:
- name: 🚚 Get latest code
uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2-beta
with:
node-version: '18'
check-latest: true
- run: rm -rf node_modules/
- run: npm install
- run: npm run build
- run: mkdir build
- run: mv .next build/
- run: mv .env build/
# - run: mv middleware.js build/
- run: mv package.json build/
- run: mv public build/
- run: mv next.config.js build/
- run: mv package-lock.json build/
- run: cd build && ls -a
env:
CI: false
- name: 📂 Sync files
uses: wlixcc/SFTP-Deploy-Action@v1.2.4
with:
username: ${{ secrets.EC2_USERNAME }}
server: ${{ secrets.EC2_HOST }}
ssh_private_key: ${{ secrets.EC2_PRIVATE_KEY }}
local_path: './build/.'
remote_path: '/var/www/html/front'
sftpArgs: '-o ConnectTimeout=5'
- name: executing remote ssh commands using ssh key
uses: appleboy/ssh-action@v1.0.0
with:
host: ${{ secrets.EC2_HOST }}
username: ${{ secrets.EC2_USERNAME }}
key: ${{ secrets.EC2_PRIVATE_KEY }}
port: '22'
script: |
cd /var/www/front
pm2 reload ProjectName --update-envStep 5 - Deploy your Workflow
