How to Deploy an Express App to Vercel
Hello Viewers! বাংলায় বৃহৎ লার্নিং হাবে আপনাকে স্বাগতম। আজকের এই ব্লগে আমরা যারা React নিয়ে কাজ করছি, আমাদের প্রেজেক্টের প্রয়োজন অনুযায়ী লোকাল মেশিনের পাশাপাশি সার্ভারের প্রয়োজন হয়। (লোকাল মেশিনে কিভাবে নোড জে এস সার্ভার তৈরি করতে হয় এখানে দেখুন) কিন্তু প্রাথমিক অবস্থায় প্রিমিয়াম ব্যবহার না করে আমরা ফ্রি কিছু সার্ভিস ব্যবহার করতে পারি। তার মধ্যে বর্তমান সময়ে সবচেয়ে জনপ্রিয় সার্ভার হলো Heroku, Vercel ইত্যাদি। আজকের এই ব্লগে আমি কিভাবে Vercel এ আমাদের NodeJS ও Exprees দিয়ে তৈরি এ্যাপ Deploy করতে পারি তা বিস্তারিত ধাপে আলোচনা করবো, তাহলে শুরু করা যাক।
আমরা সাধরণত লোকাল মেশিনে NodeJS এর অগাধ ভালোবাসা এবং সাপোর্টে এর জন্য আমাদের সার্ভারের কাজ করতে পারি, কিন্ত এই ভাইরালের সময়ে এক কোনে পরে থাকলে হবে না আর তার সমাধান দিচ্ছে আমদের Vercel আঙ্কেল। তবে Vercel আঙ্কেলের কাছে যাওয়ার ২টা মাধ্যমঃ CLI or Manually তবে আজকের এই পোষ্টে Vercel Manually Setup নিয়ে আলোচন করবো।
প্রথম ধাপঃ প্রথমে এখনে (https://vercel.com/login) গিয়ে একাউন্ট তৈরি করতে হবে। আর ভার্সেল এ একাউন্ট কয়েক ভাবে করা যায় তার মধ্যে,
গিটহাব
গিটল্যাব
বিটবাকেট
ইমেইল
তবে আমরা সাধারণত গিটহাবের সাথে অতি পরিচিত এবং আমাদের অধিকাংশই প্রোজেক্ট গিটহাবে ডেপ্লয় করা। আজকে আমরা ভার্সেল এ গিটহাব দিয়ে একাঊন্ট তৈরি করবো এবং তা ব্যবহার করবো। একাউন্ট তৈরি করার জন্য Continue With Github এই বাটনে ক্লিক করলে একটা পপ আপ আসবে এবং আপনার গিটহাব ইমেইল ও পাসওয়ার্ড দিলেয় অটোমেটিক একাউন্ট তৈরি হয়ে যাবে ( আর যদি পুর্বেই গিটহাব একাউন্ট আপনার ব্রাউজারে লগইন থাকে তাহলে এমনিতেই ভার্সেল এক্সেস নিয়ে নিবে)
দ্বিতীয় ধাপঃ একাউন্ট যদি ঠিক মতো তৈরি হয় তাহলে আপনাকে ভার্সেলের ডাশবোর্ডে নিয়ে যাবে (https://vercel.com/dashboard) যদি আপনি ভার্সেলে প্রথম একাউন্ট খুলে থাকেন তাহলে ডাশবোর্ড খালি থাকবে। এখানে সাধারণত আপনি এই কয়েকটি অপশন
Overview
Integrations
Activity
Domains
Usage
Settings
দেখতে পারবেন। সাধারণত আমরা Overview তে কাজ করবো। আর বাকিগুলো নিয়ে আপনারা সময় করে এক্সপ্লোর করে নিয়েন। আর যদি কোন সমস্যা হয় তাহলে অবশ্যই এই পোষ্টের কমেন্টে জানাবেন। সমাধান দেওয়ার চেষ্টা করবো।
তৃতীয় ধাপঃ Overview পেইজের ঠিক ডান পাশে Add new একটা বাটন দেখতে পাবেন এবং ওইটাতে ক্লিক করলে এই (Project, Domain, Team) তিনটি অপশন দেখতে পাবেন। এখান থেকে আপনি প্রথম টা তে ক্লিক করবেন (Project) এবং নতুন একটা উইন্ডো ওপেন হবে। এখানে বাম পাশে আপনার গিটহাব নাম দেখতে পাবেন এবং এর পাশে সার্স বার দেখতে পাবেন।
চতুর্থ ধাপঃ সার্স বারে গিয়ে আপনার প্রজেক্টের সার্ভার রিপো নাম লিখে সার্স দিলেই তা সাজেশনে দেখাবে। তারপর আপনার রিপো সিলেক্ট করে import বাটনে ক্লিক করলেই নতুন একটা উন্ডো ওপেন হবে । এখানে আপনার প্রজেক্টের Configure সেটাপ করতে হবে।
পঞ্চম ধাপঃ ডান পাশে Configure Project একটা ইনপুট ফিল্ড পাবেন, এটার Configure Setup সাধারণত এভাবে করবেন, তার নমুনাঃ
Project Name: এখানে সাধারণত আপনি আপনার গিটহাব এর রিপো নাম টা দেখবেন, আপনি চাইলে তা কাস্টমাইজ করতে পারেন অথবা এমনিতে রাখতে পারবেন কোন সমস্যা হবে না।
Framework Preset: সাধারণত আমাদের প্রোজেক্ট নোড এবং এক্সপ্রেস দিয়ে করা আর ভার্সেল এ এই অপশন টা এখানে পাবেন না। তাহলে এই সেটিংএ আপনি ড্রপডাউন থেকে Other সিলেক্ট করে নিবেন। (আর এর বাহিরে যদি কোন প্রোজেক্ট ডেপ্লয় করতে চান তাহলে ড্রপডাউন থেকে দেখে নিবেন, যদি পান তাহলে ভালো আর না হলে Other সিলেক্ট করে দিবেন)
Root Directory: এই অপশন যেমন আছে তেমনি থাকবে (তবে এখানে আপনার প্রোজেক্টের উপর নির্ভরশীল করে আপডেট করতে পারেন)
Build and Output Settings: এই অপশন যেমন আছে রেখে দিন।
Environment Variables: এটা সাধারণত Heroku এর মতো সেটাপ করে নিবেন।নমুনাঃ
NAME VALUE (WILL BE ENCRYPTED)
APP_ADMIN notesaid24
সব ঠিকমতো সেটাপ করলে এখন Deploy বাটনে ক্লিক করলেই আপনার কাজ শেষ। Deploy শেষ হলে আপানাকে স্বাগতম দিয়ে নতুন একটা উইন্ডোতে নিয়ে যাবে। এখানে আপনি একপাশে আপনার ওয়েবসাইটের প্রিভিও দেখবেন এবং অন্য পাশে কয়েকটা অপশন দেখবেন । তার মধ্যে Domains এ আপনার ওয়েবসাইটের লিংক পাবেন এবং এটাতে ক্লিক করলেই আপনি আপনার সার্ভারের সকল ফাইল দেখতে পারবেন।
সমস্যাঃ কিন্তু সাধারণত Heroku এর মতো না, এখানে তো ফাইলের সব ডাটাই দিয়ে দিচ্ছে, যা একবারেই বাজে অবস্থা। আর এই অবস্থা থেকে বাঁচতে হলে আরও একটা আপডেট করেত হবে আর তা হলো।
ষষ্ঠ ধাপঃ এখন আপনি আপনার গিটহাব থেকে সার্ভার এর রিপো টা লোকাল মেশিনে ক্লোন করে নিয়ে VS Code Editor ওপেন করবেন (লোকাল মেশিনে আপনার ফাইল থাকলে তা ওপেন করলেই হবে)। তারপর রুটে এই নামে (vercel.json) একটা ফাইল তৈরি করে নিচের কোড টা হুবহু কপি করে পেস্ট করে দিয়ে ফাইল টা সেভ করবেন ।
কোডের নমুনাঃ
{
"builds": [
{ "src": "index.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "index.js"
}]
}
তারপর এই তিনটি কমান্ড রান করলেই হবেইঃ
git add .
git commit –m “Ja icche tai”
git push
এই কমান্ড গুলো দিয়ে , আপনার ভার্সেল পেইজে একটা রিলোড দিলেই হবেই। এখন আপানর সার্ভার লিংক রেডি। এখন আপনার ইচ্ছা মতো যেখানে ইচ্ছা ব্যবহার করতে পারেন। তবে এই তিনটি কমান্ড দিলেই হবে Varcel অটো আপডেট নিয়ে নিবে এখানে আর অতিরিক্ত কোন কমান্ড দিতে হবে না। তবে আজকে শেষ না CLI দিয়ে কিভাবে ভার্সেল সার্ভার সেটাপ করতে হয়, তা নিয়ে আগামি পোষ্টে লিখবো। আর উপরিল্লোখিত লেখায় যদি কোন ভুল দৃষ্টিগোচর হয় তা অবশ্যই কমেন্টে জানাবেন। আর সার্ভার তৈরি করতে কোন সমস্যা হলে কমেন্ট করে জানিয়ে দিন আশা করি সমাধান দেওয়ার চেষ্টা করবো। আর পোষ্ট ভালো লাগলে শেয়ার করতে ভুলবেন না। সবাই ভালো থাকবেন দেখা হবে অন্য কোন এক দিন নতুন কোন পোষ্টে।
