React.js CI/CD

React.js অ্যাপ্লিকেশনকে GitHub থেকে আপনার সার্ভারে Continuous Integration and Continuous Deployment (CI/CD) পদ্ধতিতে ডিপ্লয় করতে একটি বড় এবং বিস্তারিত টিউটোরিয়াল দেওয়া হলো। এতে ধাপে ধাপে সব কিছু ব্যাখ্যা করা হয়েছে।

ধাপ ১: React.js অ্যাপ্লিকেশন তৈরি এবং GitHub এ আপলোড করা

১.১: React.js অ্যাপ্লিকেশন তৈরি করা

প্রথমে আপনার লোকাল মেশিনে একটি নতুন React.js অ্যাপ্লিকেশন তৈরি করুন:

npx create-react-app my-react-app
cd my-react-app

১.২: GitHub রিপোজিটরি তৈরি করা

GitHub এ একটি নতুন রিপোজিটরি তৈরি করুন এবং তারপর আপনার লোকাল প্রজেক্টটিকে GitHub এ পুশ করুন:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main

ধাপ ২: আপনার সার্ভারে সার্ভার সাইড সেটআপ করা

২.১: সার্ভারে Nginx ইনস্টল করা

React.js অ্যাপ্লিকেশনটি সার্ভারে পরিবেশন করার জন্য আপনি Nginx ব্যবহার করতে পারেন:

sudo apt update
sudo apt install nginx

২.২: Node.js এবং npm ইনস্টল করা

React.js অ্যাপ্লিকেশন build করার জন্য Node.js প্রয়োজন:

sudo apt install nodejs
sudo apt install npm

২.৩: Git ইনস্টল করা

sudo apt install git

ধাপ ৩: সার্ভারে CI/CD সেটআপ করা

৩.১: pm2 ইনস্টল করা

Node.js অ্যাপ্লিকেশন ব্যবস্থাপনার জন্য pm2 ইনস্টল করুন:

sudo npm install -g pm2

৩.2: deploy.sh স্ক্রিপ্ট তৈরি করা

আপনার সার্ভারে deploy.sh নামে একটি স্ক্রিপ্ট তৈরি করুন। এটি আমাদের CI/CD প্রক্রিয়ার মূল অংশ। এই স্ক্রিপ্টটি কোড পুল করবে, অ্যাপ্লিকেশন build করবে এবং PM2 ব্যবহার করে পুনরায় চালু করবে।

প্রথমে, একটি ডিরেক্টরি তৈরি করুন যেখানে আপনার React.js অ্যাপ্লিকেশনটি ডিপ্লয় হবে:

sudo mkdir -p /var/www/my-react-app

তারপর deploy.sh ফাইলটি তৈরি করুন:

sudo nano /var/www/my-react-app/deploy.sh

deploy.sh স্ক্রিপ্টে নিম্নলিখিত কোডটি যোগ করুন:

#!/bin/bash

# Navigate to the application directory
cd /var/www/my-react-app

# Pull the latest code from the GitHub repository
git pull origin main

# Install dependencies
npm install

# Build the React.js application
npm run build

# Restart the application with pm2
pm2 restart my-react-app || pm2 start npm --name "my-react-app" -- start

এক্সপ্লানেশন:

• cd /var/www/my-react-app: আপনার অ্যাপ্লিকেশনের ডিরেক্টরিতে চলে যায়।
• git pull origin main: GitHub রিপোজিটরি থেকে সর্বশেষ কোড পুল করে।
• npm install: অ্যাপ্লিকেশনটির জন্য প্রয়োজনীয় প্যাকেজ ইনস্টল করে।
• npm run build: React.js অ্যাপ্লিকেশন build করে, যা production এ পরিবেশনের জন্য প্রস্তুত।
• pm2 restart my-react-app || pm2 start npm --name "my-react-app" -- start: যদি অ্যাপ্লিকেশনটি ইতিমধ্যে চলছে তবে সেটিকে পুনরায় চালু করে, নতুবা নতুনভাবে শুরু করে।

ফাইলটিকে executable করতে নিচের কমান্ডটি চালান:

sudo chmod +x /var/www/my-react-app/deploy.sh

৩.২: ভবিষ্যতে স্ক্রিপ্ট এডিট করা

যদি ভবিষ্যতে এই স্ক্রিপ্টটি এডিট করতে চান, তখন আপনি আবার nano কমান্ড ব্যবহার করে এডিট করতে পারেন:

sudo nano /var/www/my-react-app/deploy.sh

ধাপ ৪: Node.js এবং Express দিয়ে Webhook সার্ভার তৈরি করা

৪.১: Node.js Express অ্যাপ্লিকেশন তৈরি করা

Webhook সার্ভারটি GitHub থেকে push ইভেন্টগুলো গ্রহণ করে deploy.sh স্ক্রিপ্ট চালাবে। প্রথমে, একটি ডিরেক্টরি তৈরি করুন যেখানে Webhook সার্ভারটি থাকবে:

mkdir ~/webhook-server
cd ~/webhook-server

index.js নামে একটি ফাইল তৈরি করুন এবং নিচের কোডটি লিখুন:

nano index.js

const express = require('express');
const bodyParser = require('body-parser');
const { exec } = require('child_process');

const app = express();
app.use(bodyParser.json());

app.post('/webhook', (req, res) => {
  exec('sh /var/www/my-react-app/deploy.sh', (error, stdout, stderr) => {
    if (error) {
      console.error(`Error: ${error.message}`);
      return res.sendStatus(500);
    }
    if (stderr) {
      console.error(`stderr: ${stderr}`);
      return res.sendStatus(500);
    }
    console.log(`stdout: ${stdout}`);
    return res.sendStatus(200);
  });
});

app.listen(3000, () => console.log('Webhook server is running on port 3000'));

এক্সপ্লানেশন:

• Express: একটি Node.js ফ্রেমওয়ার্ক যা ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়।
• Body-parser: HTTP রিকোয়েস্টগুলোর বডি পার্স করতে ব্যবহৃত হয়।
• exec ফাংশন: deploy.sh স্ক্রিপ্টটি চালানোর জন্য ব্যবহৃত হয় যখন GitHub থেকে push ইভেন্ট আসে।

৪.২: Webhook সার্ভার চালু করা

Webhook সার্ভারটি pm2 দিয়ে চালু করুন যাতে এটি সার্ভারের ব্যাকগ্রাউন্ডে চালিত হতে পারে:

pm2 start index.js --name "webhook-server"

এই কমান্ডটি webhook-server নামে একটি pm2 প্রসেস শুরু করবে, যা GitHub থেকে POST রিকোয়েস্টগুলো হ্যান্ডেল করবে।

ধাপ ৫: Nginx কনফিগারেশন

৫.১: Nginx কনফিগারেশন তৈরি করা

Nginx ব্যবহার করে আপনার React.js অ্যাপ্লিকেশনকে serve করতে নিম্নলিখিত কনফিগারেশনটি তৈরি করুন:

sudo nano /etc/nginx/sites-available/my-react-app

নিচের কোডটি যোগ করুন:

server {
    listen 80;
    server_name olee.com;

    location / {
        root /var/www/my-react-app/build;
        try_files $uri /index.html;
    }

    location /webhook {
        proxy_pass http://localhost:3000/webhook;
    }
}

এক্সপ্লানেশন:

• server_name: আপনার ডোমেইনের নাম।
• root: React.js build ফাইলগুলি serve করার জন্য ডিরেক্টরি।
• try_files: যদি নির্দিষ্ট ফাইল পাওয়া না যায়, তবে index.html serve করে SPA (Single Page Application) হিসাবে।
• proxy_pass: Webhook এর জন্য Node.js সার্ভারটি প্রক্সি করে।

৫.২: Nginx কনফিগারেশন সক্রিয় করা

sudo ln -s /etc/nginx/sites-available/my-react-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

ধাপ ৬: CI/CD প্রক্রিয়া পরীক্ষা করা

GitHub রিপোজিটরিতে একটি নতুন কমিট পুশ করুন এবং দেখুন আপনার React.js অ্যাপ্লিকেশনটি স্বয়ংক্রিয়ভাবে ডিপ্লয় হচ্ছে কিনা। আপনার Webhook সার্ভারটি GitHub থেকে পুশ ইভেন্টগুলো গ্রহণ করবে এবং deploy.sh স্ক্রিপ্টটি চালাবে।

পর্যবেক্ষণ:

1. আপনার deploy.sh ফাইলটি আপনি যেকোনো সময় এডিট করতে পারবেন।
2. Webhook সার্ভারটি সবসময় চালু থাকবে এবং GitHub এর সাথে সংযুক্ত থাকবে।
3. Nginx সার্ভারটি আপনার React.js অ্যাপ্লিকেশনকে serve করবে এবং Node.js সার্ভারটি Webhook রিকোয়েস্টগুলো হ্যান্ডেল করবে।

GitHub এ Webhook সেটআপ করার ধাপ

GitHub Webhook সেটআপ করার মাধ্যমে আপনি GitHub থেকে আপনার সার্ভারে কোড পুশ হলে স্বয়ংক্রিয়ভাবে নির্দিষ্ট ক্রিয়া করতে পারেন। এই টিউটোরিয়ালে, আমরা GitHub Webhook সেটআপ করে দেখাবো কিভাবে এটি আপনার সার্ভারের deploy.sh স্ক্রিপ্টটি ট্রিগার করতে পারে।

ধাপ ১: Webhook URL তৈরি করা

প্রথমে নিশ্চিত করুন যে আপনার সার্ভারে একটি Webhook URL তৈরি করা আছে যা GitHub থেকে POST রিকোয়েস্ট গ্রহণ করতে পারে। এই URL আপনার Webhook সার্ভারে হবে যা Node.js Express দিয়ে তৈরি করা হয়েছে।

Webhook সার্ভার চলমান থাকতে হবে এবং একটি নির্দিষ্ট পোর্টে সারা বিশ্ব থেকে HTTP POST রিকোয়েস্ট গ্রহণ করতে সক্ষম হতে হবে।

যদি Webhook সার্ভার চালু না থাকে, নিশ্চিত করুন:

pm2 start index.js --name "webhook-server"

Webhook URL উদাহরণ: http://your-server-ip:3000/webhook

ধাপ ২: GitHub রিপোজিটরি তে Webhook যোগ করা

1. GitHub রিপোজিটরি খুলুন:
   • GitHub এ লগ ইন করুন এবং আপনার প্রোজেক্ট রিপোজিটরিটি খুলুন।
2. Settings এ যান:
   • রিপোজিটরি পৃষ্ঠার উপরের ডানদিকের কোণে Settings ট্যাবে ক্লিক করুন।
3. Webhooks নির্বাচন করুন:
   • বাম সাইডবারে Webhooks নির্বাচন করুন।
4. Add webhook ক্লিক করুন:
   • Add webhook বাটনে ক্লিক করুন।
5. Payload URL যোগ করুন:
   • Payload URL ফিল্ডে আপনার Webhook সার্ভারের URL যোগ করুন, যেমন http://your-server-ip:3000/webhook।
6. Content type নির্বাচন করুন:
   • Content type হিসাবে application/json নির্বাচন করুন।
7. Which events would you like to trigger this webhook?:
   • Just the push event নির্বাচন করুন যাতে Webhook শুধুমাত্র কোড পুশ করার সময় ট্রিগার হয়।
8. Webhook সক্রিয় করুন:
   • Active চেকবক্সটি নির্বাচন করুন যাতে Webhook সক্রিয় থাকে।
9. Add webhook ক্লিক করুন:
   • সব তথ্য সঠিকভাবে পূরণ করার পর, Add webhook বাটনে ক্লিক করুন।

ধাপ ৩: Webhook কার্যকরীভাবে পরীক্ষা করা

Webhook সফলভাবে সেটআপ হলে, যখনই আপনি আপনার GitHub রিপোজিটরিতে একটি কোড পুশ করবেন, GitHub আপনার Webhook URL এ একটি POST রিকোয়েস্ট পাঠাবে। আপনি Webhook সার্ভার লোগে রিকোয়েস্টটি দেখবেন এবং এটি যদি deploy.sh স্ক্রিপ্টটি চালায়।

Webhook সার্ভারে লোগ চেক করার জন্য:

pm2 logs webhook-server

সার্ভারে স্ক্রিপ্টটি চালানোর জন্য:

• নিশ্চিত করুন যে আপনার deploy.sh স্ক্রিপ্টটি সঠিকভাবে কাজ করছে এবং আপনার React.js অ্যাপ্লিকেশন স্বয়ংক্রিয়ভাবে ডিপ্লয় হচ্ছে।

Webhook সার্ভার সার্ভিসে পুশ রিকোয়েস্ট রিসিভ করছে কিনা তা নিশ্চিত করুন:

curl -X POST http://your-server-ip:3000/webhook -H "Content-Type: application/json" -d '{"test":"data"}'

এই কমান্ডটি একটি টেস্ট POST রিকোয়েস্ট পাঠাবে আপনার Webhook সার্ভারে, যা আপনার সার্ভারের লগে দেখা যাবে।

সারাংশ:

• Webhook URL: সার্ভারের Webhook URL নির্ধারণ করুন।
• GitHub Webhook সেটআপ: GitHub রিপোজিটরিতে Webhook সেটআপ করুন।
• Webhook টেস্টিং: নিশ্চিত করুন যে Webhook সঠিকভাবে কাজ করছে এবং সার্ভার প্রয়োজনীয় ক্রিয়াগুলি সম্পন্ন করছে।

এই ধাপগুলি আপনাকে GitHub থেকে Webhook সেটআপ করে সার্ভারে CI/CD প্রক্রিয়া স্বয়ংক্রিয়ভাবে পরিচালনা করতে সহায়তা করবে।