node.jsreactjsmongodbdigital-oceanmern

How to deploy different MERN apps to digital ocean on a single droplet?

I've always used heroku to deploy my MERN apps. For the mongo db I use MongoDB Atlas, but in my job they want to migrate all the projects to DigitalOcean. I have several questions regarding this:

  1. Can I have mongoDB + nodejs backend + react app on a single droplet?
  2. Can I deploy two or more apps in a single droplet? (The apps have different domains)
  3. Is there a video tutorial about this (I've read lots of documentations and got many errors while trying to do it. My eyes hurt 🙃)
  4. For example if I have in Heroku two apps for the same website, one app for the nodejs backend and another one for the react frontend... can I do the same on DigitalOcean?

Thanks in advance!

Solution

  • Yeah, you can deploy multiple services in a single server, they just need to be listening on different ports.

    For example, let's consider that a MongoDB server is running on port 27017, a Node.js http server is running on port 5000, and a React app is running on port 8000.

    Say, your server's IP is 13.13.13.13.

    Then you can access your MongoDB server, Node.js http server, and React app using 13.13.13.13:27017, 13.13.13.13:5000, and 13.13.13.13:8000, respectively, from anywhere in the Internet where your IP isn't blocked.

    Now, in your server, you set up iptables to forward all incoming connections from port 8000 to 80. Now, you can access your React app by visiting 13.13.13.13, no need to use the port anymore.

    Now, let's say, you add DNS records for example.com and api.example.com to point to your IP. And since you can't have A records or CNAME records pointing to a port, both of your domains will direct you to your React app. You'll have to explicitly specify the port number along with your domain if you want to access your Node.js backend, like http://example.com:5000, or http://api.example.com:5000.

    If you don't want to access your backend using the port number, you can make use of Nginx as a reverse proxy. You can set up Nginx to route all the traffic to api.example.com to your backend server listening on localhost:5000.