React হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা ইন্টার্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে ব্যবহৃত হয়। অন্যদিকে, Vite হল একটি আধুনিক বিল্ড টুল যা অত্যন্ত দ্রুত এবং কার্যকর অ্যাপ তৈরি করতে সহায়তা করে। Vite এর সাহায্যে React অ্যাপ্লিকেশন ডেভেলপ করা সহজ এবং হালকা। এই নিবন্ধে, আমরা কিভাবে একটি Vite-ভিত্তিক React অ্যাপ প্রোডাকশনে ডিপ্লয় করা যায় তা শিখব। আমরা বিশেষভাবে Netlify, Vercel, এবং DigitalOcean প্ল্যাটফর্মগুলোতে ডিপ্লয় করা নিয়ে আলোচনা করব।
১. React + Vite প্রজেক্ট সেটআপ
আপনার প্রথম পদক্ষেপ হলো একটি React + Vite প্রজেক্ট তৈরি করা। নিচের ধাপগুলো অনুসরণ করুন:
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev
এখানে Vite একটি দ্রুত ডেভেলপমেন্ট সার্ভার সরবরাহ করে। এখন, প্রজেক্ট তৈরি হয়ে গেলে, আমরা এটিকে প্রোডাকশনে নিয়ে যাব।
২. Vite প্রোডাকশন বিল্ড
প্রোডাকশনে React অ্যাপ ডিপ্লয় করার জন্য প্রথমে আমাদের অ্যাপের প্রোডাকশন বিল্ড তৈরি করতে হবে। এই প্রক্রিয়া Vite ব্যবহার করে খুবই দ্রুত এবং সহজ।
npm run build
এটি dist/ ফোল্ডারে একটি প্রোডাকশন রেডি বিল্ড তৈরি করবে। এরপর আমরা আমাদের পছন্দের হোস্টিং প্ল্যাটফর্মে এটি ডিপ্লয় করবো।
৩. Netlify তে ডিপ্লয় করা
Netlify একটি জনপ্রিয় হোস্টিং প্ল্যাটফর্ম যা স্ট্যাটিক সাইট ওয়েবসাইট হোস্ট করতে ব্যবহৃত হয়।
ধাপ ১: Netlify অ্যাকাউন্ট তৈরি বা লগইন
Netlify তে একটি অ্যাকাউন্ট তৈরি করুন অথবা আপনার GitHub অ্যাকাউন্ট দিয়ে লগইন করুন।
ধাপ ২: প্রজেক্ট ডিপ্লয়
Netlify ড্যাশবোর্ডে গিয়ে "New site from Git" নির্বাচন করুন। এরপর GitHub থেকে আপনার রেপোজিটরি সিলেক্ট করুন।
ধাপ ৩: বিল্ড সেটিংস
Netlify আপনার Vite প্রজেক্ট বিল্ড করতে npm run build কমান্ড ব্যবহার করবে এবং আউটপুট ডিরেক্টরি হিসেবে dist/ নির্ধারণ করুন।
- Build Command:
npm run build - Publish directory:
dist/
ধাপ ৪: ডিপ্লয়
ডিপ্লয় বোতাম চাপুন, এবং কিছুক্ষণের মধ্যেই আপনার সাইট লাইভ হয়ে যাবে।
৪. Vercel তে ডিপ্লয় করা
Vercel React অ্যাপ্লিকেশন হোস্ট করার জন্য একটি দ্রুত ও কার্যকরী প্ল্যাটফর্ম।
ধাপ ১: Vercel অ্যাকাউন্ট তৈরি বা লগইন
Vercel তে একটি অ্যাকাউন্ট তৈরি করুন অথবা GitHub এর মাধ্যমে লগইন করুন।
ধাপ ২: প্রজেক্ট আমদানি
ড্যাশবোর্ড থেকে "New Project" এ ক্লিক করুন এবং আপনার GitHub রেপোজিটরি লিঙ্ক করুন।
ধাপ ৩: বিল্ড সেটিংস কাস্টমাইজ
Vercel স্বয়ংক্রিয়ভাবে বিল্ড এবং ডিপ্লয় করে, তবে আপনি চাইলে বিল্ড সেটিংস চেক করতে পারেন। বিল্ড কমান্ড হিসেবে npm run build এবং আউটপুট ডিরেক্টরি dist/ দিন।
ধাপ ৪: ডিপ্লয়
ডিপ্লয় প্রক্রিয়া সম্পন্ন হলে, আপনার সাইট লাইভ হয়ে যাবে এবং একটি URL এর মাধ্যমে অ্যাক্সেসযোগ্য হবে।
৫. DigitalOcean এ ডিপ্লয় করা
DigitalOcean একটি ক্লাউড ইনফ্রাস্ট্রাকচার প্ল্যাটফর্ম যা ডাইন্যামিক ও স্ট্যাটিক সাইট হোস্টিংয়ের জন্য চমৎকার।
ধাপ ১: DigitalOcean Droplet তৈরি
DigitalOcean এ একটি Droplet তৈরি করুন এবং Node.js পরিবেশ সেটআপ করুন।
ধাপ ২: অ্যাপ বিল্ড
Droplet এ SSH এর মাধ্যমে লগইন করুন এবং আপনার React অ্যাপ রিপোজিটরি ক্লোন করুন। এরপর প্রোডাকশন বিল্ড তৈরি করুন:
npm install
npm run build
ধাপ ৩: Nginx কনফিগার করা
Droplet এ Nginx ইনস্টল করুন এবং এটি কনফিগার করুন যাতে dist/ ফোল্ডার থেকে ফাইলগুলো পরিবেশন করতে পারে।
sudo apt install nginx
তারপর Nginx কনফিগারেশন ফাইলে dist/ ফোল্ডারটি যুক্ত করুন এবং সার্ভার পুনরায় চালু করুন।
৬. CI/CD পাইপলাইন সেটআপ
Netlify এবং Vercel উভয় প্ল্যাটফর্মেই স্বয়ংক্রিয় Continuous Integration / Continuous Deployment (CI/CD) ব্যবস্থাপনা রয়েছে। এর মাধ্যমে আপনি যখনই আপনার কোড GitHub-এ পুশ করবেন, স্বয়ংক্রিয়ভাবে একটি নতুন বিল্ড তৈরি এবং ডিপ্লয় হবে। আপনি চাইলে নিজস্ব GitHub Actions বা DigitalOcean-এর App Platform ব্যবহার করে নিজস্ব CI/CD পাইপলাইন কনফিগার করতে পারেন।
উপসংহার
React এবং Vite ব্যবহার করে অ্যাপ ডিপ্লয় করা একটি সহজ এবং দ্রুত প্রক্রিয়া। Netlify এবং Vercel এর মত প্ল্যাটফর্মগুলো স্ট্যাটিক সাইট হোস্টিংকে খুব সহজ করে দিয়েছে। অন্যদিকে, DigitalOcean একটি উচ্চ কাস্টমাইজড সলিউশন অফার করে। উপযুক্ত প্ল্যাটফর্ম বেছে নিয়ে আপনি সহজেই আপনার অ্যাপ প্রোডাকশনে ডিপ্লয় করতে পারেন এবং আপনার ইউজারদের কাছে পৌঁছে দিতে পারেন।
শুভ ডিপ্লয়মেন্ট!
Top comments (0)