DEV Community

Oyame Ogbeche
Oyame Ogbeche

Posted on

Hosting a Web App with Nginx on Ubuntu: A Step-by-Step Guide

Deploying a web app doesn’t have to be complicated. Whether you're launching a personal project, a company landing page, or just testing the waters, Nginx on Ubuntu provides a fast, efficient, and scalable way to serve your web content. In this guide, we'll walk through provisioning an Ubuntu server, installing Nginx, and hosting an HTML page. Let's get started.

Step 1: Provision an Ubuntu Server

Before hosting your web app, you need a server. If you don’t already have one, you can quickly spin up an Ubuntu Server using any cloud provider like AWS, DigitalOcean, Linode, or even a local Virtual Machine.

I will be using AWS EC2 in this guide:

  • Navigate to the EC2 dashboard and launch an instance.

  • Choose an Ubuntu 22.04 LTS Amazon Machine Image (AMI).

  • Select an instance type (t2.micro for testing is fine).

  • Configure security groups to allow SSH (port 22) and HTTP (port 80) traffic.

Launch the instance and connect to it via SSH:

  ssh ubuntu@your-server-ip -i your-key.pem
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Nginx

Once you're logged into your Ubuntu server, the first thing you need to do is install Nginx, which will act as your web server.

  • Update your package list to ensure you have the latest versions:
  sudo apt update && sudo apt upgrade -y
Enter fullscreen mode Exit fullscreen mode
  • Install nginx:
  sudo apt install nginx -y
Enter fullscreen mode Exit fullscreen mode
  • Start and enable the nginx server to ensure it's running:
  sudo systemctl start nginx
  sudo systemctl enable nginx
Enter fullscreen mode Exit fullscreen mode
  • Verify nginx is running:
  sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

You should see this output:

Nginx status

Step 3: Build and Host Your HTML Page

Now that Nginx is running, it's time to serve your custom HTML page.

  • Navigate to the default web root directory:
  cd /var/www/html
Enter fullscreen mode Exit fullscreen mode
  • Remove the default index.html file (optional):
  sudo rm index.nginx-debian.html
Enter fullscreen mode Exit fullscreen mode
  • Create a new index.html file:
  sudo nana index.html
Enter fullscreen mode Exit fullscreen mode
  • Add your custom html content
  • Save the file (CTRL + X, then Y, then Enter) -Restart nginx to apply changes
  sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode
  • You can view your page with the public IP of your server.

web page

Conclusion

Congratulations! You’ve successfully set up an Nginx web server on Ubuntu and hosted a simple HTML page. This is just the beginning.

Need more insights or facing any issues? Drop your questions in the comments! You can also connect on LinkedIn or X.

Looking to hire Engineers?
DevOps Engineers
Cloud Engineers

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay