DigitalOcean is a cloud infrastructure provider that offers various cloud computing services. It enables developers to deploy and scale applications easily by providing virtual servers, known as Droplets, along with other services like managed databases, object storage, and networking features. DigitalOcean is popular among developers, startups, and small to medium-sized businesses due to its simplicity, cost-effectiveness, and user-friendly interface.
Node.js is an open-source, server-side runtime environment that allows developers to run JavaScript code outside of a web browser. It is built on the V8 JavaScript runtime engine and enables the execution of JavaScript on the server, facilitating the development of scalable and high-performance network applications. Node.js is particularly well-suited for building real-time applications, APIs, and server-side applications that require handling concurrent connections efficiently. It utilizes an event-driven, non-blocking I/O model, making it suitable for handling asynchronous operations and enhancing the responsiveness of applications. Node.js has a large and active community, along with an extensive ecosystem of packages and libraries available through npm (Node Package Manager).
To deploy your React frontend and NodeJs backend on Digital Ocean Cloud Hosting, follow these steps:
Create a Droplet
- Sign up for DigitalOcean.
- After signing up and logging in, click on "Create A Droplet."
- Follow the steps, create a password, and choose Ubuntu version 20.04 to enable MongoDB installation later.
- Once the droplet is created, note the IP address (e.g., 12.345.45.678).
Access Your Droplet
- Use the terminal to log in to your droplet: ssh root@12.345.45.678.
- Confirm connection and enter the password.
NGINX Configuration
- Install NGINX on your droplet: sudo apt-get install nginx.
- Navigate to the NGINX configuration directory: cd /etc/nginx/sites-available.
- Open the default file for editing using vim: sudo vim default.
- Replace the existing location block with the provided code to configure NGINX for your backend and frontend.
- Save and exit the file in vim by pressing ESC, typing :wq, and hitting enter.
- Check for typos: sudo nginx -t.
- Restart NGINX to apply changes: sudo systemctl restart nginx.
GitHub Repository Setup
Create separate repositories for your backend and frontend on GitHub.
Push your code from your computer to GitHub, excluding node_modules and config/env files in .gitignore.
To Clone Repositories to Droplet, In your droplet, go to the root directory: cd.
Clone both backend and frontend repositories using sudo git clone.
To create .env or Config Files, Inside each project folder, create .env files with production environment variables.
Install NodeJs and Packages
- Install the latest NodeJs version using nvm.
- Install packages for both frontend and backend using npm.
Run Projects Using PM2
For the frontend, run the production build using pm2.
For the backend, start the server with pm2.
To start backend
pm2 start server.js
To start frontend
pm2 start npm -- start
To restart all running process after you make git pull request (after some code change/updates) and ran npm run build
pm2 restart all
To kill the running process
pm2 kill
SSL Certificate
For free SSL, use Let’s Encrypt on Digital Ocean. Install certbot first:
sudo apt install certbot python3-certbot-nginx
cd /etc/nginx/sites-available
sudo vim default
obtain a new SSL certificate for free from Let's Encrypt by using this command:
sudo certbot --nginx -d yourwebsite.com -d www.yourwebsite.com
Congratulations! You have successfully deployed full-stack JavaScript projects on Digital Ocean.
0 comments:
Post a Comment