Day 86 of 90 Days of DevOps Challenge: Deploying a Portfolio App on AWS S3 Using GitHub Actions
Table of contents
In today’s tech landscape, deploying applications efficiently and reliably is crucial. With the rise of CI/CD practices, automation tools like GitHub Actions allow developers to streamline their deployment processes directly from their GitHub repositories. In this blog post, we will walk through the steps to deploy a portfolio application on AWS S3 using GitHub Actions, enabling a seamless and automated deployment experience.
Project Overview
This project aims to deploy a portfolio application hosted on AWS S3. We will utilize GitHub Actions to automate the Continuous Integration and Continuous Deployment (CI/CD) process, allowing for easy updates and management of our portfolio site.
Key Components
1. AWS S3
Amazon Simple Storage Service (S3) is an object storage service that provides industry-leading scalability, data availability, security, and performance. S3 is perfect for hosting static websites, including portfolio applications.
2. GitHub Actions
GitHub Actions is a powerful automation tool integrated directly into GitHub that enables you to create workflows for CI/CD. It allows developers to automate tasks like testing, building, and deploying their applications.
Implementation Steps
Step 1: Get the Portfolio Application
Clone the Repository: Start by obtaining the portfolio application code from GitHub.
git clone <your-portfolio-app-repo-url> cd <your-portfolio-app-directory>
Step 2: Set Up AWS CLI
Install AWS CLI: If you haven't installed the AWS CLI yet, follow the instructions on the official AWS documentation.
Configure AWS CLI: Configure the AWS CLI with your credentials by running the following command:
aws configure
You will need to input your AWS Access Key, Secret Key, region, and output format.
Step 3: Create an S3 Bucket
Create an S3 Bucket: You need to create an S3 bucket to host your portfolio application. You can do this via the AWS Management Console or using the AWS CLI:
aws s3api create-bucket --bucket <your-bucket-name> --region <your-region> --create-bucket-configuration LocationConstraint=<your-region>
Replace
<your-bucket-name>
with a unique name for your bucket and<your-region>
with your AWS region.
Step 4: Build the GitHub Actions Workflow
Create the Workflow File: In your portfolio application directory, create a
.github/workflows
directory if it doesn't already exist. Inside this directory, create a new YAML file (e.g.,deploy.yml
).Add Workflow Configuration: Edit the
deploy.yml
file and add the following configuration:name: Deploy to S3 on: push: branches: - main # Change to your main branch jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Set up AWS CLI uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: <your-region> - name: Sync files to S3 run: | aws s3 sync . s3://<your-bucket-name> --exclude '.git/*' --exclude 'node_modules/*' --exclude '*.md'
Replace
<your-region>
with your AWS region and<your-bucket-name>
with your S3 bucket name.
Step 5: Configure GitHub Secrets
Add AWS Credentials: For security reasons, you should store your AWS credentials in GitHub Secrets. Go to your GitHub repository settings, then to "Secrets" and add the following secrets:
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
Enter your AWS access key and secret key in their respective fields.
Step 6: Push Changes and Deploy
Commit and Push: Commit your changes and push them to the main branch of your GitHub repository.
git add . git commit -m "Set up GitHub Actions workflow for S3 deployment" git push origin main
Check the GitHub Actions Tab: After pushing your changes, navigate to the "Actions" tab in your GitHub repository to see your workflow running. If everything is set up correctly, your portfolio application should be deployed to your S3 bucket.
Step 7: Access Your Portfolio App
Access the S3 Bucket: Once the deployment is complete, you can access your portfolio app by visiting the URL of your S3 bucket. The format is typically:
http://<your-bucket-name>.s3-website.<your-region>.amazonaws.com
Conclusion
By following the steps outlined in this blog post, you can successfully deploy your portfolio application on AWS S3 using GitHub Actions. This project not only highlights your ability to work with cloud services but also demonstrates your proficiency in CI/CD practices. Automating the deployment process will save you time and ensure that your portfolio is always up-to-date with the latest changes.