Guide to Deploying a Website on DigitalOcean Droplet/Server

Guide to Deploying a Website on DigitalOcean Droplet/Server

1. Ensure that you've thoroughly tested, optimized, and uploaded your code to a GitHub repository.

YouTube Step-by-Step Tutorial: Guide to Deploying a Website on DigitalOcean Droplet/Server

2. Begin by creating a DigitalOcean account, you can sign up using this link (https://m.do.co/c/ac8ddb2ca45f) and get a $200 credit that is valid for 60 days and then proceed to create a droplet. Set either a password or an SSH key, along with a hostname for your droplet.

3. Log in to your droplet using a terminal by typing the following command:

ssh root@your-ip-address

4. Install Node.js and npm on Ubuntu. You can follow this guide to install them: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04

5. Clone your repository to your droplet. Make sure you've created a personal access token to clone it.

6. After cloning, navigate to the folder where you've cloned the code and run the command:

npm install

7. Once you've installed the required packages, start the project to ensure it's functioning correctly on your IP address.

8. Install Nginx on your droplet to host your website on a domain, sub-domain, or your droplet's IP address. You can follow this guide to install Nginx: https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-22-04

9. Link your domain or sub-domain and configure Nginx settings.

Move to the following folder and configure file:

/etc/nginx/sites-available 

Configuration code:

server {
    listen 80;
    server_name domain-or-sub-domain-url-here;

    root /folder-path;
    index index.html;

   location / {

        proxy_pass http://ip-address-here:port;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
       }
}
sudo nginx -t
sudo systemctl reload nginx

10. Enhance the security of your website by adding an SSL certificate. You can follow this guide to secure it: https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-22-04

11. Create a production build using the command

npm run build

12. Install PM2 and use it to keep your app running.

npm install pm2@latest -g
pm2 start npm --name "aamax" -- run start
pm2 save

Additional useful commands:

pm2 logs
pm2 status
pm2 restart {id}

Congratulations! Your app is now up and running smoothly. Alhamdulillah.

13. Consider enabling the backup for your droplet.

Note:

When uploading the backend code, you will require additional configurations for the backend and database, such as MongoDB and PostgreSQL.

Additionally, you can add multiple sites to your droplet.

Related Blogs

Comparative Advertising: What Is It and Why Should You Use It?

Comparative Advertising: What Is It and Why Should You Use It?

Comparative advertising explained—benefits, risks, legal tips, and proven strategies to effectively outshine your competitors.

Responsive Web Design Services for Your Website

Responsive Web Design Services for Your Website

Create a mobile-friendly, fast, and user-centric website with responsive web design. Ensure seamless performance across all devices and boost your onl...

SEO vs. PPC: Which is Better? [Pros, Cons, & More]

SEO vs. PPC: Which is Better? [Pros, Cons, & More]

Compare SEO and PPC marketing strategies. Explore pros, cons, costs, and when to use each to boost traffic, visibility, and ROI for your business.

What’s the Average Conversion Rate for Facebook Ads? It Depends

What’s the Average Conversion Rate for Facebook Ads? It Depends

Facebook Ads conversion rates vary widely. Learn what influences them, see industry benchmarks, and explore expert tips to boost your ad performance....

Why Isn't My Site Showing Up on Google? 10 Common Issues + Fixes

Why Isn't My Site Showing Up on Google? 10 Common Issues + Fixes

Struggling to find your website on Google? Discover 10 common reasons your site isn’t showing up and learn how to fix them step by step.

10 Free Online Portfolio Websites for Showcasing Your Work

10 Free Online Portfolio Websites for Showcasing Your Work

Show off your creative or professional work with these 10 free portfolio websites. Perfect for freelancers, students, and career-driven professionals....