zukucode
主にWEB関連の情報を技術メモとして発信しています。

Docker ホスト側の作業フォルダとコンテナ側のフォルダを同期させる

Docker Nginxを起動して基本的なコマンドを理解するで、Nginxのコンテナを起動してWelcome to nginx!を表示するようになりましたが、実際の開発ではホスト側で編集したhtmlを表示したいことがあると思います。

そのため、ホスト側の作業フォルダをコンテナ側のNginxのドキュメントルートフォルダになるように設定します。

Nginxのドキュメントルートを確認

まずはコンテナ側のNginxのドキュメントルートを確認します。

コンテナ側のbashを起動し、以下のコマンドでNginxの設定ファイルを確認します。

(コンテナ側のbashの起動方法はDocker コンテナの中に入ってBashなどでコマンド実行をするで紹介しています)

# cat etc/nginx/conf.d/default.conf
server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

--省略--

ドキュメントルートは/usr/share/nginx/htmlであることが確認できます。

ホスト側のファイルの作成

ホスト側に動作確認用のhtmlファイルを作成します。

カレントディレクトリにsrcフォルダを作成し、その中にindex.htmlファイルを作成します。

/docker/index.html
<html>
  <head>
    <title>dockerテスト</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

マウント

docker runコマンドの--mountオプションでホスト側とコンテナ側のフォルダを紐付けます。

type=bind,source=ホスト側のパス,target=コンテナ側のパスの形式で指定します。

mountではなくvolumeオプション(-v)を使っている記事が多くありますが、現在では mountオプション(--mount)が推奨されています。

$ docker run --name my-server -d -p 8080:80 --mount type=bind,source=$(pwd)/src/,target=/usr/share/nginx/html/ nginx

$(pwd)はカレントディレクトリに置き換わります。

ブラウザでlocalhost:8080にアクセスするとWelcome to nginx!ではなく、先ほど作成したhello worldが表示されます。

また、ホスト側で/src/index.htmlの内容を変更して保存後、localhost:8080をリロードすると内容が変更されていることが確認できます。



関連記事