DEV Community

Cover image for Nginx for newbies: Get your confusions cleared and become a Web ADMIN!
Rijul Rajesh
Rijul Rajesh

Posted on

Nginx for newbies: Get your confusions cleared and become a Web ADMIN!

If you’ve ever looked into hosting a website or running a web application, you might have heard a thing called Nginx. If you are confused about what it is, It’s one of the most popular web servers in the world, powering millions of websites, from small blogs to huge platforms like Netflix.

Lets take a closer look into why Nginx is an important component which contributes to what you see in your day-to-day life.


🤔 What is Nginx?

At its core, Nginx is a web server—a piece of software that takes requests from users (like when they visit a website) and responds with the correct content (like a webpage or an image).

But Nginx isn’t just any web server. It’s also used as a:

Reverse Proxy – It can sit in front of your web app and forward requests to the right place.

Load Balancer – If your website gets a lot of visitors, Nginx can distribute traffic across multiple servers to prevent overload.

Static File Server – It’s super fast at delivering things like HTML, CSS, JavaScript, and images.

Security Layer – It can handle HTTPS (SSL/TLS) to secure your site.

Simply speaking, Nginx helps websites run faster, smoother, and more efficiently.


Now that you know about Nginx, lets check how we can install it and give it a go!

🔧 How to Install Nginx

🖥️ Installing on Ubuntu/Debian

  1. Open your terminal.
  2. Run this command:
   sudo apt update
   sudo apt install nginx -y
Enter fullscreen mode Exit fullscreen mode
  1. Start Nginx:
   sudo systemctl start nginx
Enter fullscreen mode Exit fullscreen mode

🍎 Installing on macOS (using Homebrew)

  1. Open your terminal.
  2. Run:
   brew install nginx
Enter fullscreen mode Exit fullscreen mode
  1. Start Nginx:
   nginx
Enter fullscreen mode Exit fullscreen mode

🏗️ Checking if Nginx is Running

After you did your installation steps we need to confirm whether the installation did its job well.

After installation, open your browser and visit:

➡️ http://localhost/

If you see a welcome page, Nginx is working! 🎉


🌐 Hosting a Simple Website with Nginx

Now lets get to the more fun stuff.

Let’s say you want to serve a basic HTML page using Nginx. Here’s how:

Create a folder for your website:

   sudo mkdir -p /var/www/mywebsite
Enter fullscreen mode Exit fullscreen mode

Add an index.html file:

   echo "<h1>Hello, Nginx!</h1>" | sudo tee /var/www/mywebsite/index.html
Enter fullscreen mode Exit fullscreen mode

Tell Nginx to use this folder:

  • Open the Nginx config file:

     sudo nano /etc/nginx/sites-available/default
    
  • Find the root directive and change it to:

     root /var/www/mywebsite;
     index index.html;
    

Restart Nginx to apply the changes:

   sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

Now visit http://localhost/ again, and you should see "Hello, Nginx!". 🎉


What is a Reverse Proxy?

Imagine you have a backend application (like a Node.js or Python server) running on port 3000. Instead of asking users to visit http://yourserver:3000, you can use Nginx to make it available on a normal web address.

For example, if your backend runs at http://localhost:3000, add this to Nginx’s config:

server {
    listen 80;
    server_name mywebsite.com;

    location / {
        proxy_pass http://localhost:3000;
    }
}
Enter fullscreen mode Exit fullscreen mode

Restart Nginx, and now users can access your app at http://mywebsite.com instead of port 3000.


🔒 Adding HTTPS for Free with Let’s Encrypt

Using HTTPS (secure connections) is important. You can get a free SSL certificate using Certbot:

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d mywebsite.com -d www.mywebsite.com
Enter fullscreen mode Exit fullscreen mode

This will automatically configure HTTPS for your site! 🔒


🛠️ Common Nginx Issues & Fixes

Whenever we learn a new thing, things always wont go smooth. Thats the journey and the learning curve towards putting your time to learning any new technology. Similarly with nginx we can have some errors.

I have listed out the common ones here, check it out whenever you face any issues.

❌ "403 Forbidden" Error

  • Fix: Make sure Nginx can read your files:
  sudo chown -R www-data:www-data /var/www/mywebsite
  sudo chmod -R 755 /var/www/mywebsite
Enter fullscreen mode Exit fullscreen mode

❌ "502 Bad Gateway" Error

  • Fix: Check if your backend app is running properly.

❌ Nginx Won't Start

  • Fix: Run this command to check for errors:
  sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

Conclusion

Nginx is a powerful, fast, and reliable web server that makes it easy to serve websites, balance traffic, and secure your applications.

Have you used Nginx before? Let me know in the comments! Happy coding! 😊🎉

If you have ever wondered how my journey with Nginx began, it was through the development of LiveAPI.

I developed this tool for generating API documentations within seconds, all we need to do is connect our git repository and LiveAPI will generate the Interactive API Docs like magic!

If you want to try it, get started by generating your first doc!

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.