Deploy Demo dan Rilis

Mazer punya dua jalur penerbitan otomatis yang berjalan terpisah: alur demo ke branch docs lewat .github/workflows/demo.yml, dan alur rilis ke GitHub Release lewat .github/workflows/release.yml. Keduanya tidak berbagi satu definisi build pun, sehingga perintah yang berhasil di satu jalur belum tentu ada di jalur lain. Di samping itu ada satu Dockerfile dua tahap yang menyajikan hasil build lewat nginx.

Deploy demo ke branch docs

Workflow demo.yml menyala pada push ke branch main dan pada workflow_dispatch .github/workflows/demo.yml:1-7¹. Komentar di atas blok on masih berbunyi "Will run on 2.0.0-rc.1 branch", sedangkan filter yang benar-benar aktif hanya branches: [ "main" ]. Yang berlaku adalah filter, bukan komentar.

Job build berjalan di ubuntu-latest dengan urutan actions/checkout@v3, actions/setup-node@v3, lalu yarn install, yarn build, dan yarn rtl .github/workflows/demo.yml:13-20². Karena memakai yarn, jalur demo tidak pernah menyentuh npm run zip. Isi kedua perintah build dijelaskan di Alur Build Vite dan Nunjucks, sedangkan yarn rtl di Layout RTL dan Build rtlcss.

Langkah Deploy 🚀 memakai JamesIves/[email protected] dengan branch docs, folder: ./dist, target-folder: demo, dan commit-message: "update: demo" .github/workflows/demo.yml:22-28³.

sequenceDiagram
  autonumber
  participant Dev as Push to main
  participant GH as GitHub Actions demo.yml
  participant Node as setup-node@v3
  participant Vite as yarn build dan yarn rtl
  participant Pages as github-pages-deploy-action v4.2.5
  participant Docs as branch docs folder demo
  Dev->>GH: push ke main atau workflow_dispatch
  GH->>Node: checkout@v3 lalu setup-node@v3
  Node->>Vite: yarn install
  Vite->>Vite: yarn build
  Vite->>Vite: yarn rtl
  Vite->>Pages: serahkan folder ./dist
  Pages->>Docs: commit "update: demo" ke target-folder demo
  Docs-->>Dev: https://zuramai.github.io/mazer/demo
%% fig: Siklus deploy demo ke branch docs
%% desc: Push ke main memicu build Vite dan rtlcss, lalu action menulis isi dist ke subfolder demo di branch docs.

⚠️ Branch docs dan folder demo bukan tujuan akhir. README mendokumentasikan prefiks CDN https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo README.md:94-104⁴. Artinya setiap push ke main yang lolos workflow ini langsung mengubah berkas yang dilayani jsDelivr, tanpa ada tahap staging di antaranya.

Rilis lewat workflow_dispatch

release.yml tidak punya pemicu otomatis; satu-satunya pemicu adalah workflow_dispatch dengan dua input: version (wajib, type: string, keterangan "Release version number (semver)") dan prerelease (opsional, default: false, type: boolean) .github/workflows/release.yml:3-14⁵.

Job release menjalankan npm install, npm run production, rm dist/.gitignore, lalu npm run zip .github/workflows/release.yml:36-41⁶. Setelah itu softprops/action-gh-release@v1 menerbitkan release dengan GITHUB_TOKEN, meneruskan input prerelease apa adanya, memakai input version sebagai tag_name, dan mengunggah berkas dist.zip .github/workflows/release.yml:42-50⁷.

graph LR
  T["workflow_dispatch: version, prerelease"] --> I["npm install"]
  I --> P["npm run production"]
  P -->|"script tidak didefinisikan"| X["job berhenti sebelum zip"]
  P --> RM["rm dist/.gitignore"]
  RM --> Z["npm run zip"]
  Z --> TZ["template.zip"]
  TZ -.->|"nama berkas berbeda"| DZ["dist.zip"]
  DZ --> R["softprops/action-gh-release@v1"]
  R --> G["GitHub Release dengan tag_name = version"]
  style T fill:#f59e0b,color:#000
  style P fill:#f59e0b,color:#000
  style X fill:#dc2626,color:#fff
  style Z fill:#336791,color:#fff
  style TZ fill:#8b5cf6,color:#fff
  style DZ fill:#f59e0b,color:#000
  style R fill:#2d7d46,color:#fff
  style G fill:#2d7d46,color:#fff
%% fig: Jalur rilis dari workflow_dispatch ke GitHub Release
%% desc: Input manual masuk ke langkah build, lalu satu berkas zip diunggah sebagai aset release; dua node disorot karena rujukan script dan nama berkas tidak cocok.

Ketidakcocokan perintah dan nama artefak

Daftar scripts di package.json hanya berisi dev, build, watch, prod-rtl, rtl, prettify, zip, dan preview package.json:5-14⁸. Tidak ada production di daftar itu, padahal release.yml memanggil npm run production.

bestzip sendiri terpasang sebagai devDependency package.json:72⁹, jadi perintah zip memang dirancang menghasilkan template.zip, bukan dist.zip. Blok konfigurasi release-it menjalankan npm run prodzip pada hook before:init, mematikan npm.publish, dan mendaftarkan dist.zip sebagai aset github.release package.json:85-99¹⁰.

⚠️ Nama berkas adalah titik paling rapuh di jalur rilis. npm run zip menulis template.zip package.json:5-14⁸, tetapi action unggah meminta dist.zip .github/workflows/release.yml:42-50⁷. Selama keduanya tidak disamakan, files: dist.zip tidak menemukan berkas yang baru dibuat.

Image Docker untuk frontend

Dockerfile terdiri dari dua tahap. Tahap pertama memakai node:16 dengan nama frontend: WORKDIR /frontend, COPY package*.json, npm install, COPY . /frontend, lalu npm run dev Dockerfile:1-8. Tahap kedua memakai nginx:latest dan menyalin /frontend/dist/ dari tahap frontend ke /usr/share/nginx/html Dockerfile:10-11.

⚠️ Tahap frontend menjalankan npm run dev, yaitu vite package.json:5-14⁸, server pengembangan yang tidak menulis direktori dist/. Ditambah .dockerignore yang mengecualikan dist/ dan node_modules/ .dockerignore:1-2, isi dist/ dari host juga tidak ikut ke build context. Dengan begitu COPY --from=frontend /frontend/dist/ bergantung pada keluaran yang tidak pernah dihasilkan tahap tersebut.

Perintah di README tetap memakai citra itu dan memetakan port 80 container ke 5173 di host, docker run -it -d -p 5173:80 --name mazer mazer-frontend README.md:50-56¹¹.

Ringkasan jalur penerbitan

Jalur demo adalah satu-satunya jalur di halaman ini yang seluruh langkahnya cocok dengan scripts di package.json. Jalur rilis dan jalur Docker sama-sama merujuk perintah yang tidak melakukan apa yang diharapkan pemanggilnya.