All articles
Switch to dark mode
Translate

Building a Web Infrastructure with Docker and Nginx on DigitalOceanArticle Icon

Frengky Soritua ManurungFrengky Soritua Manurung
··5 min read
Building a Web Infrastructure with Docker and Nginx on DigitalOcean

Share this article


Objective

Build a simple web application with Docker containers hosted on a DigitalOcean Droplet and use Nginx as a reverse proxy to direct traffic.

1. Create a Droplet on DigitalOcean

a. Log in to DigitalOcean

Log in to your DigitalOcean account at the DigitalOcean Dashboard.

b. Create a New Droplet

  • Click the “Create” button in the top right corner, then select “Droplets”.
  • Choose Ubuntu as the operating system (the latest version is recommended, e.g., Ubuntu 22.04 LTS).
  • Select Droplet specifications according to project needs (e.g., 1GB RAM and 1vCPU for a simple project).
  • Choose a Data Center Region closest to your target users or as needed.
  • Add an SSH Key for more secure login. If you don't have one, you can generate an SSH key on your local computer using the command:
ssh-keygen -t rsa
  • Copy the public key (id_rsa.pub) to DigitalOcean.
  • Click Create Droplet.

c. Access Droplet via SSH

After the Droplet is created, you will receive a public IP. Use the following command to access the server:

ssh root@<your-droplet-ip>

2. Install Docker on the Droplet

a. Update System

After successfully logging in to the server, first update the package list:

sudo apt update
sudo apt upgrade

b. Install Docker

Install Docker with the following command:

sudo apt install docker.io

c. Enable and Run Docker

After installation, make sure Docker starts automatically after reboot with:

sudo systemctl enable docker
sudo systemctl start docker

d. Check Docker Installation

Verify that Docker is running:

docker --version

3. Create a Simple Web Application

a. Prepare a Web Application with HTML

Create a simple HTML file on your local computer, for example index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Docker Web App</title>
</head>
<body>
    <h1>Hello from Docker Web App</h1>
</body>
</html>

b. Create a Dockerfile

Create a file named Dockerfile in the same folder as index.html:

FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html

c. Build Docker Image

Back on the Droplet, transfer the Dockerfile and index.html files to the Droplet (e.g., using SCP):

scp index.html Dockerfile root@<your-droplet-ip>:/root/

Then, build the Docker image:

docker build -t docker-web-app .

d. Run Docker Container

After the image is successfully built, run the container:

docker run -d -p 80:80 docker-web-app

This will run the application on port 80, which can be accessed via a browser.

4. Configure Nginx as a Reverse Proxy

a. Install Nginx on the Droplet

Since Nginx will be used as a reverse proxy, install Nginx on the Droplet:

sudo apt install nginx

b. Configure Nginx for Reverse Proxy

Edit the default Nginx configuration to make it act as a reverse proxy:

  1. Open the configuration file:
sudo nano /etc/nginx/sites-available/default
  1. Add or adjust the following configuration inside the server { } block:
server {
    listen 80;

    server_name your-domain-or-ip;

    location / {
        proxy_pass http://127.0.0.1:80;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
  1. Save and close the file.

c. Restart Nginx

Restart Nginx for the changes to take effect:

sudo systemctl restart nginx

5. Test the Application in a Browser

  1. Open a browser and access the application via the Droplet's public IP:
http://<your-droplet-ip>
  1. If everything is configured correctly, you will see the “Hello from Docker Web App” page.

Hello from Docker Web App

6. Setup Firewall and Security (Optional)

To increase security, enable the firewall and only allow HTTP and SSH traffic:

sudo ufw allow 'Nginx Full'
sudo ufw allow OpenSSH
sudo ufw enable

7. Maintenance and Monitoring (Optional)

Monitoring Docker: Use the following command to see the container status:

docker ps

Docker Logs: To view application logs:

docker logs <container-id>

Conclusion

This project covers installing Docker, deploying a simple application, and using Nginx as a reverse proxy on a DigitalOcean Droplet. You will learn the basics of containerization, reverse proxies, and how to host web applications in the cloud.


Other Articles