Deploy NextJS to Vercel with GitHub Actions

Pada saat kita deploy aplikasi dari GitHub Org ke Vercel kita mendapat limit maksimal deployment, lalu bagaimana caranya deploy aplikasi ke Vercel dari GitHub Org tanpa ada limit deploy dari Vercel?

Image by Rubaitul Azad

Bismillah,

Jadi awal mulanya saya ingin mendeploy aplikasi NextJS ke Vercel, akan tetapi jika menghubungkan GitHub Org ke Vercel nantinya akan ada limit resource gitu, berbeda apabila kita menghubungkan GitHub Personal ke Vercel, Kemudian saya menemukan salah satu cara, yaitu dengan menggunakan GitHub Actions.

Pertama kita siapkan repo yang kita gunakan, disini saya coba menggunakan repo kampusin.

Kampusin adalah website yang menyediakan daftar universitas di Indonesia untuk pelajar SMA. Anda dapat melihat nama universitas dan alamatnya. Klik pada nama untuk pergi ke website resmi kampus.

Kemudian kita bisa membuat folder .github/workflows kemudian kita bisa membuat sebuah YAML file untuk menuliskan flow dari GitHub Actions.

name: Deploy Prod
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_PROD }}
on:
  push:
    branches:
      - main
jobs:
  Build:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

Kemudian kita juga harus melakukan configurasi VERCEL_TOKEN di GitHub Secrets.

GitHub Secrets konfigurasi

Jika sudah kita bisa lihat pada bagian actions di repository GitHub kita.

Pages GitHub Actions

Hasilnya bisa dicek disini: https://kampusin.vercel.app/

Semoga bermanfaat ^^

About me

I’m Muhammad Abdur Rofi Maulidin, a DevOps Engineer passionate about optimizing software development processes by supporting cloud infrastructure management like kubernetes orchestration, and automations. Dedicated to support the reliability, availability, and performance of systems by implementing SLI/SLO based on performance monitoring for business requirement.

Feel free to keep in touch with me:

• LinkedIn: https://www.linkedin.com/in/mrofisr/
• Twitter: https://twitter.com/mrofisr_
• Telegram: https://t.me/@mrofisr

Let’s go to the cloud 🚀

Free Palestine 🇵🇸