kunthawat
eea7c4780e
- Remove 4 stray '&' files (crawl artifact) that duplicated footer/about-us/contactus/root - Replace hardcoded GA id, form email, map src with placeholders (GA_ID, FORM_EMAIL, GMAP_EMBED) - Add entrypoint.sh: envsubst injects env vars into HTML at container startup - Add .env.example + .dockerignore/.gitignore guarding .env secrets - Google Map type A (free embed, no API key) configurable via GMAP_LAT/LNG - Verify: all 39 pages, images (38/home), content blocks (296) match original; 0 missing assets Full clone comparison against www.mitsuthailand.com confirms sections complete.
6.3 KiB
มิตซูชัยพร สมุทรสาคร — เว็บไซต์สแตติก (Static Site)
เว็บโคลนของ www.mitsuthailand.com (บริษัท มิตซูชัยพร จำกัด ศูนย์มิตซูบิชิ สมุทรสาคร) สร้างเป็น static site เพื่อย้ายออกจาก host เดิม (YellowPages / Drupal) ที่จะหมดอายุ โดย โหลดโค้ด + รูปภาพทั้งหมดไว้ในเครื่องแล้ว และปรับ URL ให้เป็น relative / dynamic เพื่อเปลี่ยนโดเมนได้โดยไม่ต้องแก้ไฟล์
📁 โครงสร้าง
.
├── site/ ← ตัวเว็บที่พร้อม deploy (static)
│ ├── index.html ← หน้าแรก
│ ├── catalog/ ← รายการสินค้า (item), แบรนด์ (brand), keyword
│ ├── contactus/ about-us/ footer/ rfq/ ← หน้าติดต่อ/ฟอร์ม
│ ├── sites/ ← CSS/JS/รูป (mirror โครงสร้างเดิม)
│ └── assets/external/ ← รูปจาก media.yellowpages.co.th (โหลดมาแล้ว)
├── Dockerfile ← ใช้ deploy บน EasyPanel/Docker (nginx)
├── nginx.conf ← config nginx (serve static, cache assets)
├── mirror.py common.py rewrite.py ← ตัว crawl + rewrite (ใช้ใหม่เมื่ออยาก update)
└── repair.py ← ซ่อม path อ้างอิงหลัง crawl
🚀 Deploy (Docker / EasyPanel)
Build image แล้วชี้ port 80:
docker build -t mitsu-chaiyaporn .
docker run -d -p 8080:80 mitsu-chaiyaporn
บน EasyPanel: สร้าง Service แบบ Dockerfile → ใส่ path ของ repo นี้ → เลือก Dockerfile
→ deploy ได้เลย (nginx เซิร์ฟ static ใน /usr/share/nginx/html)
เปลี่ยนโดเมนได้เลย — ทุก URL ใน site/ เป็น relative path ทั้งหมด ไม่มีโดเมนตายตัว
(ยกเว้นลิงก์ภายนอก เช่น Line/Facebook/Google Maps ที่ตั้งใจชี้ไปภายนอก)
✉️ ฟอร์มส่งอีเมล + ตัวแปร Environment (.env)
เดิมฟอร์มขอใบเสนอราคา (RFQ) / ติดต่อ ส่งข้อมูลไปยังหลังบ้าน Drupal ที่จะตาย จึงแปลงให้
ส่งเป็น อีเมล ผ่าน FormSubmit.co — และค่าต่างๆ (GA, อีเมล,
Google Map) กำหนดได้ผ่าน environment variables แล้ว (inject ที่ container startup โดย entrypoint.sh)
| ตัวแปร | ค่า default | ความหมาย |
|---|---|---|
GA_ID |
(ว่าง=ปิด GA) | Google Analytics / GTM Measurement ID (เช่น G-XXXX) |
FORM_EMAIL |
mail@mitsuchaiyaporn.com |
อีเมลที่รับฟอร์ม RFQ/ติดต่อ |
GMAP_LAT / GMAP_LNG |
13.55722… / 100.289… |
พิกัดแผนที่ (แบบฟรี ไม่ต้อง API key) |
GMAP_EMBED |
(คำนวณจาก lat/lng) | URL embed Google Map เต็ม (override ได้) |
วิธีใช้บน EasyPanel: ไปที่หน้า Service → Environment/Env → เพิ่มตัวแปรข้างบน
(หรือ copy .env.example ตั้งค่าแล้ว inject) แล้ว Redeploy
วิธีใช้ local/docker:
cp .env.example .env # แก้ค่าตามต้องการ
docker build -t mitsu-chaiyaporn .
docker run --env-file .env -p 8080:80 mitsu-chaiyaporn
⚠️ หลังตั้ง
FORM_EMAILต้องยืนยันอีเมลครั้งแรกที่ formsubmit.co (กดลิงก์ที่ส่งไป) ฟอร์มถึงส่งได้จริง
🔄 Update เว็บใหม่ (เมื่อเนื้อหาบนเว็บเดิมเปลี่ยน)
- รัน mirror ใหม่ (โหลดหน้า + asset ล่าสุด):
PYTHONPATH= python3 mirror.py PYTHONPATH= python3 repair.py - ตรวจ path อ้างอิง (
repair.pyจะแก้ชื่อไฟล์ที่เผื่อไว้เอง) - Commit + push ขึ้น Gitea → deploy
หมายเหตุ: ทำได้เฉพาะตอนต้นทาง (www.mitsuthailand.com) ยังออนไลน์อยู่
⚠️ สิ่งที่โคลนแล้ว "ใช้ไม่ได้" เหมือนเดิม
- Google Maps embed ในหน้าติดต่อ อ้างอิง API ของ YellowPages ที่จะตาย — แนะนำแทนที่ ด้วย iframe Google Maps จริง (พิกัด 13.557229, 100.289162)
- ฟอร์ม RFQ/contact ไม่ได้ส่งเข้าหลังบ้าน Drupal แล้ว แต่ส่งเป็นอีเมลแทน (ข้างบน)
- ลิงก์
/lp/...(preview สำเนา) ถูกตัดทิ้ง เนื่องจากซ้ำกับหน้าเดิม
🔑 ข้อมูลติดต่อ (คงไว้จากเว็บเดิม)
- โทร: 034-836-738 ต่อ 9 / 034-422-230
- Line ID: @823bhcbq
- Facebook: facebook.com/mitsuchaiyaporn
- ที่อยู่: 923/249 ถนนเอกชัย ตำบลมหาชัย อำเภอเมืองสมุทรสาคร สมุทรสาคร 74000
- เปิดบริการ: ศูนย์บริการ จ-ส 08:00-17:00 / ฝ่ายขาย ทุกวัน 08:00-17:00