DockerでNode.js、Vue.js、Nuxt.jsを共存させる開発環境を作成したい

Question

実現したいこと

現在、フロント側はVue.jsで実装→バックエンド側とつなぎこむ時にNuxt.jsに落とし込むという案件を進めているのですが、開発環境を作成するのに、DockerでNode.jsとVue.jsとNuxt.jsを１つのコンテナ内で構築する方法を探しています。

発生している問題

Dockerfileでnode.jsに関する設定を記述するところまでは理解したんですが、docker-compose.ymlでのVue.jsとNuxt.jsの同時に設定する方法がわからず、調べてみたところ、Node.js+Vue.jsやNode.js+Nuxt.jsの環境構築の方法はあるのですが、Node.js+Vue.js+Nuxt.jsという環境構築の方法が見つかりませんでした。

疑問点

そもそもNuxt.jsはVue.jsのフレームワークで、Nuxt.jsの環境を構築した時点でVue本体があるので、Node.js+Nuxt.js環境にVue.jsを構築する設定をしなくていいのかなと思っています。
ただその場合はNode.js+Nuxt.js環境でVue.jsを動作させることは可能なのでしょうか？

もしくはVue.jsで進めている間はNode.js+Vue.jsの環境にしておいて、Nuxt.jsに落とし込む時にNode.js+Nuxt.jsの環境に移行するのがいいのでしょうか？

Answer 1

Node.jsさえ入っていれば、
npm install一撃で全ての依存モジュールが揃い、
今からでもすぐに開発できるNuxtやVueは恩恵は殆ど無いと言って良いでしょう。

DockerはLinuxマシンだからBashが使えるよ！！
マジか！！俺の開発マシンMacOSだから普通にBash入ってるんだけどな！
これの何処が嬉しいんですか？って話ですよ。

Node.jsによるWebサーバやWebpackのコンパイル作業をDockerにやらせるメリットって、
Node.jsのバージョン管理ができる程度でしかありません。
そりゃ誰も書かんわって話ですね。

---

むしろNuxtで提供している更にバックエンドのサービスに使うのがメリットが大きいです。
例えばMySQLに顧客の情報を格納したいとか、
キャッシュ情報を保存するのにRedisサーバ欲しいといったものです。

自分でこういった開発用サーバを建てるのは面倒ですよね。
あなたがMacで開発しており、HomebrewでMac用のMySQLサーバを構築して作業を進めていたとしましょう。
そこにWindowsで開発している人が協業者として入って来たらどうなります？

そういうのをdocker-compose up -d一撃で2〜3個のサーバーを同時に立ち上げて、
ポート開放なんかの情報すらも全てdocker-compose.ymlに記載されてて今すぐ使える！みたいな所がメリットなんです。

---

それでもDocker Compose化を推し進めるのであれば
「Webサーバとデータベースサーバを連携させる」で表現するという形にするのが自然でしょうか。

よくAWSのサービスの構成図を作っている上流工程の方とか居ますが、
あんな感じでdocker-compose.ymlファイルを開けばわかるをゴールに、
環境変数を使ってサーバ間の連携を記述していくのがゴールになります。

Webサーバ部分なんてこれで十分です。

プロジェクトルートを例えば/appにぶちこんで、
シェルスクリプトで/appへ移動してからnpm run watchを叩いて終わり。

今回は環境変数でMySQLサーバへのホスト名を差し込む想定で追加したので、
process.env.DB_HOSTといったキーを使うようにしておけば本番環境でもそのまま流用出来ますね。

version: "3.3"
services:
  web:
    image: node
    volumes:
      - .:/app
    tty: true
    command: bash /app/docker-entrypoint.sh
    env:
      - DB_HOST=db
  db:
    image: mysql

#!/bin/bash

cd /app
npm install
npm run watch

Comments

[Yapin]

ご回答ありがとうございます！

すみません、こちらから開示する情報が少なかったです。
私はフロント側の開発担当でチーム人数が2～3人、PCもMacとWindowsがバラバラになっており、開発環境を統合する必要があるので、Dockerでの環境構築をする必要があるという感じです。(私自身はWindowsです。)
そしてDockerを使うのが初めてなので、四苦八苦しています。

あと、バックエンド側の開発が別のシステム会社の担当となっており、ひとまずVue.jsでフロント側を構築して、バックエンド側とつなぎこむ時にNuxt.jsに落とし込むという工程で進めるという形になっています。
つなぎこむのは、だいぶ先になる予定です。

なのでDockerでNode.js+Vue.js+Nuxt.jsという環境を構築しておけば、「フロント側はVue.jsで構築する→繋ぎこむ時にNuxt.jsに落とし込む」という形で一種類の環境構築で終わりまで走れるのではないかと考えておりました。

言葉足らずで申し訳ございませんでした。
ご丁寧な回答ありがとうございました。

[miyabi-sun]

なるほど
回答ではあえて汎用性を持たせて書きましたが、
特化したアドバイスをしていきます。

まず個人的な感想としては、フロントの開発はDocker運用化に伴いVue.jsを捨ててNuxt.jsへ移行した方が良いでしょうね。
NuxtはVueを含みますから、頑張れば数日でいけると思います。

バックエンド作ってる会社に「さっさとdocker-compose.yml作って送ってこい」とせっついて出させて、
それに私が解答欄で作った`npm run watch`だけやるしょぼいコンテナを被せて完成となります。
（バックエンド作ってる会社に技術力がなければ自分で再現することになりますが……）

https://qiita.com/khsk/items/7bd4fb480c80124c00e2
この記事などを参考に「serverMiddleware」を使えばNuxtでAPIのエンドポイントが切れるので、
それで一旦はリバースプロキシサーバとして動作させましょう。

まずフロントのVue部分から「serverMiddleware」に向けてAjax通信を飛ばして、
APIの関数内で環境変数を元にバックエンドのサーバーに改めてHTTP通信を行い結果のbody文字列をresに突っ込む作業にするのが良いと思います。

最終的にはリバースプロキシでやってるコードをバックエンドのコードに移植していく感じになるでしょうね。

[Yapin]

回答が遅くなり申し訳ございません。

やはりフロントの開発としては、Vue.jsで作成したファイルを動かせるNuxt.js環境で進めていくのがいいんですね。
Dockerでnode.js+Nuxt.jsの環境を作ることにします！

特化したアドバイスありがとうございました！