k01ken’s b10g

He110 W0r1d!

docker-composeを用いてホスト側のhtmlの編集をコンテナ側のhtmlに反映させる

Docker

開発環境は、Windows 10 Pro(64bit) + docker desktop 3.0.4 + Docker Engine 20.10.2 + docker-compose 1.27.4。

ローカル側でDocker環境で開発しようと思ったときに、通常、Dockerでは、コンテナを作って、自分の作ったhtmlファイルを表示して、それをホスト側で編集してみると、コンテナ側には反映されません。ファイルを編集するたびに、いちいち、イメージを作成して、コンテナを作成しなければならないのか？と思ったのですが、調べてみると、docker-compose.ymlのvolumesを使えば、編集を反映できそうなのでやってみました。

1.プロジェクト用のディレクトリを作成

2.Docker DesktopのSettingsのFILE SHARINGにこのディレクトリを絶対パスで指定する
以下を参考にしてください。
docker-composeでstatus code not OK but 500が出現したときの解決法 - k01ken’s b10g

3.Dockerfileを作る

FROM httpd:alpine

COPY index.html /usr/local/apache2/htdocs/index.html

4.docker-compose.ymlを作る

version: '3'
services:
  web:
    build: .
    ports:
      - '8080:80'
    volumes:
      - .:/usr/local/apache2/htdocs/

5.index.htmlを作る

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>編集前</h1>
  </body>
</html>

6.コマンドを実行する
まず、

docker-compose build

その次に、

docker-compose up -d

7.localhost:8080にアクセスします

8.さっき作ったindex.htmlを編集する。もう一度、localhost:8080にアクセスすると、反映されていると思います。

9.終わったら、以下のコマンドで終了

docker-compose down -v