Vercel-এ AI দিয়ে বানানো ওয়েবসাইট hosting করার নিয়ম

ওয়েবসাইট বানানো শেষ হলেই কাজ শেষ হয় না। যতক্ষণ না সেটা ইন্টারনেটে লাইভ হয়ে সবাই দেখতে পাচ্ছে, ততক্ষণ সেটা শুধু আপনার কম্পিউটারে বসে থাকা একটা ফোল্ডার। আগের লেখায় landing page বানানোর যে ধাপগুলো দেখানো হয়েছিল, সেই কাজ শেষ হওয়ার পর স্বাভাবিক পরের ধাপ হলো hosting। Vercel এখন এই কাজের জন্য সবচেয়ে বেশি ব্যবহৃত প্ল্যাটফর্মগুলোর একটা, বিশেষ করে যেসব সাইট Next.js বা React দিয়ে বানানো।

Vercel কেন

Vercel-এর সবচেয়ে বড় সুবিধা হলো এটা GitHub-এর সাথে সরাসরি যুক্ত হয়ে কাজ করে। আপনি কোড GitHub-এ রাখলে, Vercel সেই কোড থেকে নিজে থেকেই সাইট বিল্ড করে ইন্টারনেটে পাবলিশ করে দেয়। এরপর যতবার কোডে পরিবর্তন এনে GitHub-এ পাঠাবেন, Vercel নিজে থেকেই নতুন ভার্সন লাইভ করে দেবে, আলাদা করে কোনো আপলোড করার দরকার পড়ে না।

ধাপ ১: কোড GitHub-এ রাখা

সবার আগে দরকার একটা GitHub অ্যাকাউন্ট আর সেখানে একটা রিপোজিটরি। আপনার প্রজেক্টের কোড যদি এখনো শুধু নিজের কম্পিউটারে থাকে, সেটা GitHub-এ পুশ করতে হবে। Claude Code ব্যবহার করলে এই কাজেও সাহায্য চাওয়া যায়, "এই প্রজেক্টটা GitHub-এ পুশ করতে যা যা করতে হবে সেগুলো ধাপে ধাপে করো" বললে বাকিটা নিজেই সামলে নেয়।

ধাপ ২: Vercel অ্যাকাউন্ট বানানো আর প্রজেক্ট ইমপোর্ট করা

vercel.com-এ গিয়ে GitHub অ্যাকাউন্ট দিয়ে সাইন আপ করা যায়, আলাদা পাসওয়ার্ড মনে রাখার দরকার নেই। সাইন আপের পর "Add New Project" থেকে GitHub-এর সেই রিপোজিটরিটা বেছে নিতে হয় যেটা আগে বানানো হয়েছিল। Vercel বেশিরভাগ ক্ষেত্রে নিজে থেকেই বুঝে নেয় প্রজেক্টটা কী দিয়ে বানানো, Next.js, React, নাকি অন্য কিছু, আর সেই অনুযায়ী বিল্ড সেটিংস ঠিক করে দেয়।

ধাপ ৩: এনভায়রনমেন্ট ভ্যারিয়েবল বসানো

যদি প্রজেক্টে ডাটাবেস কানেকশন, API কী, বা এই ধরনের কোনো গোপন তথ্য থাকে, সেগুলো কোডের ভেতরে সরাসরি না লিখে এনভায়রনমেন্ট ভ্যারিয়েবল হিসেবে রাখা হয়। Vercel-এর প্রজেক্ট সেটিংসে একটা আলাদা জায়গা থাকে এই ভ্যারিয়েবলগুলো বসানোর জন্য। লোকাল কম্পিউটারে .env ফাইলে যা যা রাখা ছিল, সেই একই তথ্য এখানেও বসাতে হয়, নাহলে সাইট লাইভ হলেও কিছু ফিচার কাজ করবে না।

ধাপ ৪: Deploy করা আর যাচাই করা

সব ঠিকঠাক থাকলে "Deploy" বাটনে ক্লিক করলেই Vercel বিল্ড প্রসেস শুরু করে, আর কয়েক মিনিটের মধ্যে একটা লিংক দেয় যেখানে সাইটটা লাইভ দেখা যায়। প্রথমবার এই লিংকটা হয় vercel.app দিয়ে শেষ হওয়া একটা সাবডোমেইন। বিল্ড ফেইল করলে Vercel এরর লগ দেখায়, যেটা কপি করে Claude-কে দিয়ে জিজ্ঞেস করলে সমস্যাটা কী সেটা বুঝতে সুবিধা হয়।

ধাপ ৫: নিজের ডোমেইন যুক্ত করা

vercel.app সাবডোমেইনের বদলে নিজের ডোমেইন, যেমন yourcompany.com, ব্যবহার করতে চাইলে, প্রজেক্ট সেটিংসের Domains অংশে গিয়ে ডোমেইনটা যোগ করতে হয়। এরপর যেখান থেকে ডোমেইন কেনা হয়েছে, সেখানে গিয়ে Vercel-এর দেওয়া DNS রেকর্ডগুলো বসাতে হয়। এই পরিবর্তন কার্যকর হতে কিছুক্ষণ থেকে কয়েক ঘণ্টা সময় লাগতে পারে।

প্রতিটা পুশে একটা প্রিভিউ লিংক

Vercel-এর একটা কাজের জিনিস হলো, GitHub-এ কোনো পরিবর্তন পুশ করলে সেটা সরাসরি প্রোডাকশনে, মানে মূল লাইভ সাইটে, না গিয়ে একটা আলাদা প্রিভিউ লিংকে দেখা যায়, যদি আপনি একটা আলাদা ব্রাঞ্চে কাজ করেন। এতে করে বড় কোনো পরিবর্তন লাইভ সাইটে দেওয়ার আগে আলাদাভাবে যাচাই করে নেওয়া যায়, মূল সাইট স্পর্শ না করেই।

কিছু ভুল হলে আগের ভার্সনে ফিরে যাওয়া

কোনো নতুন deploy-এর পর যদি দেখা যায় সাইটে কিছু একটা ভেঙে গেছে, Vercel-এর ড্যাশবোর্ড থেকে আগের কোনো সফল deployment-এ সহজেই ফিরে যাওয়া যায়। এই ফিচারটা জানা থাকলে নতুন কোনো পরিবর্তন লাইভ করার সময় দুশ্চিন্তা কম হয়, কারণ কিছু ভুল হলেও কয়েক ক্লিকেই আগের কার্যকর অবস্থায় ফেরা সম্ভব।

লগ দেখে সমস্যা বোঝা

সাইট লাইভ হওয়ার পরেও মাঝে মাঝে কোনো নির্দিষ্ট ফিচার হঠাৎ কাজ করা বন্ধ করে দিতে পারে, যদিও লোকালে ঠিকঠাক চলেছিল। Vercel-এর ড্যাশবোর্ডে "Logs" নামের একটা অংশ থাকে, যেখানে সার্ভারে ঠিক কী ঘটছে তার একটা রেকর্ড দেখা যায়। কোনো ফিচার লাইভে কাজ না করলে এখানে গিয়ে দেখলে প্রায়ই আসল কারণটা বোঝা যায়, আর সেই লগের অংশটুকু কপি করে Claude-কে দিলে সমাধান খুঁজে বের করা সহজ হয়।

টিমের সাথে কাজ করলে

একা কাজ করার পাশাপাশি, একাধিক মানুষ মিলে একটা প্রজেক্টে কাজ করলে Vercel-এ প্রজেক্টে অন্যদের যোগ করার সুযোগ থাকে, যাতে সবাই একই ড্যাশবোর্ড থেকে deployment দেখতে আর পরিচালনা করতে পারে। ছোট প্রজেক্টে এটা হয়তো এখনই দরকার নেই, কিন্তু ভবিষ্যতে টিম বড় হলে এই ফিচারটা জানা থাকা ভালো।

যা নতুনদের প্রায়ই বিভ্রান্ত করে

বিল্ড এরর দেখে অনেকে ঘাবড়ে যান, কিন্তু বেশিরভাগ সময় এরর মেসেজেই সমস্যাটা কোথায় লেখা থাকে। পুরো এরর মেসেজ কপি করে Claude Code-কে দিলে সাধারণত দ্রুত সমাধান পাওয়া যায়।

আরেকটা সাধারণ ভুল হলো এনভায়রনমেন্ট ভ্যারিয়েবল বসাতে ভুলে যাওয়া। সাইট বিল্ড হয়ে লাইভও হয়ে যায়, কিন্তু লগইন বা ডাটাবেস সংক্রান্ত ফিচার কাজ করে না, তখন প্রথমে চেক করা উচিত এনভায়রনমেন্ট ভ্যারিয়েবলগুলো ঠিকমতো বসানো হয়েছে কিনা।

খরচ নিয়ে সংক্ষিপ্ত ধারণা

ছোট বা ব্যক্তিগত প্রজেক্টের জন্য Vercel-এর একটা ফ্রি প্ল্যান আছে, যা দিয়ে শুরু করা যায় কোনো খরচ ছাড়াই। প্রজেক্ট বড় হতে থাকলে, বেশি ট্রাফিক বা বেশি রিসোর্স লাগলে পেইড প্ল্যানের দরকার পড়তে পারে। সঠিক দাম আর লিমিট সময়ের সাথে বদলাতে পারে, তাই এই বিষয়ে সবশেষ তথ্যের জন্য Vercel-এর নিজস্ব প্রাইসিং পেজ দেখে নেওয়াই ভালো।

Preview আর Production এনভায়রনমেন্ট আলাদা রাখা

একটা জিনিস অনেক নতুন ব্যবহারকারী প্রথমদিকে খেয়াল করেন না, Vercel-এ চাইলে প্রোডাকশন সাইট আর প্রিভিউ ডিপ্লয়মেন্টের জন্য আলাদা এনভায়রনমেন্ট ভ্যারিয়েবল রাখা যায়। যেমন টেস্ট করার জন্য একটা আলাদা ডাটাবেস ব্যবহার করতে চাইলে, সেই কানেকশন স্ট্রিং শুধু প্রিভিউ এনভায়রনমেন্টে বসিয়ে রাখা যায়, যাতে টেস্টের সময় ভুলবশত আসল প্রোডাকশন ডাটাবেসে কোনো পরিবর্তন না ঘটে। শুরুতে এই আলাদা করার দরকার নাও লাগতে পারে, কিন্তু প্রজেক্ট বড় হতে থাকলে এই বিভাজনটা অনেক ভুল থেকে বাঁচায়।

সার্ভারলেস ফাংশন আর API রুট নিয়ে ধারণা

Next.js দিয়ে বানানো সাইটে যদি নিজস্ব API রুট থাকে, যেমন ফর্ম সাবমিট হলে ডাটাবেসে সেভ করা বা কোনো তৃতীয় পক্ষের সার্ভিসের সাথে যোগাযোগ করা, তাহলে Vercel সেগুলোকে সার্ভারলেস ফাংশন হিসেবে চালায়। এর মানে হলো প্রতিটা রিকোয়েস্টের সময়ই শুধু সেই কোডটুকু চলে, আলাদা করে একটা সার্ভার চালু রাখার দরকার পড়ে না। বেশিরভাগ সময় এই পুরো ব্যাপারটা পেছনে নিজে থেকেই ঘটে, আলাদা করে কিছু সেটআপ করতে হয় না, তবে API রুট হঠাৎ ধীর হয়ে গেলে বা টাইমআউট এরর দেখালে বোঝা দরকার যে সমস্যাটা সার্ভারলেস ফাংশনের ভেতরের কোনো ধীর অপারেশনের কারণে হতে পারে, যেমন একটা ডাটাবেস কোয়েরি যেটা অনেক বেশি সময় নিচ্ছে।

সিকিউরিটি নিয়ে সাধারণ কিছু সতর্কতা

hosting নিয়ে কাজ করার সময় কিছু সাধারণ নিরাপত্তা অভ্যাস মেনে চলা জরুরি। API কী বা ডাটাবেস পাসওয়ার্ডের মতো সংবেদনশীল তথ্য কখনোই সরাসরি কোডে লিখে GitHub-এ পুশ করা উচিত না, এগুলো সবসময় এনভায়রনমেন্ট ভ্যারিয়েবলে রাখতে হয়। যদি ভুলবশত কোনো সংবেদনশীল তথ্য কোডে লেখা হয়ে GitHub-এ চলে যায়, শুধু সেই লাইন মুছে ফেললেই যথেষ্ট না, কারণ সেটা এখনো কমিট হিস্ট্রিতে থেকে যায়, সেক্ষেত্রে সেই কী বা পাসওয়ার্ডটা নতুন করে জেনারেট করে বদলে ফেলাই সবচেয়ে নিরাপদ পদ্ধতি। Claude-কে জিজ্ঞেস করলে এই ধরনের পরিস্থিতিতে কী করণীয় সেটাও ধাপে ধাপে বুঝিয়ে দিতে পারে।

অন্য হোস্টিং অপশনের সাথে সংক্ষিপ্ত তুলনা

Vercel ছাড়াও Netlify, Cloudflare Pages, বা নিজস্ব VPS সার্ভারের মতো আরও অনেক অপশন আছে ওয়েবসাইট hosting করার জন্য। প্রতিটার নিজস্ব কিছু সুবিধা-অসুবিধা আছে, আর কোনটা সবচেয়ে ভালো সেটা প্রজেক্টের ধরন আর ব্যবহারের অভিজ্ঞতার উপর নির্ভর করে। Next.js দিয়ে বানানো প্রজেক্টের জন্য Vercel-কে বেছে নেওয়ার একটা সহজ কারণ হলো, দুটোই একই কোম্পানির তৈরি, তাই নতুন কোনো Next.js ফিচার এলে সেটা Vercel-এ সবচেয়ে মসৃণভাবে কাজ করার সম্ভাবনা বেশি। তবে অন্য প্ল্যাটফর্মগুলোও এখন Next.js ভালোভাবেই সাপোর্ট করে, তাই একেবারে ভুল কোনো পছন্দ বলে কিছু নেই, নিজের প্রয়োজন আর পরিচিতি অনুযায়ী বেছে নেওয়াই স্বাভাবিক।

ডিপ্লয়মেন্ট নোটিফিকেশন সেটআপ করা

প্রতিবার কোড পুশ করার পর ডিপ্লয়মেন্ট সফল হলো নাকি ব্যর্থ হলো সেটা জানার জন্য বারবার ড্যাশবোর্ডে গিয়ে চেক করার দরকার নেই। Vercel-এর প্রজেক্ট সেটিংসে নোটিফিকেশন যোগ করার সুযোগ থাকে, ইমেইলে বা টিমের কোনো চ্যাট চ্যানেলে, যাতে ডিপ্লয়মেন্ট ফেইল করলে সাথে সাথে জানা যায়। একা কাজ করলে এটা হয়তো খুব জরুরি মনে হবে না, কিন্তু নিয়মিত কোড পুশ করলে এই ছোট সেটআপটা মাঝে মাঝে বড় সময় বাঁচায়, কারণ কোনো ভাঙা ডিপ্লয়মেন্ট অনেকক্ষণ ধরে অলক্ষ্যে থেকে যাওয়ার সম্ভাবনা কমে।

একাধিক প্রজেক্ট একসাথে পরিচালনা করা

একজন ব্যবহারকারীর একাধিক প্রজেক্ট থাকলে, যেমন একটা মূল ওয়েবসাইট আর তার পাশাপাশি একটা landing page বা একটা ছোট টুল, সবগুলো একই Vercel অ্যাকাউন্ট থেকে আলাদা আলাদা প্রজেক্ট হিসেবে ম্যানেজ করা যায়। প্রতিটা প্রজেক্টের নিজস্ব ডোমেইন, এনভায়রনমেন্ট ভ্যারিয়েবল, আর ডিপ্লয়মেন্ট হিস্ট্রি থাকে, একটার সাথে আরেকটা মিলে যাওয়ার কোনো ঝুঁকি নেই। এই কাঠামোটা বোঝা থাকলে ভবিষ্যতে নতুন কোনো প্রজেক্ট শুরু করা, বা পুরনো কোনো প্রজেক্ট বন্ধ করে দেওয়া, দুটোই সহজ মনে হয়।

কাস্টম ৪০৪ পেজ বানানো

সাইটের কোনো লিংক ভাঙা থাকলে বা ভিজিটর ভুল URL-এ চলে গেলে ডিফল্ট একটা সাদামাটা ৪০৪ পেজ দেখানোর বদলে নিজের ব্র্যান্ডের সাথে মিলিয়ে একটা কাস্টম ৪০৪ পেজ বানিয়ে রাখা যায়, যেখানে হোমপেজে ফিরে যাওয়ার একটা বাটন থাকবে। এটা কোনো বাধ্যতামূলক ধাপ না, কিন্তু ছোট এই কাজটা করা থাকলে ভুল লিংকে ঢুকে পড়া ভিজিটরও সাইট থেকে পুরোপুরি হারিয়ে না গিয়ে আবার সঠিক পেজে ফিরে আসতে পারেন। Claude-কে বললে সহজেই একটা সাধারণ কাস্টম ৪০৪ পেজ বানিয়ে দিতে পারে, যা Vercel-এ অন্য যেকোনো পেজের মতোই স্বয়ংক্রিয়ভাবে ডিপ্লয় হয়ে যায়। একইভাবে সার্ভারে কোনো অপ্রত্যাশিত এরর হলে একটা সাধারণ ৫০০ এরর পেজও বানিয়ে রাখা যায়, যাতে হঠাৎ কোনো সমস্যা হলেও ভিজিটর অন্তত বুঝতে পারেন কী ঘটেছে, একটা ফাঁকা সাদা স্ক্রিনের বদলে।

deploy করার পর

সাইট লাইভ হওয়ার পর থেকে GitHub-এ যেকোনো পরিবর্তন পুশ করলেই Vercel নিজে থেকে নতুন ভার্সন বিল্ড করে আপডেট করে দেয়। এর মানে হলো একবার এই সেটআপ ঠিকমতো করে ফেললে, পরবর্তী প্রতিটা পরিবর্তনের জন্য আলাদা করে hosting নিয়ে চিন্তা করতে হয় না, শুধু কোড পাঠালেই হয়।

সম্পূর্ণ প্রক্রিয়া, ওয়েবসাইট বানানো থেকে hosting পর্যন্ত, হাতে-কলমে শেখানো হয় এই কোর্সে।