4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

dockerでnginx立ち上げてhtmlを表示させる

Posted at

01-primary-blue-docker-logo.png

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

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

前準備

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のウェルカムページが表示されるはず

適当な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の中身が表示されてるとおもいます

docker.png

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

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?