Dockerにおいてタスクランナーを使用するWEBサイト制作の構造のベストとは・・

Question

前提・実現したいこと

WEBサイトの制作をしています。
Wordpressのテーマ(PHP)と、scssやjs画像圧縮をgulpで行っています。

dockerを使用すると開発者のnodeやgulpのバージョンに依存しなくなるとみたので、導入を試みています。
チュートリアルなどで、wordpressとデータベースは立ち上げられました。とても簡単で感動しています。
そこからscssのコンパイルはどういうふうに設定するのかがわからず、ご助力いただければと思っています。。。

今までのフォルダ構成(今回のdockerを導入する前のです)

- public(srcのコンパイル出力先/wordpress themeフォルダにアップ)
- src
　　L  phpファイル群
　　L  scssファイル群
　　L  jsファイル群
　　L imgファイル群
-package.json
-package-lock.json
-gulpfile.js
-node_modules

作成したdocker-compose.yml

version: '3'

services:
  wordpress:
    image: wordpress:latest
    depends_on:
      - db
    ports:
      - "8001:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    volumes:
      - ./src/php:/var/www/html/wp-content/themes/folder

  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    

質問事項

• 開発者環境に依存させないように、dockerで立ち上げるコンテナ内にnodeやgulpをインストールして、コンパイルさせていきたいのですが、方法がわかりません。
• フォルダ構造も今までの状況で使っていたものなので、dockerに合わせた形があれば知りたいなと思っています

皆様のお知恵をぜひお貸しくださいませ。。。m(_ _)m
よろしくお願いします

Answer 1

まず解決方法から
私の思いつくところだと方法は2つあります。

1.起動中のcontainerに直接インストールする(初心者向け)
起動しているwordpress containerに対して直接nodeやgulpをインストールし、そのコンテナをイメージ化します。
流れとしては

• sshでコンテナにログイン
• 必要な物をインストール(node, gulp)
  • docker imageは最小限のミドルウェアで構成されている為、付随して必要な物をインストールする必要があると思います。
• node, gulpの動作確認
• docker コンテナのイメージ化
• dockerimageを開発者に共有

上記の方法はdockerの利点であるdockerfileによるInfrastructure as Code(IaC)の恩恵を受けられませんが、最初のとっかかりとしてはやりやすいと思います。

2.dockerfileによるdockerimageの作成
dockerfileを作成し、独自のdockerimageを作成する方法です。
1のIaC版です。
ただ、ある程度dockerの知識が必要かと思います。

• dockerfileの作成
  • wordpressをベースイメージに指定
  • 必要な物をインストールするコマンドを記述
  • portやwordpressの起動コマンドを記述
• dockerfileを指定してdockerimageを作成
• 問題なければdockerfileと関連ファイル(あれば)を開発者に共有

こちらは、docekrfileの作成部分にある程度知識が必要です。
例えば、今は試しなのでwordpress:latestを指定しているかもしれませんが、dockerfileにも同じ記述をすると今実行した人と半年後に実行した人では(最新バージョンが異なり)インストールされるwordpressのバージョンが異なります。なのでこれを考慮してバージョンを指定して記述をしたほうがいいなどの知識です。
docekrをついでに学びたいのであればこちらから試したほうがいいと思います。

ディレクトリ構成に関しては、wordpressでの開発経験はないので一般的なコメントしかできませんが、そのままのディレクトリをcontainerのどこかディレクトリにマウントすればいいと思います。
マウントしてホストOS側でエディタを使用し開発しつつ、dockerコンテナ内ではwordpressを立ち上げながらgulpの監視プロセス(watchとか)を走らせればよいかと思います。
また、コンテナの起動コマンドにwordpressの立ち上げ+gulpのコマンドを合わせてもよいでしょう。
ホストOSからgulpのコマンドを実行する方法もあります。(docker-compose exec サービス名 gulp実行コマンドでできると思います)
この辺は経験者からの回答を待った方がよいかと思います。

最終的には2の方法をとったほうが、開発しているソースとdockerfileをgitリポジトリを使用して共有する方法になると思います。
1の方法だとdockerimageとソースを別々に共有する必要があります。
(dockerimageのリポジトリとソースコードのgitリポジトリを使用する感じです)

最後に、個人的な考えですが、docekrは開発環境というよりは本番環境用のツールだと思っています。
dockerfileを使用するとイメージがわくかもしれませんが、基本的に完成したソースコードをdockerimageに固めてそれを本番環境にデプロイすることに特化しています。
他の利点として、スケールアウトや障害発生時の再起動など、同じコンテナをいくつも立ち上げたり、何度も立ち上げたりすることがあります。
なので、コンテナの中身をどんどん変えていく(開発環境)物としては少し扱いにくさを個人としては感じます。

開発環境としては、例えばvoltaなんかを全員が使用すれば、package.jsonの中に使用するnodeのバージョンが記載され、全員同じバージョンで開発ができます。
また、gulpに関してもpackage.jsonにバージョン情報があり、モジュールはnode_modulesにインストールされるので、環境依存は起こらない気がします。
(この辺は個人的な考えです)

そのあたり、うまくやっている人はいるかもしれませんが、とりあえず回答した1又は2の方法でやりたいことは実現できるはずです。

dockerは用意されたベースイメージを使う分には簡単ですが、自分の環境に合わせて作るとなるとある程度知識が必要です。
そうなるとdocekrでなくてもよくないか?となる(私は結構なった)ので、試して実感してもよいですが、すべてが楽になるわけではないと思っていることだけコメントします。

(長くなりすぎてしまいすみません。)

Comments

[kishiasa]

こんなに丁寧に回答をいただきありがとうございます・・・！
ご提示いただいた2の方のやり方ができるように、改めて学習を進めてみたいと思います。
どう検索したらいいか行き詰っていたので、指針が見えてきました。本当にありがとうございます。

もう一つ、質問させていただいてもいいでしょうか。。。
docker-compose.ymlとDockerfileの使い分けがわかっていないのですが、
docker-compose.ymlに集約して記載することも可能なのでしょうか・・・？
こちらも改めて調べてみたいと思っていますが、もしお時間があればご教示いただけると幸いです。

[Yuu]

参考になる部分があり良かったです。

dockerfileとdocker-compose.ymlの使い分けに関してですが、そもそも両者役割が異なります。
今回使用したいと考えているdockerは単純に1つのコンテナを生成するツールであり、コンテナの構成をコードでdockerfileに記述し、そこからコンテナイメージを生成するのがdockerfileの役割です。(生成したイメージからコンテナを立ち上げます。)

それに対して、docker-composeはdockerを便利に使用する為の別ツールで、複数のdockerコンテナを管理するものです。(冗長化/クラスタのように、さらに多くのコンテナを管理する際にはまた別のdocker swarmやkubernetesが使われます)
docker-composeはdocker-compose.ymlに記述した複数のdockerimage(またはdockerfile)を一気に立ち上げる為のいわゆる管理ツールです。(コンテナのport設定などををファイルに記述ができ、必要に応じて変更できるといった利点もありますが)
今回の場合は、wordpressコンテナとmysqlコンテナをdocker-compose.ymlに記述し、1つのコマンド`docker-compose up`で立ち上げています。
dockerのみを使用する場合は、wordpressを立ち上げるコマンドとdbを立ち上げるコマンドを二つ実行する必要があります。

既存のイメージが(DockerHubに)存在する場合、ymlファイルに`image: wordpress:latest`と記述しますが、dockerfileから生成する自作イメージを使用する場合はimageタグは使用せず`build: [dockerfileのpath]`を指定します。
なので、docker-composeにdockerfileを集約することはできず、docker-composeからdockerfileを呼び出すイメージです。

色々なサイトで色々な方向から解説がされていると思うので、そちらも参考にしたり、実際に手を動かしてみるとより理解が深まると思います。
読みにくいかもしれませんが公式ページでも説明はされているので、そのあたりも抑えておくといいと思います。
https://docs.docker.com/compose/
(私以外からの回答も知りたい場合は、別途質問を立ち上げてもよいでしょう。)

余談ですが、今はdocker-composeの機能はdockerに取り込まれているようですね。
1年くらい前までは前述したように別のツールで、docker-composeというコマンドを使用する必要がありました。
今はdocker compose(docekrコマンドにcompose引数を渡す)コマンドで使えることをつい先ほど知りました。
確かにこれだとすみ分けなど少し混乱しそうですね。

[kishiasa]

ご丁寧にありがとうございます。

dockerの書き方も変遷があるようですね。
まずは記述いただいた元の形でしっかり理解をしてみたいと思います。

お時間をいただき誠にありがとうございました！