DEV Community: Harrsh Patel

How to deploy server using Nginx

Harrsh Patel — Tue, 26 Dec 2023 11:58:00 +0000

Terminologies -

Project name - Blogify
Domain name - harrsh.com

To host the website or server using Nginx, we would have to follow the following steps:

1. Create server

For this blog, we will create the server using AWS.
We can create an ec2 t2.small instance with Ubuntu OS.

2. Install Nginx

Update the fresh Ubuntu server.

sudo apt update
sudo apt upgrade

Install Nginx

sudo apt install nginx

3. Clone repositories

We will create a folder named server and will clone a GitHub repository of a simple Express server.

mkdir server
git clone https://github.com/rwieruch/node-express-server

We will also clone the ReactJS website for this blog.

mkdir client
git clone https://github.com/rwieruch/node-express-server

For hosting the static websites we place it in the project folder of Nginx.
Go to the folder www.

sudo cp -r client /var/www/html/blogify

4. Configure Nginx

We will create a new Nginx configuration file in Nginx's sites-available folder. We usually create the file with the name of the Domain name to be used for that file.

cd /etc/nginx/sites-available
sudo nano harrsh.com

We will write the following code block to configure Nginx with our API and website

// API server block
server {
    server_name api.harrsh.dimboo.io;

    location / {
        proxy_pass http://localhost:8000;
        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;
    }
}

// API server block
server {
    listen 80;
    server_name api.harrsh.com;
}

// Website server block
server {
    server_name harrsh.com;
    location / {
        root /var/www/html/blogify/dist;
        try_files $uri $uri/ /index.html;
    }
}

// Website server block
server {
    listen 80;
    server_name harrsh.com;
}

We will now mirror sites-available to sites-enabled

sudo ln -s /etc/nginx/sites-available/harrsh.com /etc/nginx/sites-enabled/

5. Start API server

To automatically restart the server we will use pm2 package.

npm i pm2 -g
pm2 start npm --name "blogify-server" -- start
pm2 startup

6. Configure DNS records

To point the domains to our server, you need to add the A record in our DNS records to redirect to our server.

7. Install SSL certificates

To get the SSL certificates of our API and Website, we will use the service of Certbot.

sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
sudo certbot --nginx

To renew the certificates automatically

sudo certbot renew --dry-run

Manage multiple Git accounts

Harrsh Patel — Fri, 20 Jan 2023 17:05:49 +0000

Open your terminal / CMD PROMPT and type the following command:

ssh-keygen -t rsa -C "your_email@example.com"

For example, 2 keys created at:

~/.ssh/id_rsa_work
~/.ssh/id_rsa_personal

Then, add these two keys as following:

$ ssh-add ~/.ssh/id_rsa_work
$ ssh-add ~/.ssh/id_rsa_personal

You can check your saved keys:

$ ssh-add -l

Add or modify the ssh config

$ cd ~/.ssh/
$ touch config
$ nano config

Add the following lines to the file

# Personal account
Host github.com-personal
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_personal

# Work account
Host github.com-work
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_work

Clone you repo using

git clone git@github.com-personal:<username>/<repo name>.git
git clone git@github.com-work:<username>/<repo name>.git

Deploy MySQL in Ubuntu server

Harrsh Patel — Sat, 17 Sep 2022 12:57:48 +0000

Create a new ssh key in your computer.
Add the pub key to the AWS key pair directory.
Create new Ubuntu server and add access to port 3306 to it.
Connect to server using the same key.

Run the following commands in the server.

sudo apt update
sudo apt upgrade -y
sudo reboot

Open ports for UFW.

sudo ufw allow OpenSSH
sudo ufw allow 3306
sudo ufw enable

Install NGINX

sudo apt install nginx

Check if NGNIX is working by accessing the public ipv4 address in the browser.

Allow NGINX for UFW.

sudo ufw app list
sudo ufw allow 'Nginx Full'

Setup MySQL.

sudo apt install mysql-server
sudo mysql

Exit if everything worked.

Install phpMyAdmin.

sudo apt install php-fpm php-mysql
sudo apt install phpmyadmin php-mbstring php-zip php-gd php-json php-curl

Create new SQL user.

sudo mysql

mysql> CREATE USER '<user>'@'localhost' IDENTIFIED WITH caching_sha2_password BY '<password>';
mysql> GRANT ALL PRIVILEGES ON *.* TO '<user>'@'localhost' WITH GRANT OPTION;
mysql> exit

Copy phpMyAdmin configuration to NGINX.

sudo ln -s /usr/share/phpmyadmin /var/www/html/phpmyadmin
sudo service nginx restart
sudo nano /var/www/html/index.php

Add the following lines

<?php
phpinfo();
?>

sudo service nginx restart
php -v

Check the PHP version from here.

sudo nano /etc/nginx/sites-available/default

Change the PHP version.

include fastcgi_params;
fastcgi_index index.php;
fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;

sudo service nginx restart
sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

# Change the bind address to 0.0.0.0

sudo systemctl restart mysql

Change host of the MySQL user.

sudo mysql
mysql> SELECT User, Host FROM mysql.user;
mysql> UPDATE mysql.user SET HOST='%' WHERE User='<user>';
mysql> SELECT User, Host FROM mysql.user;

# % is the wildcard to connect from everywhere.

mysql> exit

GitHub with SSH

Harrsh Patel — Thu, 25 Aug 2022 05:08:00 +0000

Ever wondered how to work with the GitHub account associated with a different email address than the one set-up in your machine? We can do it with SSH Key.

In this article, we will see how to set up a GitHub repository with SSH.

Step 1 - Create an SSH Key

ssh-keygen -t ed25519 -C "<your email address>"

Step 2 - Copy the SSH Key

clip < <path of the ssh key>

Step 3 - Add SSH key to the GitHub account

Go to the URL https://github.com/settings/ssh/new
Add the Title of the key.
Paste the key in the Key field.

Step 4 - Check if the SSH Key is validated

ssh -T git@github.com

Step 5 - Link the GitHub repo to the SSH Key

git remote set-url origin git@github.com:<your username>/<repository name>.git

Step 6 (Optional) - Set git username and email

git config user.email "<your email address>"
git config user.name "<your name>"

You can now perform the Git operations for your repository.

Secure Jenkins with Nginx

Harrsh Patel — Sun, 07 Aug 2022 06:41:00 +0000

Part 1 - Configure Nginx for Jenkins

Add a new A record for Jenkins with the ipv4 address of the server.
Add a new server block below the existing server blocks.
Sample server block looks like,

server {
    server_name <domain-name for Jenkins>;

    location / {
        proxy_pass http://localhost:8080;
        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;
    }
    listen 80;
}

Check nginx config via,

sudo nginx -t

Restart nginx via,

sudo service nginx restart

Check if everything worked fine by going to the URL in the browser. It should open the Jenkins UI.

Part 2 - Configure SSL for Jenkins

Follow the instructions at Offical website of certbot.

Part 3 - Configure Nginx for Jenkins

sudo nano /etc/nginx/sites-available/default

Edit file for Jenkins server block.

server {
    # SSL Configuration
    access_log /var/log/nginx/jenkins.access.log;
    error_log /var/log/nginx/jenkins.error.log;
}

Install Jenkins on Ubuntu server

Harrsh Patel — Sun, 07 Aug 2022 06:34:00 +0000

Part 1 - Download and install Jenkins

wget -q -O - https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo apt-key add -

sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'

sudo apt update

sudo apt install jenkins

Part 2 - Starting Jenkins

sudo systemctl start jenkins

sudo systemctl status jenkins

Part 3 - Opening the Firewall

sudo ufw enable

sudo ufw allow OpenSSH

sudo ufw allow 8080

Check the UFW status via,

sudo ufw status

Part 4 - Setting Up Jenkins

Open the url :8080 in your browser.
Get the unlocking password from,

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

Click the Install suggested plugins option.
Set-up the admin user.
Assign the url :8080 in the Instance Configuration page.
Save the details and the Jenkins is set on the server.

Install JDK in Ubuntu server

Harrsh Patel — Sun, 07 Aug 2022 06:18:00 +0000

Part 1 - Install JRE

sudo apt update

sudo apt install default-jre

java -version

Part 2 - Install JDK

sudo apt install default-jdk

javac -version

Multiple server with Nginx

Harrsh Patel — Sat, 06 Aug 2022 17:39:00 +0000

Part 1 - Get server instance

Create a Ubuntu server with any provider like AWS, Linode, DigitalOcean, etc.
Add a ssh key.

Part 2 - Get domain name

Get a domain name from any provider like BigRock, Google, etc.
Add an A record with the ipv4 address of the server.
You can add multiple A records with different subdomains with the same ipv4 address.

Add the records in your domain provider DNS only. Don't create new domain in the server provider.

Part 3 - Server connection from local machine

Login via ssh.
Run the following commands,

sudo apt update

sudo apt upgrade -y

Reboot your instance.
Login again via ssh.
Install Node.js via,

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

sudo apt install nodejs

node --version

Create the folder(s) of your server and write the code for it.
Sample server code is,

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Part 4 - Install pm2

sudo npm i pm2 -g

pm2 start <server-file-name> --name "<process name>"

Part 5 - Setup ufw firewall

sudo ufw enable

sudo ufw status

sudo ufw allow ssh (Port 22)

sudo ufw allow http (Port 80)

sudo ufw allow https (Port 443)

Part 6 - Install NGINX and configure

sudo apt install nginx

sudo nano /etc/nginx/sites-available/default

Sample server block looks like,

server {
    server_name <domain-name>;

    location / {
        proxy_pass http://localhost:<port of server>;
        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;
    }
    listen 80;
}

Add this to show default page for all the other URLs,

server {
    server_name <IPV4 address of the server>;
    root /var/www/html;
    index  index.nginx-debian.html;
    listen 80 default_server; 
}

Check nginx config via,

sudo nginx -t

Restart nginx via,

sudo service nginx restart

Part 7 - Add SSL with Certbot

Follow the instructions at Offical website of certbot.

CSS Grid

Harrsh Patel — Sat, 16 Oct 2021 09:10:12 +0000

Hereby I am sharing the code for making columns and rows of flexible width and height using CSS Grid.

Here I have shared the not so common property grid-row and grid-column. It has to be used in the child which needs to be expanded.

The complete code for it is attached below.

How to setup Firefox Developer Edition on Ubuntu

Harrsh Patel — Fri, 08 Oct 2021 12:43:02 +0000

Do you want to install and use Firefox Developer Edition on your Ubuntu and don’t know how to go about it?! If your answer is yes, then this article is for you. Am sure you’ve seen some documentations out there but in this one we will add Firefox Developer Edition to our Unity launcher. You’re welcome! 😉

Please follow the steps below…

Step 1
Download the firefox*.tar.bz2 file from Mozilla’s website.

Step 2
Open Terminal.

Step 3
Navigate to the folder where the file is saved.

Step 4
Copy firefox*.tar.bz2 file to the /opt folder.

sudo cp -rp firefox*.tar.bz2 /opt

Step 5
Delete the downloaded firefox*.tar.bz2 file.

sudo rm -rf firefox*.tar.bz2

Step 6
Navigate to the /opt directory.

cd ~
cd /opt

Step 7
Un-tar the firefox*.tar.bz2 file in opt folder.

sudo tar xjf firefox*.tar.bz2

Step 8
Delete the firefox*.tar.bz2 file in opt folder.

sudo rm -rf firefox*.tar.bz2

Step 9
Change ownership of the folder containing Firefox Developer Edition /opt/firefox

sudo chown -R $USER /opt/firefox

Step 10
Create the Firefox Developer Edition's shortcut

nano ~/.local/share/applications/firefox_dev.desktop

The content of this file is,

[Desktop Entry]
Name=Firefox Developer 
GenericName=Firefox Developer Edition
Exec=/opt/firefox/firefox %u
Terminal=false
Icon=/opt/firefox/browser/chrome/icons/default/default128.png
Type=Application
Categories=Application;Network;X-Developer;
Comment=Firefox Developer Edition Web Browser.
StartupWMClass=Firefox Developer Edition

Step 10
Mark the launcher as trusted and make it executable.

chmod +x ~/.local/share/applications/firefox_dev.desktop

I hope this article has helped you to set-up your new Firefox Developer Edition.

Thank you