How to deploy web app on vps

Deploying web application on Hostinger VPS Preparing the VPS Environment Setting Up the MongoDB Database Deploying the Express and Node.js Backend Deploying the React Frontends Configuring Nginx as a Reverse Proxy Setting Up SSL Certificates 1. Preparing the VPS Environment Log in to Your VPS in Terminal ssh root@your_vps_ip Update and Upgrade Your System sudo apt update sudo apt upgrade -y Install Node.js and npm ( if not pre-installed) curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash - sudo apt-get install -y nodejs Install Git sudo apt install -y git 2. Deploying the Express and Node.js Backend Clone Your Backend Repository mkdir /var/www cd /var/www git clone https://github.com/yourusername/your-repo.git cd your-repo/backend Install Dependencies npm install Create .env file & configure Environment Variables nano .env add environment variables then save and exit (Ctrl + X, then Y and Enter). Installing pm2 to Start Backend npm install -g pm2 pm2 start server.js --name project-backend Start Backend on startup pm2 startup pm2 save Allowing backend port in firewall sudo ufw status If firewall is disable then enable it using sudo ufw enable sudo ufw allow 'OpenSSH' sudo ufw allow 4000 3. Deploying the React Frontends Creating Build of React Applications cd path-to-your-first-react-app npm install If you have ".env" file in your project Create .env file and paste the variables nano .env Create build of project npm run build Repeat for the second or mulitiple React app. Install Nginx sudo apt install -y nginx adding Nginx in firewall sudo ufw status sudo ufw allow 'Nginx Full' Configure Nginx for React Frontends nano /etc/nginx/sites-available/yourdomain1.com.conf server { listen 80; server_name yourdomain1.com www.yourdomain1.com; location / { root /var/www/your-repo/frontend/dist; try_files $uri /index.html; } } Save and exit (Ctrl + X, then Y and Enter). Create a similar file for the second or multiple React app. nano /etc/nginx/sites-available/yourdomain2.com.conf server { listen 80; server_name yourdomain2.com www.yourdomain2.com; location / { root /var/www/react-app-2/dist; try_files $uri /index.html; } } Create symbolic links to enable the sites. ln -s /etc/nginx/sites-available/yourdomain1.com.conf /etc/nginx/sites-enabled/ ln -s /etc/nginx/sites-available/yourdomain2.com.conf /etc/nginx/sites-enabled/ Test the Nginx configuration for syntax errors. nginx -t systemctl restart nginx 4. Configuring Nginx as a Reverse Proxy Update Backend Nginx Configuration nano /etc/nginx/sites-available/api.yourdomain.com.conf server { listen 80; server_name api.yourdomain.com; location / { proxy_pass http://localhost:4000; 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; } } Create symbolic links to enable the sites. ln -s /etc/nginx/sites-available/api.yourdomain.com.conf /etc/nginx/sites-enabled/ Restart nginx systemctl restart nginx Connect Domain Name with Website Point all your domain & sub-domain on VPS IP address by adding DNS records in your domain manager Now your website will be live on domain name 5. Setting Up SSL Certificates Install Certbot sudo apt install -y certbot python3-certbot-nginx Obtain SSL Certificates certbot --nginx -d yourdomain1.com -d www.yourdomain1.com -d yourdomain2.com -d api.yourdomain.com Verify Auto-Renewal certbot renew --dry-run If you still need help in deployment: Contact us on email : lightbeam9811@gmail.com

 ssh root@your_vps_ip

  sudo apt update

  sudo apt upgrade -y

  curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -

  sudo apt-get install -y nodejs

  sudo apt install -y git

 mkdir /var/www

 cd /var/www

 git clone https://github.com/yourusername/your-repo.git

 cd your-repo/backend

 npm install

 nano .env

 npm install -g pm2

 pm2 start server.js --name project-backend

 pm2 startup

 pm2 save

 sudo ufw status

 sudo ufw enable

 sudo ufw allow 'OpenSSH'

 sudo ufw allow 4000

 cd path-to-your-first-react-app

 npm install

 nano .env

 npm run build

 sudo apt install -y nginx

 sudo ufw status

 sudo ufw allow 'Nginx Full'

 nano /etc/nginx/sites-available/yourdomain1.com.conf

 server {
    listen 80;
    server_name yourdomain1.com www.yourdomain1.com;

    location / {
        root /var/www/your-repo/frontend/dist;
        try_files $uri /index.html;
    }
}

 nano /etc/nginx/sites-available/yourdomain2.com.conf

server {
    listen 80;
    server_name yourdomain2.com www.yourdomain2.com;

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

ln -s /etc/nginx/sites-available/yourdomain1.com.conf /etc/nginx/sites-enabled/

ln -s /etc/nginx/sites-available/yourdomain2.com.conf /etc/nginx/sites-enabled/

nginx -t

systemctl restart nginx

nano /etc/nginx/sites-available/api.yourdomain.com.conf

server {
    listen 80;
    server_name api.yourdomain.com;

    location / {
        proxy_pass http://localhost:4000;
        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;
    }
}

ln -s /etc/nginx/sites-available/api.yourdomain.com.conf /etc/nginx/sites-enabled/

systemctl restart nginx

sudo apt install -y certbot python3-certbot-nginx

certbot --nginx -d yourdomain1.com -d www.yourdomain1.com -d yourdomain2.com -d api.yourdomain.com

certbot renew --dry-run

What's Your Reaction?

0

Like

0

Dislike

0

Love

0

Funny

0

Angry

0

Sad

0

Wow

Related Posts

浮躁的AI编程 - FAV0周刊#027

Jan 19, 2025  0

Build the future of home with Google Home APIs

Jan 14, 2025  0

Jan 15, 2025  0