The first question: Why we need NGINX when we already have Apache httpd?
Answer:
While Apache HTTP Server is a powerful and flexible web server, NGINX offers certain advantages that make it a popular choice (like me๐) for many use cases:
Performance: NGINX is known for its high performance, especially under heavy load. It uses an event-driven architecture which allows it to handle thousands of concurrent connections with minimal memory usage.
Reverse Proxy and Load Balancing: NGINX is often used as a reverse proxy and load balancer. This allows it to distribute network traffic across multiple servers to ensure high availability and reliability.
Static Content Delivery: NGINX excels at serving static content quickly and efficiently, making it a great choice for websites with high volumes of static content.
Configuration: Some users find NGINXโs configuration syntax to be more straightforward and easier to read than Apacheโs.
Microservices Architecture: NGINX is often used in modern microservices architectures due to its ability to act as a reverse proxy and load balancer.
However, this does not make NGINX superior; Apache httpd has been around for a long time and is Mature and Reliable (like me๐). My preference is:
Use Apache httpd when you have a static site like documentation, wikis, etc.
Use NGINX when using Node.js, Python, or anything that needs port proxying.
Lets Setup NGINX:
Prerequisites:
A basic HTML/CSS/JS web project to deploy.
A Linux machine or server.
Domain name (optional).
So, you've mastered web development and created a fantastic webpage. Now, you're eager to share it with the world. But how do you deploy it on the internet? Fear not; I'm here to guide you through the process.
To get started, you'll need a Linux machine or VM. (how to create one?)
Step 0 - Connect to your VM (if using cloud)
connect to your virtual machine using any of the following ways so we can start installing and configuring apache server on it.
A. Connect using ssh-
ssh ashutosh@192.168.1.7 โฉ๏ธ
fingerprint(yes) โฉ๏ธ
yourpassword โฉ๏ธ
This will start a shell session like this:
ashutosh@yourvm:~$
B. You can use VNC/RDP. For more information, search for "VNC with your cloud provider term" on Google.
You can skip the above step if you are setting up NGINX on a local server.
Step 1 - Update Your Packages ๐
First things first, ensure your system is up-to-date by running this command:
sudo apt update && sudo apt upgrade
๐กPro tip: If you're feeling lazy, you can use sudo su
to avoid typing sudo
twice!
Step 2 - Install NGINX Server ๐
Let's get NGINX on board. Run this command:
sudo apt install nginx
Now, technically, NGINX should be installed and running. To test this, let's execute the following command:
curl localhost
This should give the following output:
bloguser@blogvm:~$ curl localhost
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style></style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p><em>Thank you for using nginx.</em></p>
</body>
</html>
If you are getting this output, it means NGINX is installed and up and running.
Step 3 - Enable and Configure firewall๐ฅ๐งฑ
Currently NGINX is running locally, if you try to open the VM's ip in browser it will not show anything, which is obvious as have not enabled http (80)
and https(443)
ports from firewall.
What is Firewall again๐งฑ?
A firewall is a security mechanism that protects your VM (aka server) from external connections. The firewall acts as a barrier that only allows access to permitted ports by authorized entities.
When you created a VM, you likely enabled the SSH port (22), knowingly or unknowingly, allowing that port to communicate with your VM. There are several services with associated port numbers that you will need to allow if you want the respective functionality. Below is a list of some popular services and their default port numbers:
Service | Port Number |
SSH | 22 |
HTTP | 80 |
HTTPS | 443 |
FTP | 21 |
SFTP | 22 |
SMTP | 25 |
MySQL | 3306 |
PostgreSQL | 5432 |
MongoDB | 27017 |
(Please note that these are the default port numbers. They can be configured to use different port numbers based on the requirements. Always ensure that the necessary security measures are in place when opening these ports anywhere.)
Back to NGINX:
As we will be working with web pages, we need to enable http (80)
and https (443)
. On Ubuntu systems, ufw
is used to manage the firewall. We will use this tool.
Check if the firewall service is running by running
sudo ufw status
.
If the service is not running, start it by running sudo ufw enable
.
- Now, enable http, https, and ssh from the firewall.
There are multiple ways to do this. The first way is to directly allow ports by name or port number.
another way is to check available configurations and enable that way (recommended)
- Finally check status of firewall again by
sudo ufw status
it should look something like this-
Enter your VM's IP in a browser and check if it is showing up. If not, there might be some restrictions from your cloud provider.
For Azure, refer to this guide; for AWS, check this one; and for DigitalOcean, consult this guide.
You may need to add some policies, as it depends on the cloud provider.
After this, your webpage should show up, which will look something like this:
Step 4 - Creating Your Website ๐
By default, NGINX comes with a basic site enabled. You can customize its content, which is located at /var/www/html
.
Let's modify the default page with our content.
Step 1 - Navigate to the default directory:
cd /var/www/html/
ls
sudo rm -r index.nginx-debian.html
ls
sudo nano index.html
//if you don't have nano
vim index.html -> i
Paste this sample html file-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Hello, World!๐</h1>
</body>
</html>
Save and exit
nano -> ctrl+x -> y -> enter.
vim -> :wq -> enter.
Restart the NGINX server
nginx -t //to check the configuratin
sudo systemctl restart nginx //to restart nginx
Then, refresh your webpage, and it will look something like this:-
So this is how you setup a simple static web server with NGINXโจ
How to Host Your Vanilla JS Projects from GitHub?
Say you have created a simple project on GitHub, and you want to deploy it here. Now, we will see how to do this:
- For this to work, the
index.html
of your project should be in the root directory. The project structure should look like this:
.
โโโ assets
โ โโโ logo/logo.png
โ โโโ images
โ โโโ icons
โโโ index.html
โโโ style.css
โโโ index.js
โโโ README.md
Remove the existing files from the
/var/www/html
folder, making sure it's empty. Use therm
command to delete files.sudo rm filename
Next, clone the GitHub repository with a
.
path so that all of its contents are directly in this/html
folder.git clone yourrepourl .
For example:git clone
https://github.com/ashutosh7i/Yuvaantar_portfolio.git
.
Test the NGINX configuration for syntax errors:
sudo nginx -t
- If the configuration test is successful, reload NGINX to apply the changes:
sudo systemctl reload nginx
- Now, refreshing the IP will show your project. In my case, it looks like this:
Here are some additional tips and tricks:
Custom project location: Say you don't always want to use the
/var/www/html
folder. To configure a custom folder location, you can tweak the default config file:nano /etc/nginx/sites-available/default
Discard everything and paste this fresh config:
server { listen 80 default_server; listen [::]:80 default_server; root /var/www/html; index index.html; server_name _; location / { try_files $uri $uri/ =404; } }
replace the
/var/www/html
with the folder of your choice.Save the file and restart NGINX.
๐ ๏ธ CI pipeline: Once your project is on the server, you can make changes to it locally, push to GitHub, SSH into the server, and run the
git pull
command to host the latest files.* ๐ Port and Firewall Settings: If your website is not showing up, ensure that your firewall allows traffic on port 80 (HTTP) and 443 (HTTPS) for your server. You might need to set up these rules using
ufw
, likesudo ufw allow http
.* ๐ Setting Up Server Blocks Server Blocks in NGINX are similar to Virtual Hosts in Apache. They allow you to host multiple websites/domains on a single server. We will need them when we add SSL and a domain name.
Getting Familiar with Important NGINX Files and Directories
/etc/nginx: This is the main directory where NGINX configuration files are stored.
/etc/nginx/nginx.conf: The main NGINX configuration file.
/etc/nginx/sites-available: Directory where server block configuration files are stored.
/etc/nginx/sites-enabled: Directory containing symbolic links to enabled server block configurations.
/var/log/nginx: Directory where NGINX log files are stored.
Server Configuration
NGINX server configuration is typically done in the nginx.conf
file located in /etc/nginx/nginx.conf
. This file contains global settings that apply to the entire NGINX server, such as worker processes, user settings, and error log locations.
Server Logs
NGINX logs important information about server activity, errors, and access in log files located in /var/log/nginx
. The main log files are:
access.log: Contains records of all requests made to the server.
error.log: Logs NGINX errors and warnings.
Basic NGINX Commands
Start NGINX:
sudo systemctl start nginx
Stop NGINX:
sudo systemctl stop nginx
Restart NGINX:
sudo systemctl restart nginx
Reload NGINX:
sudo systemctl reload nginx
Check NGINX Configuration:
sudo nginx -t
Now you have a basic understanding of NGINX setup, configuration, and management. ๐
Stay tuned for the next part where we'll cover SSL installation and domain name configuration! ๐๐
That's it! You're on your way to sharing your masterpiece with the world. Stay tuned for more web server wizardry in our upcoming blogs! ๐งโโ๏ธโจ
for any issues you can always reach me out on Linkedin
Happy Hacking! โ๏ธ๐