Hello everyone, In this article I will talk about how can you deploy a react project with backend that is written in Go Gin Framework.

Prerequisites

· Should have domain and subdomains. I am going to use test.com, api.test.com, admin.test.com in this article.

· Should bind your domains to your public IP. You can search for how to Add A Record.

· Should have VPS (Virtual Private Server that has Linux Ubuntu OS)

Lets look at the basic artchitecture first.

Steps

1) Connect to VPS via SSH

To connect your vps via ssh, you should open the port 22. It usually comes open by default (If not then go to your provider and open that port from the panel).

2) Installing neccessary packages

Install nginx, firewall, golang, npm and git.

apt install nginx
apt install ufw
apt install golang-go
apt install nodejs  //(or apt install npm)apt install git

3) Enable firewall

ufw enable
ufw allow ssh //(dont forget. If you forget, you may not connect again to your vps 😊)ufw allow “Nginx Full”ufw status

4) Clone your projects into somewhere using git clone. (for our example they are client, admin-panel and backend)

5) Remove the static html folder inside /var/www and create your folders.

rm -rf /var/www/htmlmkdir /var/www/test/client //(It ‘ll keep the build files for react client)
mkdir /var/www/test/admin-panel //(It ‘ll keep the build files for react admin-panel)

Note: We did not create a folder for the backend, because we dont need to publish any static file for it.

6) Create build files and copy to /var/www

Go to your project directory and run this command. I assume you ‘ve already run npm install to get dependent packages for the project.

---For Client---
npm run build
cp -r build/* /var/www/test/client

--For Admin Panel---

npm run build
cp -r build/* /var/www/test/admin-panel

7) Configure nginx

Firstly delete the default nginx configuration files. To do that;

rm /etc/nginx/sites-available/defaultrm /etc/nginx/sites-enabled/default

Create your own file;

nano /etc/nginx/sites-available/test

Configure the nginx file;

server {
listen 80;
server_name test.com www.test.com
location / {
root /var/www/test/client;
index index.html index.htm;
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;
try_files $uri $uri/ /index.html;
}
server {
listen 80;
server_name admin.test.com
location / {
root /var/www/test/admin-panel;
index  index.html index.htm;
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;
try_files $uri $uri/ /index.html;
}
server {
listen 80;
server_name api.test.com
location / {
proxy_pass http://<your-public-ip>:<backend-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;
}
}

Link the sites-available and enabled files;

ln -s /etc/nginx/sites-available/test /etc/nginx/sites-enabled/test

Restart nginx;

sudo systemctl restart nginx

We ‘ve configured the nginx. Client and admin panel should be working at the moment. But how about our backend? We should keep it running. Of course you can do it manually by running main.go, but there is a way to do it defaultly when the machine starts.

We’ve set the port 8080 for our backend. Therefore your backend should be listening this port, but ofc you are free to change it as you wish.

To run your backend automatically, pm2 is a good choice.

Firstly, lets install pm2 package globally using npm.

npm install  -g pm2

Now, go to your backend project directory and run this;

pm2 start --name api “go run main.go”

Set pm2 start-up;

pm2 startup ubuntu

As you know, our domain is not using SSL. If you want to active ssl certification; (Do not forget to replace your backend urls from the clients as https://)

apt install certbot python3-certbot-nginx
certbot --nginx -d test.com -d api.test.com -d admin.test.com

Certificates are only valid for 90days. If you want to refresh them automatically, set a timer;

systemctl status certbot.timer

Annd, thats all! I hope its worked. Thank you for your time. If you have any questions feel free to contact me 🙂 See you in the next article.