kunthawat/mitsu-chaiyaporn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Serve with Node/Express instead of nginx (matches working astroreal pattern)

Browse Source 
- Add server.js: Express serves dist/ + injects env (GA_ID, FORM_EMAIL, GMAP) at runtime
- Container port now 4321 (identical to moreminimore-astroreal that deploys on EasyPanel)
- Remove nginx.conf + entrypoint.sh (no longer needed); Dockerfile uses node server.js
- Verified: pnpm build + node server.js -> all 40 pages serve 200, env injected, 0 leftovers
This commit is contained in:
kunthawat
2026-08-06 15:13:39 +07:00
parent a8fa17a947
commit 44c405730e
9 changed files with 713 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
README.md
View File

@@ -1,8 +1,11 @@
# มิตซูชัยพร สมุทรสาคร — Astro Website
# มิตซูชัยพร สมุทรสาคร — Astro + Express (static site)
เว็บโคลนของ **www.mitsuthailand.com** (บริษัท มิตซูชัยพร จำกัด ศูนย์มิตซูบิชิ สมุทรสาคร)
สร้างเป็น **Astro static site** โดย content ต้นฉบับถูก clon ลงมาครบ (หน้า + ภาพ + script)
และ URL ทั้งหมดเป็น **relative / dynamic** — เปลี่ยนโดเมนได้โดยไม่ต้องแก้ไฟล์
สร้างเป็น **Astro static site** ที่ serve ด้วย **Node/Express (server.js)** — pattern
เดียวกับ `moreminimore-astroreal` ที่ deploy บน EasyPanel ผ่านแล้ว
Content ต้นฉบับ clone ลงมาครบ (หน้า + ภาพ + script) และ URL ทั้งหมดเป็น **relative** —
เปลี่ยนโดเมนได้โดยไม่ต้องแก้ไฟล์
---
@@ -10,80 +13,70 @@
```
.
├── public/ ← หน้า HTML ต้นฉบับ (copy ตรง → dist/)
│ ├── index.html ← หน้าแรก (เหมือนต้นฉบับเป๊ะ)
│ ├── catalog/item/… ← หน้ารายการสินค้า (10 รุ่น + request-form)
├── public/ ← หน้า HTML ต้นฉบับ (Astro copy ตรง → dist/)
│ ├── index.html ← หน้าแรก (เหมือนต้นฉบับ)
│ ├── catalog/item/… ← รายการสินค้า (10 รุ่น + request-form)
│ ├── catalog/keyword/… ← หน้า keyword
│ ├── catalog/brand/ catalog/category/ catalog/e-catalog/ catalog/search/
│ ├── catalog/brand|category|e-catalog|search
│ ├── about-us/ contactus/ footer/ rfq/
│ ├── sites/ core/ themes/ ← CSS/JS (mirror โครงสร้างเดิม)
│ └── assets/external/ ← รูปจาก media.yellowpages.co.th (โหลดมาแล้ว)
├── src/
│ ├── layouts/Base.astro ← layout Astro (ใช้ตอน refactor หน้าเป็น component)
│ └── pages/example.astro ← ตัวอย่างหน้า Astro component (build ได้)
├── astro.config.mjs ← config Astro
├── Dockerfile ← multi-stage: pnpm build → nginx serve
├── nginx.conf ← nginx serve static
├── entrypoint.sh ← inject env (GA/form/map) ลง HTML ก่อน serve
├── .env.example ← ตัวแปร env ที่ตั้งได้
└── gen_astro.py ← (utility) regen หน้าใน public/ จาก static clone
│ ├── layouts/Base.astro ← Astro layout
│ └── pages/example.astro ← ตัวอย่างหน้า Astro component
├── server.js ← Express: serve dist/ + inject env (port 4321)
├── astro.config.mjs, package.json
├── Dockerfile ← node build → node server.js
└── .env.example (ตัวอย่าง env)
```
## 🚀 Deploy (Docker / EasyPanel)
```bash
docker build -t mitsu-chaiyaporn .
docker run -d -p 8080:80 mitsu-chaiyaporn
docker run -d -p 8080:4321 mitsu-chaiyaporn
```
EasyPanel: สร้าง Service แบบ Dockerfile → repo นี้ → port **80** → deploy
EasyPanel: สร้าง Service แบบ **Dockerfile** → repo นี้ → **container port = 4321**
→ deploy
**เปลี่ยนโดเมนได้เลย** — ทุก URL เป็น relative path
> ⚠️ **สำคัญ:** ใช้ **`4321`** (ไม่ใช่ 80) — pattern เดียวกับ moreminimore-astroreal
> ที่ deploy ผ่านบน EasyPanel แล้ว
---
## 🧱 ทำไมหน้า content อยู่ใน public/ (ไม่ใช่ src/pages)
หน้าที่ clone มาเป็น **HTML ของ Drupal ดิบ** — ถ้าใส่ใน `src/pages/` Astro จะพยายาม
parse/transform ผ่าน `ultrahtml` และพัง (HTML ที่ไม่สมบูรณ์ของ Drupal)
parse ผ่าน `ultrahtml` และพัง (HTML ไม่สมบูรณ์ของ Drupal)
เลยใช้วิธี: **วาง HTML ใน `public/`** → Astro copy ไป `dist/` ตรงๆ → **output เหมือนต้นฉบับ 100%**
เลยวางใน `public/` → Astro copy ตรงๆ ไป `dist/` → **output เหมือนต้นฉบับ 100%**
**อยากแก้หน้าเป็น Astro component (เพื่อ maintain):**
1. ย้าย HTML หน้าเดิม ออกจาก `public/` (เช่น `public/about-us/`)
2. สร้าง `src/pages/about-us.astro` ที่ใช้ `Base` layout + components
3. build — หน้าใหม่จะมาจาก Astro, หน้าที่เหลือยังเป็น clone ตรงๆ
`server.js` ใช้ Express serve `dist/` + **inject environment variables** ลง HTML ตอนรัน
(แทนที่ `${GA_ID}` `${FORM_EMAIL}` `${GMAP_EMBED}`)
ดูตัวอย่างที่ `src/pages/example.astro` + `src/layouts/Base.astro`
อยากแก้หน้าเป็น Astro component: ย้าย HTML ออกจาก `public/` → สร้าง `src/pages/…astro` → build
ดู `src/pages/example.astro` + `src/layouts/Base.astro`
---
## ✉️ ฟอร์ม + Environment (.env)
ค่าต่าง ๆ กำหนดผ่าน env (inject ที่ startup โดย `entrypoint.sh` + envsubst):
## 🔑 Environment Variables
| ตัวแปร | ค่า default | ความหมาย |
|--------|------------|----------|
| `GA_ID` | *(ว่าง=ปิด)* | Google Analytics / GTM ID |
| `PORT` | `4321` | port ที่ Express ฟัง |
| `GA_ID` | *(ว่าง=ปิด GA)* | Google Analytics / GTM ID |
| `FORM_EMAIL` | `mail@mitsuchaiyaporn.com` | อีเมลรับฟอร์ม RFQ/ติดต่อ (FormSubmit) |
| `GMAP_LAT` / `GMAP_LNG` | `13.557…/100.289…` | พิกัดแผนที่ (แบบฟรี ไม่ต้อง API key) |
| `GMAP_EMBED` | *(จาก lat/lng)* | URL map เต็ม (override ได้) |
| `GMAP_EMBED` | *(จาก lat/lng)* | URL map เต็ม (override) |
EasyPanel: Service → Environment → เพิ่มตัวแปร → Redeploy
```bash
cp .env.example .env
docker run --env-file .env -p 8080:80 mitsu-chaiyaporn
docker run --env "GA_ID=G-XXXX" --env "FORM_EMAIL=a@b.com" -p 8080:4321 mitsu-chaiyaporn
```
> ⚠️ หลังตั้ง `FORM_EMAIL` ต้องยืนยันอีเมลครั้งแรกที่ formsubmit.co
---
## 🔄 Update เว็บจากต้นฉบับ
- `gen_astro.py` (ใช้ static clone ใส่ public/) — แต่หลัก ๆ ให้เอา HTML ล่าสุดจาก
`www.mitsuthailand.com` วางลง `public/` แล้ว `pnpm build`
## 📞 ข้อมูลติดต่อ
- โทร: 034-836-738 ต่อ 9 / 034-422-230 · Line: @823bhcbq · FB: facebook.com/mitsuchaiyaporn
- ที่อยู่: 923/249 ถนนเอกชัย ต.มหาชัย อ.เมืองสมุทรสาคร 74000