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 Windowsや Macをインストールしていればそのまま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 /app
→ WORKDIR /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で簡単に作成する手順。