Skip to main content

Deploy Otomatis Aplikasi React ke CloudFront Menggunakan GitHub Actions

· 3 min read
Jacky Rusly

Di artikel kali ini saya akan sharing tentang bagimana cara deploy otomatis aplikasi React ke CloudFront menggunakan GitHub Actions.

Sebelum lanjut, kalian harus setup dahulu aplikasi React yang sudah di deploy ke CloudFront. Kalau kalian belum tahu caranya, kalian bisa baca Deploy Aplikasi React ke CloudFront.

Build Script​

Untuk scriptnya kalian bisa copy script ini ke project kalian di .github/workflows/deploy.yml.

name: Deploy to CloudFront
on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16.16.0 # Bisa disesuaikan dengan versi Node yang kalian pakai.
      - name: Cache node_modules
        id: cache-node_modules
        uses: actions/cache@v3
        with:
          path: '**/node_modules'
          key: ${{ runner.os }}-react-${{ hashFiles('**/yarn.lock') }}
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-region: ${{ secrets.AWS_REGION }}
      - name: Build
        run: |
          yarn
          yarn build
          aws s3 sync dist ${{ secrets.AWS_S3_URI }}/dist
          aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_DISTRIBUTION_ID }} --paths "/index.html"

Bisa dilihat pada script diatas, script tersebut akan ketrigger jika ada push code ke main branch. Dari script tersebut kita memakai beberapa actions:

  • actions/checkout@v3 untuk checkout ke git project kita.
  • actions/setup-node@v3 untuk mengatur versi Node.js
  • actions/cache@v3 untuk cache node_modules supaya build selanjutnya akan lebih cepat.
  • aws-actions/configure-aws-credentials@v1 yang akan kita gunakan untuk mengupload hasil build ke S3 dan invalidate cache pada CloudFront Distribution melalui cli aws.

Environment Variables​

Ada beberapa env variables yang harus kita setting.

  • AWS_SECRET_ACCESS_KEY.
  • AWS_ACCESS_KEY_ID.
  • AWS_REGION.
  • AWS_S3_URI.
  • CF_DISTRIBUTION_ID.

Buat AWS Key​

Buka Console AWS -> User -> Security credentials -> Access keys -> Create New Access Key.

AWS Access Key

Generated Access Key

Key tersebut bisa kita simpan ke notepad terlebih dahulu dan akan digunakan pada GitHub Actions Secrets.

Setting Environment Variables​

Buka GitHub Repository -> Settings -> Secrets -> Actions.

GitHub Repo

Kemudian klik New repository secret.

GitHub Secrets

Tambahkan secrets berikut satu per satu:

  • AWS_SECRET_ACCESS_KEY valuenya dari yang sudah kita generate di AWS (AKIAU4***).
  • AWS_ACCESS_KEY_ID valuenya dari yang sudah kita generate di AWS (4iKMmC2ReGni***).
  • AWS_REGION sesuaikan dengan region AWS yang kalian pakai, contohnya ap-southeast-1.
  • AWS_S3_URI S3 URI yang bisa kalian dapatkan di Bucket S3 kalian formatnya s3://<Nama Bucket>, contohnya s3://frontend-cloudfront-tutorial.
  • CF_DISTRIBUTION_ID ID CloudFront Distribution yang kalian pakai. Ini bisa dilihat pada menu CloudFront, contohnya E29QWHX9TR48HQ.

Set Variables

Trigger Build​

Selanjutnya kita akan coba trigger build dengan membuat changes di file App.tsx dan kemudian di push ke branch main.

Trigger Build

Kita bisa melihat action yang berjalan di GitHub Repository -> Actions.

Build Success

Preview​

Changes yang kita lakukan tadi sudah terpublish Automated Deployment CloudFront.

Preview

Penutup​

Begitulah cara untuk deploy otomatis aplikasi React ke CloudFront dengan menggunakan GitHub Actions. Semoga artikel ini bisa bermanfaat bagi teman-teman.