Deploys a code to Production | Frontend | Backend

In this blog, I will give a brief about how to set up a server and how to deploys a code to Production. Developers often find difficulty in setup the server and deploying code to production after developing some new fancy features. Deploying code to Production can be exciting as well as scary.

Deploying modern applications such as Angular, React, Node or Django is different from classic applications such as PHP. In PHP you just select the host(GoDaddy, Hostgator) and upload that file in CPanel and then everything is done. But in modern applications such as Angular, Node the Case is different. You can’t simply put the file on Server.

We need to set up a couple of accounts on a few services(“don’t worry it will not cost you”). In Company basically, deployment takes in various test production servers before making actually live. We have different kinds of environments such as Staging, Beta and then Live.

Push Code to GitLab Repository

STEP 1: Create a New Projects

STEP 2: Create a Blank Project

STEP 3: Enter Project Name and Provide Visibility Level and then click Create Project

STEP 4: Push your frontend and backend code in the main Branch using the below steps

cd existing_repo
git remote add origin https://gitlab.com/durgeshkashyap63/demo.git
git branch -M main
git push -uf origin main

Now your frontend and backend code is available in the git repository so you can clone anywhere you want.

Deploys a code to Production EC2 Server – Frontend & Backend

STEP 1: Register on AWS. You can follow the below AWS tutorial to Create an AWS Account.

STEP 2: After Account is Created Launch EC2 Instance(Free Tier). I gave launched t2.micro, Amazon Linux 2 OS.

STEP 3: Open Bash Shell or Terminal and run the below command to open the server on your terminal.

 ssh -i <pem file> [email protected]_IP

STEP 4: Install all resources that you need. I have installed httpd Server, MySQL Server, Node, Angular. Search Temporary Password in Terminal to get a temporary password. A temporary password is generated for [email protected]: YLe<bO<FR2S;

sudo su
yum install httpd -y
systemctl start httpd
systemctl enable httpd.service
yum localinstall https://dev.mysql.com/get/mysql57-community-release-el7-9.noarch.rpm -y
sudo rpm -ivh mysql57-community-release-el7-9.noarch.rpm
sudo yum install mysql-server -y
sudo systemctl start mysqld
grep 'A temporary password' /var/log/mysqld.log |tail -1
curl -sL  https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y git
sudo yum install -y nodejs
sudo npm install -g @angular/cli

You can Change MySQL Password using the below command

/usr/bin/mysql_secure_installation

STEP 5: Create User angular and node and give the necessary permission

useradd angular
sudo chown -R angular /var/www/
useradd node

FRONTEND SETUP

Clone angular Application in angular User on the path /var/www/html/ and run npm install and then ng build. It will generate a dist folder we will point to later on.

BACKEND SETUP

STEP 1: Install PM2 instance

npm i -g pm2

STEP 2: Clone Project in node user

STEP 3: Perform npm install in backend repo

STEP 4: Start pm2 instance

 pm2 start app.js --name <Instance Name>

Now both backend and frontend are set up and deployed on the server. Now whenever you make any changes to your code, push that code on GitHub and the pull on the server and then restart the instance.

If you want to deploy code on Jenkins then Please read Jenkins Tutorial. If you want to Containerized your code then Please read Docker Tutorial.

DOMAIN POINTING

Open vi /etc/httpd/cond.f/medical.conf and write the below configuration.

<VirtualHost *:80>
     ServerAdmin [email protected]
     DocumentRoot /var/www/html/medical-calculator
     ServerName <servername.com>
     ServerAlias <serveralias.com>

     <Directory /var/www/html/medical-calculator>
        AllowOverride All
        Order allow,deny
        allow from all
     </Directory>

     ErrorLog ${APACHE_LOG_DIR}/calculator_error.log
     CustomLog ${APACHE_LOG_DIR}/calculator_access.log combined
</VirtualHost>

Update Server with new Production Changes

STEP 1: Push Change Code using below command

git add -A
git commit -m "new commit"
git push origin main

STEP 2: Pull Code change using below command on server

git pull origin master

Read More: Dockerfile Tutorial | Dockerfile Example | 2021, Important Docker Tutorial for Beginners | 2021, Important Kubernetes Command | Kubectl Command | 2021, Setup Kubernetes Cluster in 15 minutes | 2021, Jenkins Overview

Hope you like our Deploys a code to Production blog. If you face any issues then please let us know in the comment section. Please Subscribe to our Blog for an upcoming blog.

Happy Coding!