ওয়েবসাইট বা অ্যাপ ডিপ্লয়ের পর 404 এরর কীভাবে ঠিক করবেন

আপনার অ্যাপ লোকালে ঠিক চললেও ডিপ্লয়ের পর পেজ 404 দিলে সবচেয়ে সাধারণ কারণ হলো সিঙ্গেল-পেজ অ্যাপ (SPA) রাউটিংয়ের অনুপস্থিতি: সার্ভার /dashboard নামের একটি ফাইল খোঁজে যা নেই, কারণ ওই রুটটি শুধু JavaScript-এর ভেতরে থাকে। সমাধান হলো অ্যাপ রুটের জন্য index.html পাঠানোর একটি ফলব্যাক নিয়ম। অন্য কারণগুলো হলো বিল্ড আউটপুটে ফাইল না থাকা, কেস-সেনসিটিভ পাথ, ট্রেইলিং স্ল্যাশের পার্থক্য, ভুল বেস পাথ, আর এমন API রুট যা কখনো ডিপ্লয় হয়নি।

শুরু করুন ঠিক কোন URL-টি 404 দিচ্ছে এবং আপনি সেখানে কীভাবে পৌঁছালেন তা লক্ষ্য করে। প্যাটার্নটিই সরাসরি কারণ দেখিয়ে দেয়।

ধাপ ১: প্যাটার্ন খুঁজুন

আসল স্ট্যাটাস কোড দেখতে ডেভেলপার টুল খুলুন (ডান ক্লিক → Inspect), Network ট্যাবে যান, রিলোড করুন, আর প্রথম রিকোয়েস্টের স্ট্যাটাস দেখুন।

ধাপ ২: SPA ফলব্যাক যোগ করুন

এটি ক্লাসিক সমস্যা। React, Vue বা Svelte-এর সিঙ্গেল-পেজ অ্যাপে সার্ভারে হাতে গোনা কয়েকটি আসল ফাইল থাকে: index.html আর কিছু JavaScript ও CSS। /dashboard বা /projects/42-এর মতো রুট ব্রাউজারের রাউটার সামলায়।

• লিংকে ক্লিক কাজ করে: রাউটার URL বদলে সার্ভারকে না জিজ্ঞেস করেই নতুন পেজ আঁকে।
• রিফ্রেশ বা সরাসরি লিংক খোলা ব্যর্থ হয়: ব্রাউজার সার্ভারের কাছে /dashboard চায়, সেখানে এমন ফাইল নেই, আর সে 404 ফেরত দেয়।

সমাধান হলো এমন একটি নিয়ম: অনুরোধ যদি কোনো আসল ফাইলের সঙ্গে না মেলে, তবে 200 স্ট্যাটাসসহ index.html পাঠাও, আর রাউটারকে দায়িত্ব নিতে দাও। এটি কীভাবে যোগ করবেন তা হোস্টের ওপর নির্ভর করে (বিবরণ বদলায়, তাই হোস্টের বর্তমান ডকস দেখুন):

নিশ্চিত করুন নিয়মটি আসল ফাইলকে গিলে না ফেলে: /assets/app.js-এর অনুরোধ এখনও JavaScript ফাইলই ফেরত দিতে হবে। যদি তার বদলে index.html আসে, তবে ফাঁকা পেজ আর "Failed to load module script" ত্রুটি দেখবেন। দেখুন ফাঁকা সাদা পেজ ঠিক করার উপায়।

এছাড়া রাউটারে একটি catch-all রুট দিন, যাতে কোনো পেজের সঙ্গে না মেলা URL কিছুই না দেখিয়ে একটি বন্ধুত্বপূর্ণ "Page not found" দেখায়।

সার্ভার সেটিংস বদলাতে না পারলে হ্যাশ রাউটিং (/#/dashboard-এর মতো URL) সমস্যাটি এড়ায়, কারণ #-এর পরের অংশ কখনো সার্ভারে যায় না। এটি একটি বিকল্প, প্রথম পছন্দ নয়: URL দেখতে কম সুন্দর এবং সার্চ ইঞ্জিনের জন্য কম বন্ধুত্বপূর্ণ।

সার্ভারে বা বিল্ড সময়ে পেজ তৈরি করা ফ্রেমওয়ার্ক (Next.js, Astro ও এর মতো) সাধারণত প্রতিটি পেজের জন্য আসল ফাইল বা সার্ভার রুট রাখে, তাই সেখানে এই নির্দিষ্ট সমস্যা কম দেখা যায়। তাদের সমতুল্য সমস্যা হলো বিল্ড সময়ে তৈরি না হওয়া পেজ।

ধাপ ৩: আসলে কী ডিপ্লয় হয়েছে তা যাচাই করুন

সবকিছু 404 দিলে সার্ভার সম্ভবত আপনার বিল্ট অ্যাপ পরিবেশন করছে না।

• সঠিক ফোল্ডার। হোস্টকে বিল্ড আউটপুট প্রকাশ করতে হবে (Vite-এর জন্য সাধারণত dist, Create React App-এর জন্য build, স্ট্যাটিক Next.js এক্সপোর্টের জন্য out), প্রজেক্টের রুট নয়।
• বিল্ড চলেছে। ডিপ্লয় লগ পড়ুন। বিল্ড ব্যর্থ হলে হোস্ট হয়তো কিছুই ডিপ্লয় করেনি, অথবা একটি পুরনো ভার্সন করেছে।
• index.html প্রকাশিত ফোল্ডারের উপরের স্তরে থাকতে হবে, কোনো সাব-ফোল্ডারে নয়।
• বেস পাথ মেলে। অ্যাপটি যদি example.com/app/-এ পরিবেশিত হয়, তবে সেই বেস দিয়ে বিল্ড করতে হবে (Vite-এর base, React Router-এর basename), নইলে প্রতিটি রুট ও অ্যাসেট মিস হবে।

ধাপ ৪: অনুপস্থিত ফাইল ও ভুল পাথ ঠিক করুন

পেজ লোড হলেও অ্যাসেট 404 দিলে:

• কেস সেনসিটিভিটি। macOS ও Windows সাধারণত Logo.png আর logo.png-কে একই ফাইল ধরে। বেশিরভাগ Linux সার্ভার তা করে না। প্রতিটি রেফারেন্স আসল ফাইলের নামের সঙ্গে হুবহু মেলান।
• বিল্ডের বাইরের ফাইল। Vite-এ public/-এর ফাইল যেমন আছে তেমন কপি হয় এবং রুট থেকে রেফারেন্স হয় (/logo.png)। কোডে ইমপোর্ট করা ফাইল বান্ডেলে যায়। প্রজেক্টের অন্য কোথাও থাকা ফাইল হয়তো আদৌ ডিপ্লয় হয় না।
• আপেক্ষিক পাথ। images/photo.jpg বর্তমান URL-এর সাপেক্ষে ধরা হয়, তাই /blog/post-1-এ ভেঙে যায়। /images/photo.jpg ব্যবহার করুন।
• আপলোড করা ফাইল লোকাল ডিস্কে সংরক্ষিত। ব্যবহারকারীদের আপলোড সার্ভারের নিজের ফোল্ডারে লেখা থাকলে নতুন ভার্সন ডিপ্লয় হলে তা হারিয়ে যায়। সঠিক ফাইল স্টোরেজ ব্যবহার করুন।

ধাপ ৫: ট্রেইলিং স্ল্যাশ ধারাবাহিকভাবে সামলান

/about আর /about/ আলাদা URL। হোস্টগুলো স্ল্যাশ যোগ বা বাদ দেওয়ায় আলাদা, আর আপনার লিংক বা রাউটারের সঙ্গে অমিল হলে 404 বা রিডাইরেক্ট লুপ হতে পারে। একটি স্টাইল বেছে নিন, লিংকগুলো সেটিই ব্যবহার করুক, এবং হোস্টকে অন্য রূপটি এটিতে রিডাইরেক্ট করতে কনফিগার করুন। ধারাবাহিকতা সার্চ ইঞ্জিনকেও সাহায্য করে, যারা নইলে প্রতিটি পেজের দুটি কপি দেখতে পারে।

ধাপ ৬: 404 দেওয়া API রুট ঠিক করুন

পেজ লোড হলেও Network ট্যাবে /api/... রিকোয়েস্ট 404 দেখালে:

• ব্যাকএন্ড ডিপ্লয় হয়নি। স্ট্যাটিক হোস্ট শুধু ফাইল পরিবেশন করে; ব্যাকএন্ডকে কোথাও চলতে হবে।
• প্রোডাকশনে পাথ ভিন্নভাবে রাউট হয়। ডেভেলপমেন্টে একটি প্রক্সি /api-কে আলাদা সার্ভারে পাঠাতে পারে। প্রোডাকশনে হোস্টের সমতুল্য rewrite লাগবে, অথবা ফ্রন্ট এন্ডকে API-র আসল ঠিকানায় কল করতে হবে।
• SPA ফলব্যাক সেটিকে ধরে ফেলেছে। একটি API রিকোয়েস্ট যদি 200 স্ট্যাটাসে index.html ফেরত দেয়, তবে ফলব্যাক নিয়মটি অনেক বিস্তৃত। সেখানে /api/*-কে বাদ দিন।

প্রকাশিত অ্যাপের /api/orders-এর রিকোয়েস্ট 404 দিচ্ছে, কিন্তু প্রিভিউতে কাজ করে। প্রিভিউ আর প্রকাশিত অ্যাপে /api কীভাবে রাউট হচ্ছে তা মিলিয়ে দেখুন, এবং প্রকাশিত ফ্রন্ট এন্ড যেন ব্যাকএন্ডে একইভাবে পৌঁছায় তা নিশ্চিত করুন।

ধাপ ৭: পুরনো URL রিডাইরেক্ট করুন

অন্য সাইট থেকে সরে এলে বা কাঠামো বদলালে মানুষ ও সার্চ ইঞ্জিন যে পুরনো URL এখনও ব্যবহার করে, সেগুলো 404 দেবে। প্রতিটি পুরনো URL থেকে নতুন ঠিকানায় একটি 301 (স্থায়ী) রিডাইরেক্ট যোগ করুন। একটি তালিকা রাখুন এবং লঞ্চের পর নমুনা পরীক্ষা করুন। সেই তালিকা বানাতে আমাদের WordPress সাইট স্থানান্তরের গাইড সাহায্য করবে।

ধাপ ৮: ডোমেইন যাচাই করুন

অ্যাপ হোস্টের ঠিকানায় কাজ করলেও কাস্টম ডোমেইনে 404 দিলে ডোমেইনটি হয়তো ভুল প্রোজেক্টের দিকে নির্দেশ করছে, অথবা হোস্টের সাইটে ডোমেইনটি এখনো যুক্ত হয়নি। DNS রেকর্ড আর হোস্টের ডোমেইন সেটিংস দেখুন। দেখুন কাস্টম ডোমেইন কীভাবে যুক্ত করবেন।

আপনার আসল 404 পেজটি কার্যকর করুন

কিছু 404 সঠিক: কেউ URL ভুল লিখেছে। সেই পেজটিকে সহায়ক করুন:

• একটি ছোট বার্তা আর হোম পেজ ও মূল বিভাগের লিংক
• সাইটে সার্চ থাকলে একটি সার্চ বক্স
• বাকি সাইটের মতো একই হেডার ও নেভিগেশন

আপনার সেটআপ অনুমতি দিলে যেসব পেজ নেই তার জন্য সত্যিকারের 404 স্ট্যাটাস ফেরত দিন। 200 স্ট্যাটাসে আসা "not found" বার্তাকে সার্চ ইঞ্জিন বলে সফট 404, যা তাদের ক্রল সময় নষ্ট করে এবং ইন্ডেক্সিং বিভ্রান্ত করতে পারে।

সাধারণ ভুলগুলো

• শুধু ক্লিক করে পরীক্ষা করা। সবসময় গভীর URL একটি নতুন ট্যাবে পেস্ট করে রিফ্রেশ করে পরীক্ষা করুন।
• সবকিছু ধরে ফেলা ফলব্যাক। অ্যাসেট ও API রুট index.html ফেরত দেয়, যা ফাঁকা পেজ আর বিভ্রান্তিকর API ত্রুটির কারণ।
• অমিল বড়হাতের/ছোটহাতের অক্ষর, যা শুধু সার্ভারে ভাঙে।
• বিল্ড আউটপুটের বদলে সোর্স ফোল্ডার ডিপ্লয় করা।
• রিডাইরেক্ট ছাড়া URL পুনর্গঠন। প্রতিটি পুরনো লিংক একটি 404 হয়ে যায়।

Mythex-এ 404

Mythex-এ আপনি ওয়ার্কস্পেস থেকে প্রকাশ করেন, আর স্ট্যাটিক ফ্রন্ট এন্ড স্ট্যাটিক সাইট হিসেবে ডিপ্লয় হয়। প্রকাশিত কোনো পেজ 404 দিলে এজেন্টকে সঠিক URL দিন, বলুন রিফ্রেশে হচ্ছে না ক্লিকে, আর Network ট্যাবে কী দেখাচ্ছে তা জানান, এবং রাউটিং যাচাই করতে বলুন। ঠিক করার পর আবার প্রকাশ করুন, কারণ আপনি নতুন করে প্রকাশ না করা পর্যন্ত লাইভ অ্যাপ একটি স্ন্যাপশট। সম্প্রতি প্রজেক্ট বদলে লাইভ সাইট পুরনো লাগলে আবার প্রকাশ করুন ও হার্ড-রিফ্রেশ দিন। বিল্ড ব্যর্থ হলে প্রকাশের ডায়ালগে Fix with AI ব্যবহার করুন। ডকসে দেখুন কীভাবে প্রকাশ করবেন এবং প্রকাশের সমস্যা সমাধান, আর আমাদের গাইড AI দিয়ে বানানো অ্যাপের ডিবাগ করা।

404 চেকলিস্ট

• ঠিক কোন URL 404 দিচ্ছে এবং ক্লিকে, রিফ্রেশে, না দুটোতেই তা নোট করা
• SPA ফলব্যাক অ্যাপ রুটের জন্য 200 স্ট্যাটাসসহ index.html দেয়
• ফলব্যাক আসল ফাইল ও /api/*-কে বাদ দেয়
• রাউটারে একটি catch-all "not found" রুট আছে
• প্রকাশিত ফোল্ডার বিল্ড আউটপুটের, এবং বিল্ড সফল হয়েছে
• বেস পাথ যেখানে অ্যাপ পরিবেশিত হচ্ছে তার সঙ্গে মেলে
• ফাইলের নামের বড়হাতের/ছোটহাতের অক্ষর প্রতিটি রেফারেন্সের সঙ্গে মেলে
• অ্যাসেট পাথ / দিয়ে শুরু হয়
• ট্রেইলিং স্ল্যাশের ধরন ধারাবাহিক
• API রুট প্রোডাকশনে ডিপ্লয় ও রাউট হয়েছে
• পুরনো URL-এর জন্য 301 রিডাইরেক্ট আছে
• গভীর লিংকগুলো নতুন ট্যাবে পেস্ট করে পরীক্ষা করা হয়েছে

প্রশ্নোত্তর