Deploys a code to Production | Frontend | Backend

Group 4441 e1600697554523

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

Deploys a code to Production

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.

Screenshot 2021 08 28 at 10.12.06 AM

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
Deploys a code to Production

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.

Deploys a code to Production

BACKEND SETUP

STEP 1: Install PM2 instance

npm i -g pm2
Deploys a code to Production

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>
Screenshot 2021 08 28 at 6.25.19 PM

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>
Deploys a code to Production

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
Deploys a code to Production

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!

2 Comments on "Deploys a code to Production | Frontend | Backend"

  1. Best Hostings Coupons | May 5, 2022 at 6:47 am | Reply

    An impressive share, I simply given this onto a colleague who was doing slightly analysis on this. And he in truth purchased me breakfast as a result of I discovered it for him.. smile. So let me reword that: Thnx for the treat! However yeah Thnkx for spending the time to discuss this, I feel strongly about it and love studying more on this topic. If potential, as you change into experience, would you mind updating your weblog with extra details? It’s extremely helpful for me. Massive thumb up for this weblog submit!

  2. HostingsCoupons.com | May 5, 2022 at 8:00 pm | Reply

    My wife and i ended up being relieved that Peter could carry out his survey from the ideas he gained from your web site. It’s not at all simplistic to just choose to be freely giving ideas which usually some others could have been making money from. And we fully understand we now have the blog owner to give thanks to for this. The entire illustrations you have made, the simple website menu, the friendships you help to promote – it’s many extraordinary, and it’s helping our son in addition to the family know that this topic is enjoyable, which is exceptionally vital. Many thanks for the whole lot!

Leave a comment

Your email address will not be published.


*