গাইড
স্ট্যাটিক সাইট — HTML, React, Vue ও অন্যান্য
সাধারণ HTML/CSS/JS ওয়েবসাইট অথবা React, Vue, Angular ও Astro দিয়ে তৈরি ফ্রন্টএন্ড অ্যাপ্লিকেশন — কোনো ব্যাকএন্ড সার্ভার ছাড়াই দ্রুতগতির ওয়েব হোস্টিং।
দুই ধরনের স্ট্যাটিক সাইট
১. সরাসরি প্রস্তুতকৃত ফাইল (Pre-built files): রিপোজিটরিতে সরাসরি index.html, CSS, JS এবং ছবির ফাইল থাকে। এক্ষেত্রে কোনো বিল্ড প্রসেস চলে না; ফাইলগুলো যেভাবে আছে ঠিক সেভাবেই সরাসরি সার্ভ করা হয়।
২. বিল্ড-ভিত্তিক ফ্রন্টএন্ড ফ্রেমওয়ার্ক: আপনার package.json ফাইলে নিচের যেকোনো একটি টুল উল্লেখ থাকলে Meghly স্বয়ংক্রিয়ভাবে npm run build কমান্ড চালায় এবং বিল্ড শেষে তৈরি হওয়া আউটপুট ফোল্ডারটি সার্ভ করে:
| ব্যবহৃত টুল বা ফ্রেমওয়ার্ক | বিল্ড আউটপুট ফোল্ডার |
|---|---|
| Vite (React, Vue, Svelte ইত্যাদি) | dist |
Create React App (react-scripts) | build |
| Vue CLI | dist |
| Angular | dist/<project>/browser |
| Astro | dist |
| Eleventy | _site |
| Gatsby | public |
প্রজেক্টে যদি Next.js (SSR) বা Express-এর মতো নিজস্ব সার্ভার থাকে, তবে সেটি স্ট্যাটিক সাইট নয়—সেক্ষেত্রে দেখুন Node.js গাইড।
সাইট যেভাবে সার্ভ করা হয়
স্ট্যাটিক সাইটগুলো অত্যন্ত হালকা ও দ্রুতগতির nginx সার্ভারে পোর্ট 8080-তে চলে এবং স্বয়ংক্রিয়ভাবে ফ্রি HTTPS ও কাস্টম ডোমেইন সুবিধা পায়।
- সাধারণ HTML সাইটের ক্ষেত্রে: ভিজিটর
/aboutপেজে গেলে সার্ভার প্রথমেabout, এরপরabout/index.htmlএবং সবশেষেabout.htmlফাইল খোঁজে; কোনোটাই না থাকলে404 Not Foundদেখায়। - সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA - যেমন React বা Vue): কোনো নির্দিষ্ট ফাইল খুঁজে না পাওয়া গেলে সার্ভার স্বয়ংক্রিয়ভাবে
index.htmlফাইলটি সার্ভ করে। ফলে React Router বা Vue Router-এর/dashboard/settings-এর মতো রাউটগুলো সরাসরি ব্রাউজারে ওপেন করলে বা পেজ রিফ্রেশ দিলেও কোনো404এরর আসে না। - নিরাপত্তার স্বার্থে ডট (
.) দিয়ে শুরু হওয়া কোনো গোপন ফাইল (যেমন.envবা.git) কখনোই ব্রাউজারে প্রকাশ করা হয় না।
এনভায়রনমেন্ট ভেরিয়েবল ও API সংযোগ
স্ট্যাটিক সাইটে যেহেতু রানটাইমে কোনো ব্যাকএন্ড সার্ভার চলে না, তাই সব এনভায়রনমেন্ট ভেরিয়েবল শুধুমাত্র বিল্ড হওয়ার সময়ই (Build time) কোডের ভেতরে যুক্ত হয়। যেমন Vite ব্যবহার করলে ভেরিয়েবলের নাম VITE_ দিয়ে শুরু হতে হয়:
VITE_API_URL=https://api.example.comconst api = import.meta.env.VITE_API_URL;ভেরিয়েবলের মান পরিবর্তন করলে তা কার্যকর করার জন্য অ্যাপটি পুনরায় ডিপ্লয় করতে হবে; শুধুমাত্র রিস্টার্ট দিলে নতুন মান যুক্ত হবে না।
বিল্ডের সময় ফ্রন্টএন্ড কোডে যে ভেরিয়েবলগুলো যুক্ত হয়, সেগুলো ব্রাউজারের Inspect টুল থেকে যে কেউ দেখতে পারে। তাই পেমেন্ট গেটওয়ে বা ডেটাবেসের মতো কোনো গোপন সিক্রেট কি (Secret Key) কখনোই স্ট্যাটিক সাইটের ভেরিয়েবলে রাখবেন না—সেগুলো সবসময় আপনার ব্যাকএন্ড API সার্ভারে রাখুন।
ফ্রন্টএন্ড ও ব্যাকএন্ড আলাদা অ্যাপ হিসেবে চালানো
আপনার ফ্রন্টএন্ড এবং ব্যাকএন্ড API যদি দুটি আলাদা প্রজেক্ট হয়, তবে দুটিকেই Meghly-তে আলাদা অ্যাপ হিসেবে ডিপ্লয় করতে পারেন: যেমন React ফ্রন্টএন্ডটি www.example.com-এ এবং ব্যাকএন্ড API-টি (Node.js, Python বা .NET) api.example.com-এ। এক্ষেত্রে শুধু ব্যাকএন্ড API-এর CORS সেটিংসে আপনার ফ্রন্টএন্ড ডোমেইনটিকে অনুমতি (Allow) দিয়ে রাখুন।
সচরাচর সমস্যা ও সমাধান
| যে সমস্যা বা এরর দেখছেন | কারণ ও সমাধান |
|---|---|
ভেতরের কোনো পেজ রিফ্রেশ দিলে 404 দেখায় | আপনার package.json ফাইলে ওপরের তালিকার কোনো বিল্ড টুল যুক্ত আছে কি না তা নিশ্চিত করুন—বিল্ড টুল শনাক্ত হলেই কেবল SPA fallback চালু হয়। |
| ব্রাউজারে সাদা পেজ আসে এবং কনসোলে ফাইল পাওয়া যায় না | Vite-এর base অথবা Create React App-এর homepage সেটিংস ভুল আছে। মূল ডোমেইনে সাইট চালালে এর মান / রাখুন। |
| ভেরিয়েবল বদলানোর পরও পুরনো API অ্যাড্রেসে রিকোয়েস্ট যাচ্ছে | VITE_ বা বিল্ড-টাইম ভেরিয়েবল পরিবর্তন করার পর অ্যাপে নতুন ডিপ্লয় দিন। |
আটকে গেছেন?
আমাদের ইঞ্জিনিয়ারদের সাথে সরাসরি কথা বলুন — ফোন বা ইমেইলে, বাংলায়।