AWS CodePipeline සහ CodeDeploy භාවිතයෙන් React Application එක EC2 එකට Deploy කිරීම

React Application එකක් AWS EC2 එකට dist/ folder එක විතරක් deploy කරලා run කරන ආකාරය පහත පියවර අනුව විස්තර කරමි.

🔧 AWS Architecture Overview

GitHub Repository → React Source Code
AWS CodeBuild → npm install && npm run build (Creates dist/ folder)
AWS CodeDeploy → Deploys dist/ folder to EC2 → /var/www/html
EC2 Instance → Nginx/Apache to serve the React app

💡 Step 1: AWS CodePipeline එකක් සකසා ගනිමු

AWS Console → CodePipeline → Create Pipeline
Pipeline Name → react-app-pipeline
Role → Create new role
S3 Bucket → Select default S3 bucket
Click Next

💡 Step 2: GitHub Repository එක Source එකක් Connect කිරීම

Source Provider → GitHub
Connect GitHub → Authenticate (Allow AWS to access repo)
Select Repository → Your GitHub repo
Branch Name → Example: main
Output Artifact Name → SourceArtifact
Click Next

💡 Step 3: AWS CodeBuild සකසා ගැනීම

Build Provider → AWS CodeBuild
Click Create New Build Project
Project Name → react-app-build
Environment:
- OS → Ubuntu
- Runtime → Standard
- Image → aws/codebuild/standard:latest
- Service Role → Create new role
Buildspec file → Select Use a buildspec file
Click Create Build Project
Go back to CodePipeline and Click Next

💡 Step 4: AWS CodeDeploy සකසා ගැනීම

Deploy Provider → AWS CodeDeploy
Application Name → react-app-deploy
Deployment Group Name → react-app-group
Select EC2 Instance → Ensure EC2 instance has CodeDeploy agent installed
Click Next → Create Pipeline

💡 Step 5: buildspec.yml එක GitHub Repo එකට එකතු කිරීම

GitHub repo එකේ buildspec.yml කියලා file එකක් හදලා පහත content එක එක් කරන්න:

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: latest
  pre_build:
    commands:
      - echo Installing dependencies...
      - npm install
  build:
    commands:
      - echo Building the React app...
      - npm run build
  post_build:
    commands:
      - echo Build complete!
artifacts:
  files:
    - '**/*'
  base-directory: build/

💡 Step 6: appspec.yml එක GitHub Repo එකට එකතු කිරීම

GitHub repo එකේ appspec.yml කියලා file එකක් හදලා පහත content එක එක් කරන්න:

version: 0.0
os: linux
files:
  - source: /
    destination: /var/www/html
permissions:
  - object: /var/www/html
    owner: ec2-user
    group: ec2-user
    mode: 755
hooks:
  AfterInstall:
    - location: scripts/restart_server.sh
      timeout: 300
      runas: root

💡 Step 7: Restart Script එක එක් කිරීම (Nginx)

GitHub repo එකේ scripts/restart_server.sh කියලා folder එකක් හදලා පහත content එක එක් කරන්න:

#!/bin/bash
sudo systemctl restart nginx

Then give it execute permission:

chmod +x scripts/restart_server.sh

💡 Step 8: GitHub Repo එක Push කිරීම

git add .
git commit -m "Added buildspec and appspec files for React app"
git push origin main

💡 Step 9: EC2 Server එකේ Nginx Setup කිරීම

EC2 Instance එකට Login වීම

ssh -i "your-key.pem" ec2-user@your-ec2-ip

Nginx Install කිරීම

sudo yum install nginx -y

Nginx Config File එක Edit කිරීම

sudo nano /etc/nginx/nginx.conf

මේක add කරන්න (server block එක)

server {
    listen 80;
    server_name your-ec2-ip;

    location / {
        root /var/www/html;
        index index.html;
        try_files $uri /index.html;
    }
}

Nginx Restart කිරීම

sudo systemctl restart nginx

🚀 Step 10: Pipeline එක Run කරලා Deploy කිරීම!

AWS Console → CodePipeline → Release Change

✅ GitHub Repo → React Source Code ✅ CodeBuild → npm run build → build/ folder create වෙයි ✅ CodeDeploy → build/ folder එක /var/www/html copy කරයි ✅ Nginx restart කරලා React App එක serve කරයි

➡ Browser එකේ http://your-ec2-ip එකට ගිහින් React App එක check කරන්න! 🎉

🌟 Done!

දැන් ඔයා GitHub Repo එකට push කලම, React App එක AWS EC2 එකට Auto Deploy වෙයි! 🚀

Go to Link

SL SmartTutorial