DEV Community: Inhwa Son

AWS Deployment Best Practices: Let's make your own SPA web app! - (2)

Inhwa Son — Tue, 12 Nov 2024 20:29:16 +0000

Key Content (✅ is in this post)

AWS connects with GitHub
S3 UI web hosting
Store my SSL/TLS certification in AWS Certificate Manager ✅
Connect CloudFront with SSL enabled domain ✅
Authentication with AWS Cognito
Create RDS to store data
Create backend based on Lambdas and API Gateway
AWS Rekognition implementation
AWS Transcribe implementation

Requirements

Domain name

Store my SSL/TLS certification in AWS Certificate Manager

Now, we deployed our webpage in S3, so let's publish it with SSL certified domain. I am a graduate student so I was provided free 2 domain names from name.com. I use name.com domain because they give you free SSL/TLS certification to protect your website securely.

After acquiring domain name, you can click Active SSL to issue certificate.

To issue SSL/TLS certificate, you need to issue CSR. I used this website to issue simply. Keep in mind that you should never lose this CSR private key.

Then after few minutes of verification, you will receive an email with .crt files with Certification.

Let's go to ACM.

You need to fill in this 3 parts.

Certification Body: you can find either from name.com or inside of email
Certificate private key: CSR that I put bold above
Certificate chain: Since we downloaded .crt files from email, I run this command to make a chain. Then, paste certificat_chain.crt in this section.

cat SectigoRSADomainValidationSecureServerCA.crt USERTrustRSAAAACA.crt > certificate_chain.crt

After successfully imported, you can find your Certification is showing your domain properly.

Connect CloudFront with SSL enabled domain

We need to create distribution.

You can select your s3 bucket for origin, and click Use web endpoint, then it will change into

like this.

Since we imported custom certification above, we can check that it shows up under here. So select this to connect.

After successfully creation,

The blue box and red box are important. I had issue with missing Alternate domain names. After filling in, I could successfully connect my CloudFront.

When it's successfully deployed, we can see our website anywhere!

AWS Deployment Best Practices: Let's make your own SPA web app! - (1)

Inhwa Son — Thu, 07 Nov 2024 01:09:49 +0000

In this blog post, I will guide you through creating your own website from scratch and deploying it in the real world. As mentioned earlier, there are some prerequisites, as I’ll be reusing elements from my previous post:

An AWS account
An SSL-certified domain name
A GitHub repository for the project

Introduction

I created my web application based on this flow diagram. A more detailed explanation can be found in the README.md file in the repository.

Key Content (✅ is in this post)

AWS connects with GitHub ✅
S3 UI web hosting ✅
Store my SSL/TLS certification in AWS Certificate Manager
Connect CloudFront with SSL enabled domain
Authentication with AWS Cognito
Create RDS to store data
Create backend based on Lambdas and API Gateway
AWS Rekognition implementation
AWS Transcribe implementation

Series 2

AWS connection with GitHub workflow

Since I want to update my S3 bucket whenever the UI changes, I created a workflow and connected it to my AWS account. To link GitHub with AWS, I created a new IAM user with specific policies:

Once the user is created, you will receive an access key and a secret key.

Next, you need to add these keys to GitHub Secrets.

Deploy into S3 bucket

To deploy into s3 bucket, we need to create .github/workflows/deploy.yml file from the project root.

name: Deploy to S3

on:
  push:
    branches:
      - main
    paths:
      - "**/*"

jobs:
  build_and_deploy:
    if: contains(github.event.head_commit.message, '[build]')
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Set up Node.js
      uses: actions/setup-node@v3

    - name: Install dependencies
      run: |
        npm install

    - name: Build React app
      run: |
        npm run build

    - name: Configure AWS credentials
      uses: aws-actions/configure-aws-credentials@v2
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: ${{ secrets.AWS_REGION }}

    - name: Validate AWS credentials
      run: |
        if aws sts get-caller-identity > /dev/null 2>&1; then
          echo "AWS credentials are valid."
        else
          echo "Error: AWS credentials are invalid or not configured."
          exit 1
        fi

    - name: Deploy to S3
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: ${{ secrets.AWS_REGION }}
      run: |
        aws s3 sync ./build/ s3://${{ secrets.S3_BUCKET_NAME }}/ --delete --exclude ".git/*"

For this part; contains(github.event.head_commit.message, '[build]'), I intentionally added since I don't want to trigger too many github actions.

Enabling Web Hosting

Once deployment is complete, you can check the deployed version by enabling web hosting in S3. To do this, go to your S3 bucket, navigate to Properties tab, and select Static website hosting. After enabling it, you will receive a URL to view your deployment.

Troubleshooting

If you encounter a 403 Forbidden error, try updating the bucket policy under the Permissions tab with the following code:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
    ]
}

By clicking the URL, you can confirm that your code has been successfully hosted.

New Journey begins with MLH Fellowship 2024 Fall B

Inhwa Son — Wed, 02 Oct 2024 18:43:04 +0000

After knocking on the door of the MLH Fellowship Program three times, I finally became a Fellow!

I learned about the program from a friend I met at UKC last year. Although I reached the final interview stage for both the 2023 Fall and 2024 Spring batches, I was rejected at the Project Matching stage each time. I applied again for the 2024 Fall Batch, and finally, I received an email confirming that I was matched with an MLH project and have completed the registration process.

What is MLH Fellowship?

https://fellowship.mlh.io/

It's not exactly an internship, but you can think of it as an internship-alternative program that lasts for 12 weeks. Around 10 people form a pod to work on projects sponsored by external organizations, while also receiving training throughout the 12 weeks. And of course, you get paid! (Up to $5,000)

I applied to the Site Reliability Engineering (SRE) track, but I could have applied to up to three programs, including Open Source and Web3.

And I successfully got accepted into the SRE track!

How to Apply

Selection process:

Submit application
Personal interview
Technical interview
Project matching
Enroll as Fellow These are the five steps in total.

1. Submit application

After reading testimonials from those who were accepted, it seems that the application submission is extremely important.

You have to answer two questions:

Why do you want to become an MLH Fellow? (500 words)
The MLH Fellowship is a diverse community that welcomes Fellows from a wide range of experiences and backgrounds. What perspective or experience will you bring to the fellowship to strengthen our community?

The questions haven’t changed throughout the three times I applied, so it seems like they keep these the same.

I filled almost all 500 words when I submitted mine.

Although the application period for this program is quite long, it seems to operate on a rolling basis, so I recommend preparing in advance and applying as early as possible. This way, you can get to the interviews faster.

Also, when submitting the application, you need to provide a GitHub repository that represents you. In my case, I had to highlight my DevOps experience, so I submitted a project I worked on during a hackathon. Though it was a simple setup, it had a front-end, back-end, and database, so I used that for my submission.

2,3. Interviews

After submitting the application, you’ll receive an invitation for the Personal Interview.

Both the 2nd and 3rd interviews are quite short, lasting only about 15 minutes, so there’s no need to feel too much pressure. The questions weren’t particularly difficult; they mainly focused on why I wanted to pursue this field and why I was interested in the program.

For the third interview, you’ll be asked to explain the project you submitted in more detail, with follow-up questions based on that. They might ask what part of the project you were responsible for, whether you encountered any challenges, and if there are areas you think could be improved or things you wish you had done differently. The questions are aimed at gauging how seriously you took the project and whether you had ownership over it.

After completing the third stage, you’ll automatically receive an email with a detailed survey about the projects. The first time I applied, I foolishly completed the project matching survey a week late.

4. Project matching

For both the 2023 Fall and 2024 Spring batches, I couldn't progress past the fourth stage.

I was placed on a waitlist, with the hope that they would match me with a suitable project if one came up. But after a few months, I received the dreaded email starting with "Unfortunately..."

However, this week, I received an acceptance email.
I got in on the third try!

What's on next?

Starting on 9/30, I began my new journey as an MLH Fellow, and now I'm in week 1. It's been really exciting to meet people from all over the world who share common interests. My project will be JavaScript-based, so it will offer me many opportunities to learn."

Secure Your Website: Best Practices for AWS Deployment

Inhwa Son — Tue, 01 Oct 2024 01:27:20 +0000

Introduction

In this post, I’ll share my perspective on securely deploying a simple web page, based on key principles I’ve learned from cloud computing in the fall of 2024. When discussing "security" in web development, there are numerous aspects to consider, but I’ll focus on four critical areas:

Dockerization
CI/CD Pipeline
Running on ECS Fargate
SSL-Enabled Domain

Additionally, I’ll demonstrate how to set up the website to be Highly Available (HA), ensuring reliability and uptime even during traffic spikes or failures.

Before we start

I am using this repository to create simple front, back, and nginx architecture.
https://github.com/inhwaS/supreme

1. Dockerization

Containerizing the application ensures consistency across different environments, which is essential for security.

In the repository, I created a docker-compose.yml file to run all containers under the same network. However, nginx is only mapped to port 80 for HTTP, while the demo(backend) and front(frontend) are only exposing their respective folders, allowing communication solely within the same bridge network.

supreme/
├── README.md
├── docker-compose.yml
├── demo/
│   └── Dockerfile
├── front/
│   └── Dockerfile
└── nginx/
    └── Dockerfile

2. CI/CD Pipeline

Automating the deployment process, from building a Docker image to pushing it into Amazon ECR (Elastic Container Registry), reduces human error and improves security.

Under the .github/workflows folder, I created a release.yml file to automate the pipeline for pushing Docker images into the ECR repository. Since I’m using an AWS Academy account, it’s mandatory to include the AWS_SESSION_TOKEN.

name: Release

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v1

      - name: Log in to Amazon ECR
        uses: aws-actions/amazon-ecr-login@v1
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_SESSION_TOKEN: ${{ secrets.AWS_SESSION_TOKEN }}
          AWS_REGION: ${{ secrets.AWS_REGION }}

      - name: Build and push Docker images
        env:
          AWS_REGION:  ${{ secrets.AWS_REGION }}
          ECR_REPO_NAME_BACKEND: supreme-backend
          ECR_REPO_NAME_FRONTEND: supreme-frontend
          ECR_REPO_NAME_NGINX: supreme-nginx
          IMAGE_TAG: latest
          ACCOUNT_ID: ${{ secrets.ACCOUNT_ID }}
        run: |
          # Full ECR repository URIs
          ECR_URI_BACKEND="${ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com/${ECR_REPO_NAME_BACKEND}"
          ECR_URI_FRONTEND="${ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com/${ECR_REPO_NAME_FRONTEND}"
          ECR_URI_NGINX="${ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com/${ECR_REPO_NAME_NGINX}"

          # Build images for both architectures
          echo "Building multi-architecture Docker images..."
          docker buildx build --platform linux/amd64,linux/arm64 -t ${ECR_URI_BACKEND}:${IMAGE_TAG} --push ./demo
          docker buildx build --platform linux/amd64,linux/arm64 -t ${ECR_URI_FRONTEND}:${IMAGE_TAG} --push ./front
          docker buildx build --platform linux/amd64,linux/arm64 -t ${ECR_URI_NGINX}:${IMAGE_TAG} --push ./nginx

After writing the file, I stored the relevant keys in the GitHub settings.

Whenever a commit is pushed to the master branch, it automatically builds the Docker image and pushes it to the ECR repository that I have already set up. To create ECR, please refer this tutorial.

When the build is done,

we can confirm that ECR is updated with new images.

3. Running on ECS Fargate

Utilizing Amazon’s ECS Fargate allows the application to run securely in a serverless environment, with built-in scaling and isolation.

With the image stored in ECR, we can create a Task Definition to run ECS services. Based on my repository, it will create three different containers.

After successfully creating all the containers, we can access the nginx container using the assigned IP for that container, and they communicate successfully.

4. SSL-Enabled Domain

Configuring a custom domain with SSL ensures encrypted communication between the user and the website, enhancing trust and security.

To use my personal domain, I tried using name.com since it offers two free domain names under the GitHub Student Developer Pack.

I registered dragonai.live and stored my SSL certificate in ACM.

I also wrote how to issue name.com domain here in Korean.

After properly setting up the load balancer for my ECS services, I was able to create a secure website with a valid SSL certificate.

High Available (HA) Website

To ensure high availability for my website, I need to host servers in different availability zones in AWS. Since I'm running my containers on ECS, I had to configure IP instances accordingly.

Since this involves a lot of steps, I would like to recommend a prompt for GenAI that I can use to get successful instructions from ChatGPT.

I'm looking to set up a highly available website on AWS using ECS and other AWS services. I already have my SSL-certified domain name. Could you provide a step-by-step guide that includes:

1. Creating a VPC
2. Setting up load balancers
3. Deploying a container with that load balancer in ECS
4. Connecting my domain to the ECS service

My load balancer looks like this:

Conclusion:

This blog post may not be very beginner-friendly, as it covers many different concepts. However, I believe the most challenging part will be creating a "Highly Available" website, for which I provided a prompt. I outlined some mandatory steps from a security perspective, so for detailed instructions, you can seek help from GenAI and follow the steps they provide. While it does require a basic understanding of web architecture, if you start following the steps I outlined and ask for details from GenAI, you'll be able to run a "secure website" on your own.

Thank you for reading, and cheers!