dockerでの実際の開発フローが知りたい。

Question

前提

docker compose で
nginx,mysql,rails,react(node.js)のコンテナを自動的に起動できるようにしました。

実際に開発を行おうとしていたところで2つほどめんどくさいと感じる部分が出てきたので改善点があればアドバイスいただきたいです。

ネット記事をいろいろ見ていましたが、こういった部類のTipsは全然ありませんでした。

1. windowsでdockerとvscodeを使って開発していると、まずvscodeの拡張remote-sshで　wsl2の環境に接続します。そのあとに、vscodeの拡張dev-containerでホスト(wsl2)上でrunning中のコンテナにvscodeで入ります。

   多少接続に時間かかりますし、何といってもめんどくさいです。(wsl2のipが毎回変わるので、ssh/configを毎回書き換えないといけない)
   windowsでdocker,vscodeを使用して開発する方は毎回このめんどくさいアプローチをしているのでしょうか？

2. node.js用のコンテナにwebpackを使用してreactやtsをトランスパイルやバンドルを行っているのですが、npm run devを実行した後に自分はhtmlwebpackpluginを使用しているので、バンドル後フォルダ(distフォルダ)に作成したページ分の、バンドルされたjsファイルを読み込んだhtmlファイルが出力されるようにしています。

   そこで、テストする際に毎回バンドル後のhtmlファイルをnginxコンテナの指定の部分にコピーして、ブラウザでnginxのipとportを指定して確認するというのも非常にめんどくさいです。

もし実際に実務でどのように開発が行われているのかを教えてもらえるととてもうれしいです。

よろしくお願いします。

Comments

[ryomannn]

調べていると、1.に関してはdockerでの開発では基本ホスト上で開発を行って実行はコンテナを一回一回作ってテストする感じらしいですね。
毎回ホストのソースをコンテナにマウントするらしいです。

なのでローカルでgit cloneした後に、docker compose upすればすぐに実行できるのはすごい楽だよねっていうことでした。

なのでそもそもvscodeの拡張dev-containerで入る必要はそこまでない。入る用があったとしてもCLIで十分対応可能な範囲っていうことでした。

2.の部分はまだちゃんとわかっていないですね。
docker compose runした後にすぐ実行できなかったらそれは設計が悪い気がします。
webpackてホストで実行して、distフォルダのバンドル後のファイルをマウントすれば確かに、docker compose upした後にすぐに実行できそうだけど、
コンテナ内でバンドルしようとすると絶対nginxにバンドルした後のファイルを配置しないといけない。
しっくりくるのは
git clone
npm install
開発
npm run dev
docker compose up
のような気がする。

Answer 1

webpackはSPAを想定して作られているのでMPAで使用しようとすると、ページを追加するたびにwebpack.condfig.js にHTMLWebpackPluginの記述を追加していくことになり、メンテナンスコストがかかります。

そこで自動的にscriptを組んで、いちいちwebpack.condfig.js を編集しないようにするのが本番運用では一般的なんだともいます。ライブラリなどを見ているとscript組んでトランスパイルしていました。

すっきりした。

Answer 2

ネット記事をいろいろ見ていましたが、こういった部類のTipsは全然ありませんでした。

さすがにそれは嘘じゃないですかね？あなたの環境と丸まる一致してコピペで出来る二次情報が無いだけだと思うしまずは日本語公式サイト見てみるのがよろしいかと。

そこで、テストする際に毎回バンドル後のhtmlファイルをnginxコンテナの指定の部分にコピーして、

そういう時の解決策も例えば以下のような公式に載ってます。
https://docs.docker.jp/storage/volumes.html
ちなみにその程度の事なら二番煎じの情報も大量に見つかると思います。

ブラウザでnginxのipとportを指定して確認するというのも非常にめんどくさいです。

余計な事しなければlocalhostにアクセスするだけでwsl2にフォワードされますよ
wsl2の初期の環境構築時にコピペで要らない作業事してたりしませんか？
よくわからないならwsl2自体を初期化してはどうでしょうか？
意図的にフォワードさせてないんなら（netsh）で明示的に設定するしかないんじゃないですかね

windowsでdocker,vscodeを使用して開発する方は毎回このめんどくさいアプローチをしているのでしょうか？

dockerdesktopとvscode拡張の組み合わせならそんな面倒な事にならなくないですかね？なんか変なことしてません？

Comments

[ryomannn]

質問文が簡潔にまとまってなくてすみません。

> そこで、テストする際に毎回バンドル後のhtmlファイルをnginxコンテナの指定の部分にコピーして、

の回答としてボリュームを使って、dist配下でボリュームを作成し、nginxのドキュメントルート配下と共有すればできるよ。と解釈したのですが、

そうするとバンドル後のdistフォルダの構造と、nginxのドキュメントルート配下のフォルダ構成が一致していないといけないと思います。

バンドル後のフォルダ構成を無理やりnginxで外部に提供したいフォルダ構成にしようとすると、
https://qiita.com/fukamiiiiinmin/items/85b3b5cb6e65d9b4ebdd
この記事みたいに、無理やりな対処法になってしまいます。

なのでバンドル後のファイルをいちいちnginxの指定の場所にコピーしないといけないのではないかという疑問が生まれてだらだらと書いてしまいましたがこの質問を書いています。

バンドル後のフォルダ構成をnginxで提供したいと思っているフォルダ構成にするのがスタンダードな開発なのでしょうか？

他のだらだら書いていることは無視してもらって大丈夫です。

[hentaiman]

> バンドル後のフォルダ構成をnginxで提供したいと思っているフォルダ構成にするのがスタンダードな開発なのでしょうか？

提供というのはpublicなディレクトリって意味ですか？それならその通りです。
nginxのコンテナとして提供(railsとかと共有)するという意味なら、publicのひとつ上の階層とか適切な階層を共有すれば良いと思いますが。

[ryomannn]

nginxで提供するフォルダ構成というのは、/usr/share/nginx/html配下に作るディレクトリ構成のという意味です。

> 提供というのはpublicなディレクトリって意味ですか？それならその通りです

つまり、開発してページが増えるごとにwebpackの設定ファイルにHTMLwebpackPluginの記述を付け足していくという開発の仕方でいいということですね？