Skip to content
Search

DEV Community

Cover image for Quick Web Server with Nginx on Docker Compose
Amin
Amin

Posted on

Nginx Docker Compose Quick Web Server with Nginx on Docker Compose

#docker #nginx #webdev #tutorial

Maybe you need a web server for a simple static site. For instance, to test out the <script type="module">. Perform a Lighthouse Audit. Or preview your HTML page through you phone.

But it can be tedious to install, configure & fire up a web server on your local machine.

Today I'm going to show you how you can save some precious time & serve your static assets with this simple Docker Compose configuration.

Steps

1 — Go back to your base directory

$ cd ~/
Enter fullscreen mode Exit fullscreen mode

2 — Create the working directory

$ mkdir docker-nginx-demo
Enter fullscreen mode Exit fullscreen mode

3 — Go into that directory

$ cd docker-nginx-demo
Enter fullscreen mode Exit fullscreen mode

4 — Create the Docker & Docker Compose configuration

$ touch docker-compose.yaml
Enter fullscreen mode Exit fullscreen mode

5 — Create the directory that will hold your HTML files

$ mkdir src
Enter fullscreen mode Exit fullscreen mode

6 — Write something for your first page

$ echo "Hello world!" > src/index.html
Enter fullscreen mode Exit fullscreen mode

7 — Edit your Docker Compose configuration file

$ vim docker-compose.yaml
Enter fullscreen mode Exit fullscreen mode 
version: "3"

services:
    client:
        image: nginx
        ports:
            - 8000:80
        volumes:
            - ./src:/usr/share/nginx/html
Enter fullscreen mode Exit fullscreen mode

8 — Start the server

$ docker-compose up --detach
Enter fullscreen mode Exit fullscreen mode

9 — Open your page

$ chromium http://localhost:8000
Enter fullscreen mode Exit fullscreen mode

10 — Enjoy!

That's it! You can enjoy your HTML page with your favorite browser at http://localhost:8000.

No need for any Apache, NGINX, MAMP, XAMPP, LAMP or any web server installed on your machine. Only Docker & Docker Compose are needed!

Top comments (6)

Collapse
 
fab23 profile image
fab •

Then you can add a simple healthcheck and everything will be monitored forever :)

version: "3"

services:
    client:
        image: nginx
        ports:
            - 8000:80
        volumes:
            - ./src:/usr/share/nginx/html

    healthcheck:
        test: curl --fail http://localhost || exit 1
        interval: 60s
        retries: 5
        start_period: 20s
        timeout: 10s
Enter fullscreen mode Exit fullscreen mode
Collapse
 
andymedjlp profile image
Andy Medlicott •

Thanks! Simple and effective! :-)

Collapse
 
sathishk profile image
Sathish Kumar Thiyagarajan •

Very Useful . I have a doubt. How do we load modules of Nginx like monicalent.com/blog/2019/01/06/res... .

Collapse
 
capdragon profile image
CaptDragon •

this is the way!

Collapse
 
tomfern profile image
Tomas Fernandez •

Nice post! I think the Dockerfile contents are missing in the example.

Collapse
 
aminnairi profile image
Amin •

Yes it's a mistake. At first I though I would need a Dockerfile but not at all. That's what made me happy about that! But I'll correct the article. Thanks for pointing that out!

Read next

quicksilversel profile image

Getting Familiar with GSAP ScrollTrigger 🌱

Zoe -

iamzahid profile image

Mastering In Production-Grade Docker Compose File

Zahid Ahmed -

unicodeveloper profile image

What's new in Novu 0.17.0?

Prosper Otemuyiwa -

blugreenspace profile image

Understanding Python Generators - Harnessing Lazy Evaluation

blugreenspace -