Docker でローカル環境構築 Nginx で html ページを表示させる

最終更新日:

環境

  • MacBook Pro (macOS: Big Sur)

ファイル構成

/app
  └ /public
      └ index.html
docker-compose.yaml
Dockerfile
/nginx
  └ default.conf

サンプルコード

docker-compose.yaml

version: "3"

services:
    app:
        build:
            context: .
        volumes:
            - ./app:/var/www/html
        ports:
            - "8080:80"

Dockerfile

FROM nginx:1

WORKDIR /var/www/html

COPY ./app /var/www/html
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf

nginx/default.conf

server {
	listen       80;
	listen  [::]:80;
	server_name  localhost;

	root /var/www/html/public;

	index index.html;

	# redirect server error pages to the static page /50x.html
	#
	error_page   500 502 503 504  /50x.html;
	location = /50x.html {
		root   /usr/share/nginx/html;
	}


	# deny access to .htaccess files, if Apache's document root
	# concurs with nginx's one
	#
	location ~ /\.ht {
		deny  all;
	}
}

app/public/index.html

<!DOCTYPE html>
<html lang="ja" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>docker-sample nginx</title>
	</head>
	<body>
		hello world
	</body>
</html>

実行

$ cd /path/to/your/project

# http://localhost:8080 にアクセス
$ docker-compose up