Uploading Static Files to S3 with GitHub Actions

📅

loading..🐩🐩🐩🐩

Before getting started 🔗

Let's use GitHub Actions to deploy static files automatically from a GitHub repository.

This assumes the S3 bucket and repository already exist.

AWS configuration 🔗

Creating an IAM user 🔗

Select Users, then Create user.

Enter a name and click Next.

On the permissions screen, choose to attach policies directly and select AmazoneS3FullAccess and CloudFrontFullAccess.

Keep clicking Next to finish creating the user.

Afterward, open the user, select Security credentials, and click Create access key.

Select Other and enter a tag as well.

Keep the generated access key in a safe place.

Never

publish it anywhere public.

Configuring GitHub Actions 🔗

Adding GitHub secrets 🔗

Open the repository and navigate to Settings > Security > Secrets and variables, then click New repository secret.

Add AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY.

Creating the yml file 🔗

Create a deploy.yml file in the .github/workflows directory.

./.github/workflows/deploy.yml

name: Main CI
 
on:
  push:
    branches:
      - main
jobs:
  push-to-s3:
    name: Push to S3
    runs-on: ubuntu-20.04
 
    # 레포지토리에 접근하여 CI서버로 코드를 내려받음
    steps:
    - name: Checkout
      uses: actions/checkout@v3
 
    # 캐시 사용
    - name: Cache dependencies
      uses: actions/cache@v3
      with:
        path: |
          ./posts
        key: ${{ runner.os }}-posts-${{ hashFiles('**/posts/**') }}
 
    # aws에 접근하기 위한 권한 설정
    - 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_ACCESS_KEY }}
        aws-region: ap-northeast-2
 
    # s3에 파일 업로드
    - name: Upload to S3
      run: |
        aws s3 sync \
          ./posts s3://promleeblog-cdn
			# file path, s3 버킷 이름

After adding it, push to the main branch.

GitHub Actions will run and upload the files to the S3 bucket.

References 🔗

Building CI/CD with GitHub Actions, S3, and CloudFront↗

Caching dependencies to speed up workflows↗

Uploading Static Files to S3 with GitHub Actions | PromleeBlog