Cara Deploy Project yang Menggunakan Git Submodule Private ke vercel

Pendahuluan

Saat kita membuat project di Vercel yang mengandung submodul dari repositori private, kita tidak dapat mengambilnya secara langsung, bahkan setelah memberikan izin penuh kepada aplikasi Vercel di GitHub.

Solusinya adalah mengambil submodul tersebut selama proses build menggunakan HTTP Fine-granted Personal Access Token (token akses pribadi dengan izin terbatas).

When building with Vercel, you cannot retrieve submodules that are set as private repositories.

Poin kuncinya adalah menjalankan perintah berikut selama build:

git submodule set-url <my-submodule> "https://${GITHUB_PAT}@github.com/ytyng/<my-submodule>.git"
git submodule sync
git submodule update --init

Pembahasan

1. Membuat Fine-granted Personal Access Token

Buka halaman berikut: https://github.com/settings/tokens?type=beta
Klik "Generate new token".

Untuk Repository access, pilih "Only select repositories" dan pilih repositori submodul private yang diperlukan.
Untuk Repository permissions, berikan akses Read-only hanya pada Contents.

Klik tombol "Generate token" untuk membuat token.

2. Mendaftarkan Token sebagai Environment Variable di Vercel

Daftarkan token yang telah kita buat di GitHub pada bagian Settings → Environment Variables project Vercel kita. Kita akan mendaftarkannya dengan nama GITHUB_PAT.

3. Membuat Build Script

Kita perlu membuat file script shell untuk mengatur ulang URL submodul dengan menyertakan GITHUB_PAT sebelum update submodul dilakukan.

Contoh file sh/build-for-vercel.sh:

#!/usr/bin/env bash
 
cd $(dirname $0)/../ || exit
 
if [ -z "${GITHUB_PAT}" ]; then
  echo "The environment variable GITHUB_PAT is not set. Please regenerate the Vercel submodule token on Github and register it as the GITHUB_PAT environment variable in Vercel."
  echo "https://github.com/settings/tokens?type=beta"
  echo "https://vercel.com/<my-own-projects>/<project-name>/settings/environment-variables"
  exit 1
fi
 
echo "If the submodule update fails, please regenerate the Vercel submodule token on Github and register it as the GITHUB_PAT environment variable in Vercel."
echo "https://github.com/settings/tokens?type=beta"
echo "https://vercel.com/<my-own-projects>/<project-name>/settings/environment-variables"
 
git submodule set-url <my-submodule> "https://${GITHUB_PAT}@github.com/ytyng/<my-submodule>.git"
 
git submodule sync
git submodule update --init
 
# The original build script
npm run generate

4. Membuat vercel.json

Kita perlu mengarahkan perintah build Vercel agar menjalankan script shell yang telah kita buat.

Contoh vercel.json untuk project yang menghasilkan konten static seperti [[NextJS]].

{
  "buildCommand": "scripts/build-for-vercel.sh"
}

Catatan

Pada awal build, kita mungkin akan melihat warning ini:

Warning: Failed to fetch one or more git submodules

Ini adalah hal yang wajar dan dapat kita abaikan karena script kita akan memperbaikinya setelahnya.

Tips

Informasi Tambahan: Metode Re-cloning

Alih-alih memperbarui submodul, kita juga bisa menghapus folder submodul dan melakukan re-cloning (clone ulang) repositori submodul menggunakan GITHUB_PAT.

Contoh perintahnya adalah:

rm -r <my-submodule>
git clone --depth 1 --branch main "https://${GITHUB_PAT}@github.com/ytyng/<my-submodule>.git" <my-submodule>

Untuk melihat nama dari submodule berada di file root project /.gitmodules

[submodule "src/content"]
    path = src/content
    url = git@artsbymat.github.com:artsbymat/2nd-brain.git
    ignore = all

Script pribadi saya yang menggunakan metode re-cloning:

#!/usr/bin/env bash
set -e
 
cd "$(dirname "$0")/../" || exit 1
 
# Pastikan token tersedia
if [ -z "${GITHUB_PAT}" ]; then
  echo "❌ GITHUB_PAT tidak ditemukan. Silakan buat token baru dan daftarkan di environment Vercel."
  echo "👉 https://github.com/settings/tokens?type=beta"
  echo "👉 https://vercel.com/<your-org>/<project>/settings/environment-variables"
  exit 1
fi
 
# Lokasi submodule
CONTENT_DIR="src/content"
CONTENT_REPO="https://github.com/artsbymat/2nd-brain.git"
BRANCH="main"
 
echo "🔄 Delete old submodule..."
rm -rf "${CONTENT_DIR}"
 
echo "📥 re-cloning content repository..."
git clone --depth 1 --branch "${BRANCH}" "https://${GITHUB_PAT}@${CONTENT_REPO#https://}" "${CONTENT_DIR}"
 
echo "🚀 Success re-cloning, building app..."
npm run build

Sumber: https://www.ytyng.com/en/blog/how-to-deploy-project-to-vercel-includes-private-submodules/

Cara Deploy Project yang Menggunakan Git Submodule Private ke vercel

Pendahuluan

Solusinya adalah mengambil submodul tersebut selama proses build menggunakan HTTP Fine-granted Personal Access Token (token akses pribadi dengan izin terbatas).

When building with Vercel, you cannot retrieve submodules that are set as private repositories.

Poin kuncinya adalah menjalankan perintah berikut selama build:

git submodule set-url <my-submodule> "https://${GITHUB_PAT}@github.com/ytyng/<my-submodule>.git"
git submodule sync
git submodule update --init

Pembahasan

1. Membuat Fine-granted Personal Access Token

Buka halaman berikut: https://github.com/settings/tokens?type=beta
Klik "Generate new token".

Untuk Repository access, pilih "Only select repositories" dan pilih repositori submodul private yang diperlukan.
Untuk Repository permissions, berikan akses Read-only hanya pada Contents.

Klik tombol "Generate token" untuk membuat token.

2. Mendaftarkan Token sebagai Environment Variable di Vercel

Daftarkan token yang telah kita buat di GitHub pada bagian Settings → Environment Variables project Vercel kita. Kita akan mendaftarkannya dengan nama GITHUB_PAT.

3. Membuat Build Script

Kita perlu membuat file script shell untuk mengatur ulang URL submodul dengan menyertakan GITHUB_PAT sebelum update submodul dilakukan.

Contoh file sh/build-for-vercel.sh:

#!/usr/bin/env bash
 
cd $(dirname $0)/../ || exit
 
if [ -z "${GITHUB_PAT}" ]; then
  echo "The environment variable GITHUB_PAT is not set. Please regenerate the Vercel submodule token on Github and register it as the GITHUB_PAT environment variable in Vercel."
  echo "https://github.com/settings/tokens?type=beta"
  echo "https://vercel.com/<my-own-projects>/<project-name>/settings/environment-variables"
  exit 1
fi
 
echo "If the submodule update fails, please regenerate the Vercel submodule token on Github and register it as the GITHUB_PAT environment variable in Vercel."
echo "https://github.com/settings/tokens?type=beta"
echo "https://vercel.com/<my-own-projects>/<project-name>/settings/environment-variables"
 
git submodule set-url <my-submodule> "https://${GITHUB_PAT}@github.com/ytyng/<my-submodule>.git"
 
git submodule sync
git submodule update --init
 
# The original build script
npm run generate

4. Membuat vercel.json

Kita perlu mengarahkan perintah build Vercel agar menjalankan script shell yang telah kita buat.

Contoh vercel.json untuk project yang menghasilkan konten static seperti [[NextJS]].

{
  "buildCommand": "scripts/build-for-vercel.sh"
}

Catatan

Pada awal build, kita mungkin akan melihat warning ini:

Warning: Failed to fetch one or more git submodules

Ini adalah hal yang wajar dan dapat kita abaikan karena script kita akan memperbaikinya setelahnya.

Tips

Informasi Tambahan: Metode Re-cloning

Alih-alih memperbarui submodul, kita juga bisa menghapus folder submodul dan melakukan re-cloning (clone ulang) repositori submodul menggunakan GITHUB_PAT.

Contoh perintahnya adalah:

rm -r <my-submodule>
git clone --depth 1 --branch main "https://${GITHUB_PAT}@github.com/ytyng/<my-submodule>.git" <my-submodule>

Untuk melihat nama dari submodule berada di file root project /.gitmodules

[submodule "src/content"]
    path = src/content
    url = git@artsbymat.github.com:artsbymat/2nd-brain.git
    ignore = all

Script pribadi saya yang menggunakan metode re-cloning:

#!/usr/bin/env bash
set -e
 
cd "$(dirname "$0")/../" || exit 1
 
# Pastikan token tersedia
if [ -z "${GITHUB_PAT}" ]; then
  echo "❌ GITHUB_PAT tidak ditemukan. Silakan buat token baru dan daftarkan di environment Vercel."
  echo "👉 https://github.com/settings/tokens?type=beta"
  echo "👉 https://vercel.com/<your-org>/<project>/settings/environment-variables"
  exit 1
fi
 
# Lokasi submodule
CONTENT_DIR="src/content"
CONTENT_REPO="https://github.com/artsbymat/2nd-brain.git"
BRANCH="main"
 
echo "🔄 Delete old submodule..."
rm -rf "${CONTENT_DIR}"
 
echo "📥 re-cloning content repository..."
git clone --depth 1 --branch "${BRANCH}" "https://${GITHUB_PAT}@${CONTENT_REPO#https://}" "${CONTENT_DIR}"
 
echo "🚀 Success re-cloning, building app..."
npm run build

Sumber: https://www.ytyng.com/en/blog/how-to-deploy-project-to-vercel-includes-private-submodules/

Explorer

Cara Deploy Project yang Menggunakan Git Submodule Private ke vercel

Pendahuluan

Pembahasan

1. Membuat Fine-granted Personal Access Token

2. Mendaftarkan Token sebagai Environment Variable di Vercel

3. Membuat Build Script

4. Membuat vercel.json

Tips

Informasi Tambahan: Metode Re-cloning

Table of Content

Cara Deploy Project yang Menggunakan Git Submodule Private ke vercel

Pendahuluan

Pembahasan

1. Membuat Fine-granted Personal Access Token

2. Mendaftarkan Token sebagai Environment Variable di Vercel

3. Membuat Build Script

4. Membuat vercel.json

Tips

Informasi Tambahan: Metode Re-cloning

Table of Content