Getting "services must be a mapping" in a Docker Reverse Proxy example

Docker Desktop for Mac
1

Hi,
I am new to Docker, and I am trying to follow a basic tutorial on how to set up a reverse proxy with Docker and nginx(How to set up NGINX Docker Reverse Proxy? - DEV Community), but after simply creating a container with the docker-compose.yml and index.html, I tried to run the docker-compose build command to start the container. However, I keep getting the same error “services must be a mapping”. Does anyone know why I might be getting this error? I posted the link to the website tutorial I’m following, but here’s the code I’m trying out :
docker-compose.yml has:

version: '2'
services:
app:
image: nginx:1.9
volumes:
- .:/usr/share/nginx/html/
expose:
- "80"

And index.html has:

<!DOCTYPE html>
<html>
<head>
<title>Web service 1</title>
</head>
<body>
<h1>Welcome to website 1</h1>
</body>
</html>

But for some reason docker-compose build fails.

2

Whitespace often matters in YAML. You’ll have more luck using:

version: '2'
services:
  app:
    image: nginx:1.9
    volumes:
      - .:/usr/share/nginx/html/
    expose:
      - "80"

Aside, you can use a formatter/beautifier to see what your version is interpreted as:

version: '2'
services: null
app: null
image: 'nginx:1.9'
volumes:
  - '.:/usr/share/nginx/html/'
expose:
  - '80'

Notice the null values above? (I don’t know why the Markdown formatter in this forum uses different highlighting for these different versions.)

Also, version 2 is a bit old, so the tutorial may be old too.