Create React App Deployment to VPS Cloud Server

Create React App deployment to VPS Cloud Server

Covered topics in this material

This post is showing deployment of create-react-app to VPS cloud server.

Topics

1. Create React App — to create app, or use your previously built application
2. Push your app to GitHub Repository
3. Create VPS cloud server
4. Create new SSH key pair to connect your server to GitHub
5. Run nginx server
6. Push GitHub code to VPS cloud server
7. Add your own domain name to VPS
8. Create SSL certificate to allow your app use https, instead of http.

Why am I writing this material?

1. I am using Create React App to easily build a new web application
2. There is a lot different information on the web how to deploy React App to Netlify or Heroku. And it is easy, but expensive
3. I do not like prices of Heroku: e.g. 50$/month for 1GB Ram dyno
4. Heroku pushes you to use CNAME DNS records, instead of using A record
5. Heroku does not allow you to be flexible enough to make everything you want
6. Not so easy to manage SSL certificates, for custom domains, if deployed to Heroku

Solution: I will deploy my applications to scalable VPS cloud hosting

I was looking for effective and complex manual on the web, but could not really find it. So let’s start and build my own first publicly available manual. Enjoy, and I hope you will like it! ;)

Important:

1. If you do not have your React App, then read all the material. I will try to cover all steps.
2. If you have your React App and just need to deploy it to VPS cloud hosting skip first part and use this link to start reading.

Use Create React App to create new App

Hopefully you have git installed on your local machine. If not, please find a manual on the web, how to install it and create a github account.

Do not forget to enable two-factor authentication on github, and switch to SSH connection.

Now we should install create-react-app on our local computer. Manual can be found here. In short it is:

npx create-react-app my-app
cd my-app
npm run start

If everything is fine, you should see spinning React App logo opened in your browser on http://localhost:3000/. If not - something went wrong, to find and fix a problem follow create-react-app documentation.

Push newly created app to your GitHub repository

1. Open GitHub and press New button next to your repositories list
2. Fill in repository name, and click Create repository
3. Go to your local computer CLI and type:

git add .
git commit -m ‘my first commit’
--- Copy following commands from GitHub ---
…or push an existing repository from the command line
git remote add origin ......
git branch -M master
git push -u origin master

When it is done, go back to your browser window and refresh your new repository page. If everything is fine you should be able to see your code on GitHub.

Create VPS cloud server

I will use VPS hosting provider servers.com, but you are free to choose any other cloud server provider. Here are some coupons to test services for free:

1. Create your servers.com account and get 5 EUR free.
2. Create your servers.com account and get 50 EUR free.

For my basic need I will rent cheapest VPS in my location. As soon as you have registered your account:

1. Generate a new SSH key to access your VPS server. If you do not know how to do it use this link to manuals
2. As soon as you have created and added your SSH key to your account, click on Cloud Servers -> Create & Manage -> Create Server
3. Select your region
4. Select image: Ubuntu 20.04-server (64 bit)
5. Configuration SSD.30- it should be enough for now.
6. Remove BackUp functionality, if you do not need it
7. Type name for your server
8. Click Create Cloud Server
9. After ~1 minute refresh a page and you should be able to see newly created VPS machine. You will also receive an email, as soon as it is ready

Connect to our VPS cloud server and create new SSH key pair for VPS- GitHub connection

Now we are ready to connect to our VPS.

1. Click on machine name, to see a details
2. Open putty and follow instructions to connect to it.
3. When you are logged in, it is time to add one more ssh key to your server, to connect to GitHub. I do it because I am keeping production applications in private repositories, because I do not want to make commercial code open. And of course we should use two-factor authentication to secure our GitHub account.
4. Run following commands on server:

--- Use following commands to generate new SSH key pair ---
sudo su
ssh-keygen -t rsa -b 4096 -C “YOUR_EMAIL@YOUR_DOMAIN.com”
eval “$(ssh-agent -s)”
ssh-add ~/.ssh/id_rsa
--- To view public key: ---
cat ~/.ssh/id_rsa.pub

1. Now you should be able to see new public SSH key in your server console
2. Go to github
3. Click on your profile photo -> Settings -> SSH and GPG keys
4. Click New SSH key
5. Paste any title for your key, and copied from server console public key, and click Add SSH Key
6. Now you should be able to see that your key was added and is available.

Run NGINX server & Clone repository to server

To run our application, we will use nginx server.

First we should install some dependencies

sudo apt-get update
sudo apt-get install nginx
sudo apt-get install git
sudo apt install nano

1. When it is done, we can clone repository to server
2. Go to your GitHub repository an click on Code button
3. Click SSH and copy shown in pop-up remote URL
4. Make sure you are root user on your VPS. If not type: sudo su

cd /var/www
git clone git@github.com:YOUR_ACCOUNT/YOUR_REPO_NAME.git
cd YOUR_REPO_NAME
npm install
npm run build
npm install -g serve
npm install -g pm2
pm2 serve <path> <port> --spa
e.g. pm2 serve build/ 5000 --spa

Now we should be able to see table

If Create React App build runs you should see this table

Great! Now let’s setup NGINX server.

cd /etc/nginx/sites-available
nano default

For now we will not use domain name, just IP address. But we will attach domain name later. Go to servers.com dashboard and get your server public IP address, than change YOUR_SERVER_PUBLIC_IP_ADDRESS in the code below to your server public IP address. Do not change http://127.0.0.1:5000 — it is localhost address. Now go to the end of “default” opened file and paste following code in.

map $http_upgrade $connection_upgrade {
    default         upgrade;
    ''              close;
}
server {
     
       server_name YOUR_SERVER_PUBLIC_IP_ADDRESS;
       
       location / {
        # Backend nodejs server
        proxy_pass         http://127.0.0.1:5000;
        proxy_http_version  1.1;
        proxy_set_header    Upgrade     $http_upgrade;
        proxy_set_header    Connection  $connection_upgrade;
    }
}

Save changes, and now we should test, nginx configuration

nginx -t

If everything is right, you should see:

If you see a success messages, we can restart nginx.

systemctl restart nginx

Let’s test it. Now we should be able to go to our VPS server public IP address in browser, and see our project live.

Add our own domain name

I will use Uniregistry to register my domain name, if you want to use any other registry you are free to do so.

To create Uniregistry account follow this link.

Choose and buy your new domain name. As soon it is done, and you know your new domain name, let’s use it.

We should go back to server and change nginx configuration

cd /etc/nginx/sites-available
nano default

Go to the end of the document and find a configuration we just changed before. And now change it to

map $http_upgrade $connection_upgrade {
    default         upgrade;
    ''              close;
}
server {
     
       server_name your-new-domain.com www.your-new-domain.com;
       
       location / {
        # Backend nodejs server
        proxy_pass         http://127.0.0.1:5000;
        proxy_http_version  1.1;
        proxy_set_header    Upgrade     $http_upgrade;
        proxy_set_header    Connection  $connection_upgrade;
    }
}

So we should change VPS public address to your newly bought domain name.

Save changes.

Now we are ready to make DNS records change in Uniregistry or any other registry.

In case you use Uniregistry:

1. Go to Manage
2. Click your domain name
3. Go to NS / DNS Records
4. Click NEW RECORD

Important! After you save your DNS settings, it could take 24–48 hours for your change to fully take effect.

How to check if DNS is now pointing to the right address?

Type this commands in your local machine console.

Linux users

host YOUR_DOMAIN_NAME.com

Windows users

nslookup YOUR_DOMAIN_NAME.com

This commands will return you an IP address, where DNS settings for this domain name are pointing now. If you see your VPS public IP address, then DNS changes took effect.

Great, now we should be able to see our React App live and hosted on VPS. Last thing we are missing SSL certificate, to make our app secure.

Add SSL certificate to use https protocol

sudo apt install snapd 
sudo snap install --classic certbot
cd /
certbot --nginx -d yourdomain.com -d www.yourdomain.com
systemctl restart nginx

That’s it! Now your project should be live and secure.

Thanks for reading, and hope you like this manual.

My Linkedin

MVP development — Minimum Viable Product development in just 6 weeks

Digital Product development