Before you go, check out these stories!

0
Hackernoon logoNginx + Docker: How to Get Html Page Up With Local Domain Name by@ifomin

Nginx + Docker: How to Get Html Page Up With Local Domain Name

Author profile picture

@ifominIgor Fomin

Full stack web developer, tech lead, project manager

I will setup a very simple html page with docker and nginx.

Source files can be found here:

https://github.com/ikknd/docker-study in folder recipe-01

1. Create a project folder setup:

/var/www/docker-study.loc/recipe-01
	-> /docker
	-> /html

In "html" folder I will create index.html file, that simply says: "I work inside docker!"

In "docker" folder I will keep docker related files and configs.

2. Create nginx config site.conf in "docker" folder:

server {
    server_name myapp.loc;

    root /var/www/myapp;
    index index.php index.html index.htm;

    access_log /var/log/nginx/front-access.log;
    error_log /var/log/nginx/front-error.log;

    location / {
        try_files $uri $uri/ /index.html?$query_string;
    }
}

3. Edit /etc/hosts file on host machine, and add a record:

127.0.0.1       myapp.loc

4. Create docker-compose.yml file in "docker" folder:

version: "3.7"

services:

  web:
    image: nginx:1.17
    ports:
      - 80:80
    volumes:
      - /var/www/docker-study.loc/recipe-01/html:/var/www/myapp
      - /var/www/docker-study.loc/recipe-01/docker/site.conf:/etc/nginx/conf.d/site.conf

Here I do several things:

  • point port 80 from inside container to port 80 on my host machine
  • copy html folder on my host machine to /var/www/myapp folder inside of container
  • copy site.conf nginx config file to /etc/nginx/conf.d/site.conf location in container

Note that we can point not only directories from host machines to inside of container, but also individual files.

5. Go to /var/www/docker-study.loc/recipe-01/docker/ and execute:

docker-compose up -d

If I now try myapp.loc/ in browser, I will see: "I work inside docker!".

In several simple steps, I got html file to be served via nginx, and got local domain name to work with docker setup.

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!