Deploy React-Python-MySQL project on EC2 instance

 Deploy React-Python-MySQL project on EC2 instance

sudo apt-get install mysql-server

sudo systemctl start mysql

sudo systemctl enable mysql

sudo mysql -u root -p

CREATE DATABASE <databasename>;

CREATE USER 'myuser'@'localhost' IDENTIFIED BY 'password';

GRANT ALL PRIVILEGES ON myblog.* TO 'myuser'@'localhost';

FLUSH PRIVILEGES;

EXIT;

sudo apt update

sudo apt install python3 python3-pip python3-dev

sudo apt install python3-venv

python3 -m venv myenv

source myenv/bin/activate

pip3 install Django

pip3 install djangorestframework

pip3 install djangorestframework-simplejwt

pip3 install django-cors-headers

sudo apt install pkg-config libmysqlclient-dev

pip install mysqlclient

pip install pymysql

pip install tzdata

pip install django gunicorn

clone the Django project from GitHub

deactivate

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -

sudo apt install -y nodejs

node -v

npm -v

sudo apt update

sudo apt install nginx

sudo systemctl start nginx

sudo systemctl enable nginx

sudo systemctl restart nginx

sudo nginx -t

sudo systemctl status nginx

sudo ufw allow 80

sudo ufw allow 443

sudo ufw allow 8000

sudo ufw allow 3306

sudo ufw enable

now clone the react app from GitHub

then look where your src public pakage.json files are install these packages

npm install   

npm install react-quill

npm install bootstrap

npm install sanitize-html

In React app folder run the command to build file

npm run build

sudo rm -rf /var/www/html/*

sudo cp -r ~/react-frontend/build/* /var/www/html/

give permission

sudo chown -R www-data:www-data /var/www/html

sudo chmod -R 755 /var/www/html

then open 

sudo vim /etc/nginx/sites-enabled/default

server {

    listen 80;

    server_name 18.195.3.179;  # Replace with your server's IP or domain name

    # Serve the React frontend (Single Page Application)

    location / {

        root /var/www/html;  # Path to your React build directory

        index index.html index.htm;

        try_files $uri $uri/ /index.html;  # For client-side routing

    }

    # API requests to Django (all paths under /api)

    location /api/ {

        proxy_pass http://18.195.3.179:8000/;  # Assuming Django is running on port 8000

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_set_header X-Forwarded-Proto $scheme;

    }

    # Optionally, you can add configurations for SSL if using HTTPS

    # location / {

    #     ...

    # }

}

sudo systemctl restart nginx

sudo systemctl reload nginx

do changes in dabase in setting.py

DATABASES = {

    'default': {

        'ENGINE': 'django.db.backends.mysql',

        'NAME': 'database', replace with your database name

        'USER': 'root', replace with your username that you create during MySQL installation

        'PASSWORD': 'password', replace with your password

        'HOST': 'localhost',

        'PORT': '3306',

    }

}

In setting.py in Allowed Host add your public ip

ALLOWED_HOSTS = ['127.0.0.1', 'localhost', <your public IP>]

CORS_ALLOWED_ORIGINS = [

    'http://localhost:3000',  # React app URL

    '<http://yout public ip:3000>',

    '<http://yout public ip:80>',

    '<http://yout public ip>',

]