Deploy React.js (create-react-app) Node.js to DigitalOcean Cloud Hosting

React.js & Express.js ES6 Build and Deployment

Get DigitalOcean account

I have been using DigitalOcean for me and setup for my customers, so recommend use it for your project just pick vps depend on how big of your project start at 5$ or 10$, 20$, price very flexibility. DO providing SSD cloud hosting but good price i dont think you can get same price on other providers with same quality. beside their support very fast and well documentation , friendly UI for end-user. so let get start register an account and deploy your app at DigitalOcean.com

Setup Ubuntu on DigitalOcean Cloud VPS

• This tutorial i will use Ubuntu and i also recommend this OS for your vps. but it is your choose. for me i use Ubuntu 16.04 version. for price it is depend on how big of your project how many trafics to. for me i start at 20$/month is good start and then we can upgrade.
• Choose a datacenter region: DigitalOcean has many datacenters that mean you can pick one for your project if your visitors almost from NY United States let select New York, so example if i target all visitors from Vietnam for a project so i can pick a datacenter near Vietnam is Singapore.
• Select additional options: if you want to have additional backup service, or private network.
• Add your SSH keys: you can genrate your ssh key on your computer and copy it to your vps and that mean when you login from ssh dont have to enter the password of root account any more, save your time and more security, if you would to know how to generate ssh key and use it on DigitalOcean hosting let see this article
• Droplet default is 1 if you want to setup mutiply droplets at once time let use it.
• name of your droplet and click submit, just get a cup of coffee and wait a moment for DigitalOcean setup for you. until you see “Happy coding!” Your cloud vps is ready to use.
• Check your email address that you did register in DigitalOcean you shold get an email notify about your VPS IP, root account and password. here is format of your email Droplet Name: [Name of your Droplet] IP Address: [your-vps-IP] Username: root Password: [your-root-password-generated-by-robot]

• 
  

  Login to your vps with following commandssh root@YOUR-IP-ADDREESS

• now enter your root password that in your email. You will asking for change new password at the first time.
• Server will ask you current password again (this is password in your email)
• Enter new password
• Confirm password , and remember it for later.
• Done and happy setting up your cloud.

Configure Firewall on your Cloud

This is very important step we need to do. so we need to reconfigure our firewall software to allow access to the service

I recommend open port only for 80,443, ssh (port 22), but it is depend on your project may need more port open for other service. in this project we need open port 80 for http access, 443 https (ssl) , and port 22 (for ssh login) that is enough.

Install Nginx

apt-get update

sudo apt-get install nginx

By default Firewall is inactive, you can check it by run command sudo ufw status

sudo ufw app list

So let config FW allow those ports by

sudo ufw allow 'Nginx Full'

sudo ufw allow 'OpenSSH'

sudo ufw enable

Setup Nodejs on DigitalOcean Ubuntu 16.04

We are using Node.js for Backend and will serve static files of react application build. So Node.js is required

visit https://nodejs.org/en/download/package-manager/ to see the documentation

We use package management to install, here is command to install Node.js v9

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

sudo apt-get install -y nodejs

After successful Node.js installed we can check the version by typing in command line : node -v and you see see "v9.3.0"

Setup MongoDB v3.6 on DigitalOcean Ubuntu 16.04 Cloud VPS

We are using MongoDB for database in backend restful service so let install Mongodb by follow the documentation https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/

Import the public key used by the package management system

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 2930ADAE8CAF5059EE73BB4B58712A2291FA4AD5

Create a list file for MongoDB (Ubuntu 16.04)

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.6 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.6.list

Reload local package database

sudo apt-get update

Install the latest stable version of MongoDB

sudo apt-get install -y mongodb-org

Start MongoDB (Port running default: 27017)

sudo service mongod start

If You Want to Stop MongoDB

sudo service mongod stop

Or Restart MongoDB

sudo service mongod restart

Install Nginx — Http Proxy Server.

Let me explain to you very simple why we do use Nginx for this Nodejs Web application. Example: Our Chat app when we start it running on port 3000 that is default of Nodejs application running. we can change the port to 3001 or 3002, or 8080 … so if you pointed your domain tabvn.com to Degital Ocean cloud vps so this case we can visit the chat app in http://tabvn.com:3000 so we need just see nodejs web app in default port 80 such at http://tabvn.com , that is why we use Nginx.

To install Nginx visit the documentation from official http://nginx.org/en/linux_packages.html

So we will run following command on Ubuntu Cloud Hosting 16.04

apt-get update

sudo apt-get install nginx

Start Nginx: open your IP address ex: http://123.456.789 you should see “Welcome to nginx!”, all Nginx config in our cloud is in /etc/nginx/nginx.conf

sudo nginx

Stop Nginx

sudo nginx -s stop

Reload Nginx

nginx -s reload

Fixed issue of bcrypt on Ubuntu 16.04

sudo apt-get install build-essential

Nginx config sample support WebSocket

Nginx Websocket document: http://nginx.org/en/docs/http/websocket.html

server {        listen 80;        root /var/www/html;        location / {                proxy_pass http://127.0.0.1:3001;                proxy_http_version 1.1;                proxy_set_header Upgrade $http_upgrade;                proxy_set_header Connection "upgrade";        }}

Video: https://www.youtube.com/watch?v=wJsH45eWNBo