docker初心者向けの第一歩としてここまでやりたい

dockerでnginx立ち上げて
適当なHTMLファイルをおく
nginxのデフォルトのドキュメントルートをマウント
ローカルのブラウザで表示させる

前準備

windows

wsl2(ubuntu)
ubuntu上でdocker動くように(WindowsのDocker　Desktopは重い)
docker / docker-compose

mac

docker desktop for mac
docker / docker-compose

dockerでnginx立ち上げる

docker-compose.ymlの編集

viエディタがいいけど、まあエディタは何でもいいですよ

mkdir -p ~/work/my-first-docker/docker

# $_はbashでの直前に実行されたコマンドの引数
cd $_

vi docker-compose.yml

docker-compose.yml

ymlファイルはタブ禁止です
インデントはスペース

name: my-first-docker

services:
  web:
    # コンテナ名です。docker ps した時に表示されます
    container_name: my-first-docker-nginx

    # どのイメージを使うかです、今回はnginxの最新版
    image: nginx:latest

    # ポートマッピングです、ローカルの9999をコンテナの80にマッピングします
    # ローカルの9999にアクセスしたらこのコンテナの80にアクセスしてることと同じになります
    ports:
      - "9999:80"

ファイルが完成したらdocker compose upします

ズラズラとメッセージが出て最終、startedと出たらOK

docker compose up -d
docker ps -a # このコマンドで起動しているかどうかがわかる

これでnginxのウェルカムページが表示されるはず

http://localhost:9999

適当なHTMLファイルを置く

html置くディレクトリつくって、適当にHTMLファイルをつくります

mkdir -p ~/work/my-first-docker/src
cd $_
vi index.html

中身はほんとうに何でも良いです↓

<html>
  <head>
    <title>my first docker nginx</title>
  </head>
<body>
hello, my first docker nginx!
</body>
</html>

nginxの設定を変更

docker-compose.yml

name: my-first-docker

services:
  web:
    # コンテナ名です。docker ps した時に表示されます
    container_name: my-first-docker-nginx

    # どのイメージを使うかです、今回はnginxの最新版
    image: nginx:latest

    # ポートマッピングです、ローカルの9999をコンテナの80にマッピングします
    # ローカルの9999にアクセスしたらこのコンテナの80にアクセスしてることと同じになります
    ports:
      - "9999:80"

    # htmlをおいてるディレクトリをdockerのコンテナにマウントして
    # nginxのデフォルトのドキュメントルートをうわがいてしまいます
    # 最後のroはread onlyの略(ちょっと速くなります)
    volumes:
      - ../src:/usr/share/nginx/html:ro

これで先ほどのHTMLの中身が表示されてるとおもいます

http://localhost:9999

終わるときは docker compose down で終わってください