Deploying Portfolio app on AWS S3 using GitHub Actions
Project Description
The project involves deploying a Portfolio app on AWS S3 using GitHub Actions. Git Hub actions allow you to perform CICD with GitHub Repository integrated.
What is GitHub Actions?
GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production.
GitHub Actions goes beyond just DevOps and lets you run workflows when other events happen in your repository. For example, you can run a workflow to automatically add the appropriate labels whenever someone creates a new issue in your repository.
GitHub provides Linux, Windows, and macOS virtual machines to run your workflows, or you can host your own self-hosted runners in your own data center or cloud infrastructure.
Now, Let's Begin the Deployment Process! 🚀
Create a New Repository - "Portfolio-Github-Action"
To start the deployment process, create a new GitHub repository named "Portfolio-Github-Action" where we will host our Portfolio app.
Add and Commit Code to GitHub Repository
Once the repository is created, add your Portfolio app's code to it. Use the git commands to commit the code and push it to your GitHub repository or use the GitHub UI.
Create an S3 bucket
Now create an S3 Bucket named "nahid-portfolio-bucket" to store your Portfolio app's files. Remember to select a region for the bucket. Also, allow public access.
Configure Bucket Policy for Public Access
To allow public access to the objects in your S3 Bucket, you need to set up a bucket policy. Navigate to the bucket's properties, select "Permissions," and click on "Bucket Policy." Add the following policy:
Before editing the bucket policy, please unblock the “ Block all public access”
Refer Link: https://www.simplified.guide/aws/s3/create-public-bucket
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::nahid-portfolio-bucket/*"
}
]
}
Create an IAM User and Generate Security Credentials
Assign the necessary IAM policies to this user, allowing access to S3 and any other services required for your deployment.
Once the USER is created, under Security credentials, Create access keys and download the credentials
Set Up GitHub Secrets for AWS Credentials
Move to GitHub and open the portfolio repo > settings > Security
"Secrete and variables" > Actions
Click on "New Repository Secret" to add your AWS IAM USER access key and secret key as secrets named ACCESS_KEY_ID and SECRET_ACCESS_KEY, respectively.
Our Key IDs are added to GitHub actions
Create the GitHub Actions Workflow
In your GitHub repository, navigate to the "Actions" tab and click on "Set up a workflow yourself."
You will be directed to a new file named .github/workflows/main.yml, and add the following content:
name: Portfolio Deployment
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID}}
aws-secret-access-key: ${{ secrets.AWS_SECRET_KEY_ID}}
aws-region: us-east-1
- name: Deploy static site to S3 bucket
run: aws s3 sync . s3://nahid-portfolio-bucket --delete
Commit the changes and the actions should trigger the S3 bucket.
Try changing something in index.html workflows will get autotriggered
Whatever changes/files has been made got reflected in S3 bucket
Enable Static Website Hosting for the S3 Bucket
nahid-portfolio-bucketInfo > Properties > Static website hosting > Edit
Once the deployment is complete, go to your S3 Bucket's properties, select "Static website hosting," and enable it. Specify the "Index document" as index.html.
Access Your Portfolio Website
Now, visit the URL endpoint provided by S3 Static Website Hosting, and you'll see your deployed Portfolio app live and accessible to the public!
Congratulations! You have successfully deployed your Portfolio app on AWS S3 using GitHub Actions
Jenkins vs GitHub Actions:
A more detailed comparison is provided below in the tabular format:
However, it is entirely depends upon you to use Jenkins or GitHub Actions in your project. GitHub Actions are now free to use for public repositories. A pay-as-you-go system is available for private repositories.
Thank you for reading this blog. If you found this blog helpful, please like, share, and follow me for more blog posts like this in the future.
— Happy Learning !!!