MERN Stack Project Deployment (Vercel Vs Firebase)

 

Deploy Server Side at Vercel

Vercel একটি জনপ্রিয় প্ল্যাটফর্ম যা সহজে এবং দ্রুত Node.js অ্যাপ্লিকেশন হোস্টিং করতে পারে। MERN স্ট্যাক প্রজেক্টের সার্ভার সাইড Vercel-এ ডেপ্লয় করার জন্য নিচের ধাপগুলো আমাদের  অনুসরণ করতে হবে।

Step-1: comment all await commands before deployment

তোমার সার্ভার সাইডের কোডের নিচের কমান্ড গুলো কে কমেন্ট /  ডিলিট  করে দাও।  

  •  await client.connect();
  •  await  client.db("admin").command({ ping: 1 });
  •  await client.close();

Step-2: add vercel.json

তোমার সার্ভার প্রজেক্টে vercel.json নামে একটা ফাইল ক্রিয়েট করে ফেলো।  এবং সেখানে নিচের এই জেসন টা এড করে দাও।  

"version"2"builds": [ { "src""index.js""use""@vercel/node" } ], "routes": [ { "src""/(.*)""dest""index.js""methods": [ "GET""POST""PUT""PATCH""DELETE""OPTIONS" ] } ] }

Step-3: Confirm that you use these Middleware
  • ভালো করে চেক করে দেখো যে তুমি CORS কে ইন্সটল করেছো কিনা এবং CORS Middleware ব্যবহার করছো কিনা
  • চেক করে দেখো যে তুমি  express.json কে middleware হিসেবে ব্যবহার করছো  কিনা।

 

Step-4: confirm that you used dotenv at the top

  • চেক করে দেখো dotEnv ইন্সটল করেছো কিনা এবং dotenv  কে একদম সবার উপরে ব্যবহার করছো কিনা।  না করলে একে সবার উপরে নিয়ে যাও।
Step-3: deploy with CLI

তোমার কম্পিউটারে Vercel CLI ইনস্টল করো । ইন্সটল করা থাকলে এই ধাপ টি স্কিপ করতে পারো।

npm install -g vercel

Vercel CLI সফলভাবে ইনস্টল হয়েছে বা আছে  কিনা চেক করে দেখো

vercel --version

Terminal দিয়ে Vercel অ্যাকাউন্টে লগইন করো।  লগ ইন করা থাকলে এই ধাপ টি স্কিপ করতে পারো। আর তোমার যদি  vercel এ account না থাকে  তাহলে এই লিংক এ গিয়ে  Github দিয়ে  একাউন্ট ক্রিয়েট করে ফেলো।  এরপরে নিচের কমান্ড টি দাও।

vercel login

এবারে Vercel-এ ডেপ্লয় করতে নিচের কমান্ড দাও ।

vercel

এবারে vercel তোমাকে কিছু প্রশ্ন জিজ্ঞাসা করবে নিচের মতো করে answer দিয়ে ঝটপট ডিপ্লয় করার চেষ্টা করো।

Deploy Done !!!!  inspect এ ক্লিক করে তুমি তোমার প্রোজেক্ট এর পেইজে চলে যেতে পারো।  সেখানে তুমি তোমার server এর অফিশিয়াল Link পেয়ে যাবে।

Re-Deploy Process 

কোডে যেকোন চেইঞ্জস করলে তোমাকে শুধুমাত্র নিচের কমান্ড টি দিতে হবে।  

vercel --prod

Issues

যদি ভার্সেল ঠিক মতো কাজ না করে তাহলে তুমি কি এরোর ফেইস করছো সেটা দেখার জন্য তোমার প্রোজেক্ট এ চলে যাও।  এবং Run Time Logs এ ক্লিক করো।


  

এখানে ক্লিক করে   সার্চ কে ক্লিয়ার করে  দাও।




কোন একটা এরোর এ ক্লিক করলে কি এরোর হয়েছে সেটা তুমি স্ক্রল  দেখতে পারবে।



Deploy Client Side at Firebase

Step-1: comment all console.log that console important credentials

ধরো তুমি AuthProvider থেকে  ইউজার কে কনসোল করে রেখেছো।  অথবা Login / Register page থেকে user এর ক্রেডেনশিয়েল কে কনসোল করে রেখেছো।  সেগুলো কে কমেন্ট করে দাও।  না হলে ভবিষ্যতে firebase site কে ডিলিট করে দিতে পারে।  

Step-2: Replace LocalHost API Links with your Live server Links

এবারে ডাটা ফেচ করার জন্য তুমি যেখানে যেখানে লোকালহোস্ট সার্ভার  লিংক ব্যবহার করেছিলে সেখানে সেখানে তুমি  তোমার সার্ভারের লাইভ লিংক দিয়ে রিপ্লেস করে ফেলো।  

Step-2: Do Firebase init

Firebase init কমান্ড টি টার্মিনালে চালাও।  

  • Create New / existing  এই প্রশ্নে অবশ্যই existing select করবে।
  • Single page application create করতে চাও কিনা এই প্রশ্নে অবশ্যই Y দিবে।
  • Public Folder কোন টা এটা জিজ্ঞাসা করলে অবশ্যই dist লিখে দিবে।
  • তোমার যদি আগে থেকে project build করা থাকে তাহলে সে dist folder rewrite করতে চাইবে। সেখানে অবশ্যই  N দিবে।  
Step-3: npm run build

এবারে npm run build দিয়ে প্রোজেক্ট কে বিল্ড করে ফেলো।  

Step-4: firebase deploy

এবারে firebase deploy কমান্ড টি দিয়ে প্রোজেক্ট কে ডিপ্লয় করে ফেলো।  

 

Re-Deploy Process 

npm run build

যেকোন চেইঞ্জ করা হলে  npm run build দিয়ে প্রোজেক্ট কে আবার  বিল্ড করে ফেলো।  

firebase deploy

এবারে firebase deploy কমান্ড টি দিয়ে প্রোজেক্ট কে রি ডিপ্লয় করে ফেলো।

Post a Comment

أحدث أقدم