DEV Community

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

Posted on

4 4 4 4 4

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!

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

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

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay