寝て起きて寝て

プログラミングが出来ない情報系のブログ

Dockerで環境構築してみるその2

今回の目標

前回環境構築を行なったが、
前回の状態だとソースコードを更新してもイメージの再作成を行わないと反映されないので反映されるように設定を行う。
また、起動周りをDocker Compose で行うようにdocker-compose.ymlファイルの作成を行う

ローカルで編集した内容をブラウザ上に反映させる

再度 docker run を走らせるので、一度コンテナを削除する
(run 時 -rm オプションを付けていない場合はコンテナの削除を行う)

前回のコマンドに bind mount に関する記述を追加する

docker run -w /src -v "$(pwd):/src" -p 8080:8080 --rm --name webserverContainer -it webserver

起動後 src/components/HelloWorld.vue で適当な文字列を template 内で書き込んで更新されているかどうかを確認

docker-compose

 そもそもdocker-compose.ymlって何

複数のDockerイメージのビルドやコンテナの起動や停止を
docker-compose.yml に記載することで簡単に行えるようにするツール

Docker for WindowsMacをインストールしていればそのままComposeを使える
はずなので、インストールに関しては省略

docker-compose.ymlを作成

先にコンテナとイメージの削除を行っておく

#コンテナ があれば
docker container rm webserverContainer

docker image rm webserver

新たに Containers のようなディレクトリを作成し、中に

webserver(vue createで作成した時のアプリケーションディレクトリ)を移動させる

構成的にはこんな感じ

tree Containers/ -L 1 -a
Containers/
└── webserver

Containers 直下に docker-compose.yml.env を作成

tree Containers/ -L 1 -a
Containers/
├── .env
├── docker-compose.yml
└── webserver

下記のように記載

docker-compose.yml

version: "3"
services:
  web: #サービス名
    build:
      context: ${WEBSERVER_DIR} #Dockerfileがあるディレクトリを指定
    container_name: webserverContainer # コンテナ名を指定
    volumes:
      - ./webserver/src:/app/webserver/src #マウント対象のディレクトリ
    ports: 
      - "8080:8080" #ポートフォワード設定
      #https://blog.tkt989.info/2017/12/19/Docker-Compose%E3%81%AEports%E3%81%A8expose%E3%81%AE%E9%81%95%E3%81%84
    environment:
      TZ: Asia/Tokyo #タイムゾーン設定
      #https://qiita.com/rururu_kenken/items/972314402d588e073d40

.env

.envはcomposeが使用する環境変数を指定できる

#このファイルの値はdocker-composeで使用する環境変数
WEBSERVER_DIR = ./webserver

この状態だとバインドがうまくいかないので

webserver/Dockerfile の WORKDIRを変更する

WORKDIR /appWORKDIR /app/webserver

これで準備ができたのでビルド→起動

docker-compose build
docker-compose up -d

エラーが出なければ起動しているので

http://localhost:8080/ へアクセスし HelloWorldを変更などして反映されているかどうか確認してみる

参考

Dockerについてのまとめ
Docker利用時のソースコードの変更反映
Docker Composeのportsとexposeの違い
Docker-docs-ja
docker docs
Docker上にvue.jsの開発環境を構築する方法。docker-composeで簡単に作成する手順。