Hello Coders! বাংলায় বৃহৎ কোডিং হাবে আপনাকে স্বাগতম। আজকের এই ব্লগে আমরা যারা Reactনিয়ে কাজ করছি, আমাদের প্রেজেক্টের প্রয়োজন অনুযায়ী লোকাল মেশিনের পাশাপাশি সার্ভারের প্রয়োজন হয়। কিন্তু প্রাথমিক অবস্থায় প্রিমিয়াম ব্যবহার না করে আমরা ফ্রি কিছু সার্ভিস ব্যবহার করতে পারি। তার মধ্যে বর্তমান সময়ে সবচেয়ে জনপ্রিয় সার্ভার হলো Heroku, Vercel ইত্যাদি। আজকের এই ব্লগে আমি কিভাবে Vercel এ আমাদের NodeJS ও Exprees দিয়ে তৈরি এ্যাপ Deploy করতে পারি তা বিস্তারিত ধাপে আলোচনা করবো, তাহলে শুরু করা যাক।
আমরা সাধরণত লোকাল মেশিনে NodeJS এর অগাধ ভালোবাসা এবং সাপোর্টে এর জন্য আমাদের সার্ভারের কাজ করতে পারি, কিন্ত এই ভাইরালের সময়ে এক কোনে পরে থাকলে হবে না আর তার সমাধান দিচ্ছে আমদের Vercel আঙ্কেল। তবে Vercel আঙ্কেলের কাছে যাওয়ার ২টা মাধ্যমঃ CLI or Manually তবে আজকের এই পোষ্টে Vercel CLI Setup নিয়ে আলোচন করবো।
নোটঃ আমি পুর্বে Vercel Manually Setup কিভাবে করতে হয় তা নিয়ে বিস্তারিত আলোচন করেছি।
প্রথম ধাপঃ প্রথমে আপনি যে ফাইল টি ভার্সেলে ডেপ্লয় করতে চান, ঐই প্রজেক্টটি আপনার কোড এডিটরে খোলে নিবেন। এবং কমান্ড লাইন খোলে এই কমান্ড টা রান করবেন npm i -g vercel ( ভালো আউটপুটের জন্য গিট ব্যাশ ব্যবহার করতে পারেন, তবে আপনার ইচ্ছা অনুযায়ী যে কোন একটা ব্যবহার করলেই হবে।) । আপনার লোকাল মেশিনে গ্লোবালি ভার্সেল ইন্সটল হয়ে গেছে, এখন আমরা আমাদের প্রোজেক্ট ভার্সেলে ডেপ্লয় করবো। তাহলে চলুন শুরু করা যাক।
দ্বিতীয় ধাপঃ ভার্সেলে CLI দিয়ে এক্সপ্রেস এ্যাপ ডিপ্লয় করতে হলে , কয়েকটি ধাপ ঠিকমতো অনুসরণ করলেই হবে, আশা করি এরর নিয়ে Heroku এর মতো মাথা ব্যথা হবে না। তাহলে চলুন………………
ভার্সেল ডিপ্লয়ঃ
আপনি নিশ্তিত যে আপনি আপনার প্রোজেক্ট এর রুট ফোল্ডারে আছেন। এবং আপনি কমান্ড লাইনে গিয়ে এই কমান্ড vercel টি রান করবেন। এবং নিচের উল্লেখিত নিয়মে আপনার প্রজেক্ট সেটাপ করে নিবেন।
ভার্সেল কমান্ড টি রান করলে প্রথমে আপনাকে লগইন করে নিতে হবে। আর ভার্সেল এ একাউন্ট লগইন কয়েক ভাবে করা যায় তার মধ্যে, গিটহাব, গিটল্যাব ও বিটবাকেট। আপনি এখানে Continue with Github ক্লিক করে এন্টার কি প্রেস করবেন ( এখানে আপনার প্রজেক্ট অনুযায়ি যে কোন একটা ব্যবহার করলেই হবে, আর অপশন সিলেক্ট করার জন্য কিবোর্ডের আপ এবং ডাউন এরো ব্যাবহার করবেন) । তারপর আপনার লোকাল মেশিনের ডিফল্ট ব্রাউজার ওপেন হবে এবং গিটহাব এক্সেস দিবেন। যদি সব ঠিক মতো হয় তাহলে টার্মিনালে এসে এমন দেখবেন,
Success!
GitHub authentication complete for youremail@gmail.com
তারপর, Set up and deploy“~\Desktop\Update_Project\Tour_Hub_Server”? [Y/n] (এখানে y দিবেন)
তারপর, Which scope do you want to deploy to? ( এখানে আপনি আপনার গিটহাবের ইউজারে নেম দেখবেন, এখানে কিছুই করা লাগবেনা প্রেস ইন্টার কি তবে যদি দেখতে চান তাহলে জাস্ট আপনি একটা ইউজার নেম দিয়ে দিবেন) এখানে এমন দেখবেন।
Which scope do you want to deploy to? gitUserName
তারপর, Link to existing project? [y/N] (এখানে n দিবেন। আর যদি এক্সিস্টং কোন প্রোজেক্ট আপডেট করতে চান তাহলে y ফ্লাগ দিবেন)
তারপর, What’s your project’s name? (tour-hub-server) (যদি আপনি গিটহাব থেকে রিপো ক্লোন করে লোকাল মেশিনে কাজ করেন তাহলে প্রোজেক্ট নেইম অটো নিয়ে নিবে, আর যদি না নেয় আপনার ইচ্ছা মতো নেইম দিতে পারেন। তবে তা অবশ্যই ইউনিক এবং রিডাবল যাতে হয়) এখানে এমন দেখবেন।
What’s your project’s name? tour-hub-server
তারপর, In which directory is your code located? ./ (এই অপশন যেমন আছে তেমনি থাকবে ( তবে এখানে আপনার প্রোজেক্টের উপর নির্ভরশীল করে আপডেট করতে পারেন )
তারপর, Want to modify these settings? ( যদি আপনি মডিফাই করতে চান তাহলে y দিবেন, আর না চাইলে n দিবেন। আর এখানে কোন মডিফাই করবোনা তাই আমি n দিয়েছি।) এখানে এমন দেখবেন।
Want to modify these settings? [y/N] n
এখানে একটু সময় নিবে ডিপ্লয়ের জন্য, আর যদি সব ঠিকঠাক থাকে তাহলে আপনার প্রোজেক্ট এখন রেডী এবং আপনি আপানর টার্মিনালে একটু স্ক্রল করলে আপনার প্রোজেক্ট লিংক দেখতে পারবেন, তার নমুনা ।
Production: https://tour-hub-server.vercel.app [15s]
সমস্যাঃ কিন্তু সাধারণত Heroku এর মতো না, এখানে তো ফাইলের সব ডাটাই দিয়ে দিচ্ছে, যা একবারেই বাজে অবস্থা। আর এই অবস্থা থেকে বাঁচতে হলে আরও একটা আপডেট করেত হবে আর তা হলো। আপনি আপনার প্রোজেক্টের রুটে এই নামে (vercel.json) একটা ফাইল তৈরি করে নিচের কোড টা হুবহু কপি করে পেস্ট করে দিয়ে ফাইল টা সেভ করবেন ।
কোডের নমুনাঃ
{
"builds": [
{
"src": "index.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "index.js"
}
]
}
তারপর ফাইল সেইভ করে টার্মিনালে গিয়ে এই কমান্ড টি vercel রান করবেন। ব্যাশ আপনার প্রজেক্ট রেডি এখন আপনি আপনার প্রজেক্ট যেখানে ইচ্ছা ব্যবহার করতে পারেন। এই ছিলো ভার্সেল CLI সেটাপ, এখানে আমি ধাপে ধাপে CLI দিয়ে সেটাপ দেখিয়েছি তারপরও যদি কোন সমস্যায় হয়, তাহলে অবশ্যই কমেন্ট করে জানাবেন। ইনশাআল্লাহ্ আমি সমাধান দেওয়ার চেষ্টা করবো। আর উপরিল্লোখিত লেখায় যদি কোন ভুল দৃষ্টিগোচর হয় তা অবশ্যই কমেন্টে জানাবেন। আর পোষ্ট ভালো লাগলে শেয়ার করতে ভুলবেন না। সবাই ভালো থাকবেন দেখা হবে অন্য কোন এক দিন নতুন কোন পোষ্টে।
