駄目な箇所を箇条書きにしていきます。
- 実行コマンドがない
- srcディレクトリだけがNode.jsのプロジェクトではない
- フロントってなんだよ
1つずつ見ていきましょう。
Dockerは単なる仮想環境ではありません。
「ターミナルの1コマンドのみを確実に実行させる為にディレクトリ構造を整えて動かす仮想環境」です。
なのでその「実行すべき1コマンド」はなんぞや?がとても重要になります。
次に/srcディレクトリだけを中身として突っ込んでいるのが問題です。
Node.jsのプロジェクトというのはプロジェクトルートにpackage.jsonというプロジェクトの概要を説明するファイルが存在し、
npm installコマンドを実行すると、package.jsonを読み込んで依存モジュールをダウンロードし、/node_modulesディレクトリに保管してくれます。
その後、/srcのJavaScriptファイルがrequire("モジュール名")でモジュールを読み込む事を指定したら
プロジェクトルートにある/node_modulesからJavaScriptファイルを探してきてロードしてくれます。
また1コマンドの方に着目した場合、
package.jsonファイル内にコマンドを登録してnpm run xxxで呼び出すnpm-scripts
Gulp等のタスクランナーといったプロジェクトを実現する為のファイル群もプロジェクトルートにあるでしょう。
これを使って1コマンドの動作を担保すべきなので、/srcディレクトリだけが内部にコピーされて実行されるなんて絶対にありえないのです。
この2項目を加味した場合のdocker-compose.ymlファイルは下記のようになってることかと思います。
yaml
1version: "3.8"
2
3services:
4 front:
5 build:
6 context: ./
7 dockerfile: ./docker/front/Dockerfile
8 restart: always
9 volumes:
10 - .:/var/www/:cached
11 working_dir:
12 /var/www/js/
13 ports:
14 - "3000:3000"
15 command: "npm start"
16
17volumes:
18 db-store:
まぁ、それでは1ミリも解決しないと思うので最後の項目に行きましょう。
フロントってなんだよ
質問文からは読み取れない項目です。
なのでエスパー回答するので、照らし合わせながらdocker-compose.yml等を作り込んでください。
volumesの:/var/www/:cached
/var/wwwってなんやねん?
これはApacheを起動させてWebサーバとして稼働させた時にデフォルトのルートディレクトリです。
なので、Apacheで動作してほしいんですよね。
(その他の、例えばNginxなりExpressjsを想定しているかもしれないけど)
前項で散々「実行したい1コマンドが大事なんだよ」と説明しましたが、
ApacheやNginx、MySQLの既製品サーバが前提となっているなら話は別。
最初からそのサーバーソフトウェアを実行する為のコマンドがイメージ内に注入されてるので、新しく何かする必要はありません。
今回説明したのは、それがない実行ファイル&環境だけが入っているNode.jsを指定しているからです。
勘違いしないようにしてくださいね。
DockerfileのFROM node:17-alpine
このイメージ(仮想マシン)にはNode.jsの実行ファイルしか入ってないので、
これにApache入っとるんか?って言われても入ってるわけないですよ。
だから、回答者のわたしが質問文を読み取った感じでゴールを設定すると、
「SASSやPugなどのテンプレート言語で書かれたファイル、Node.jsのしきたりで書かれたJavaScriptファイル
これらを静的なHTML、CSS、JSファイルにコンパイルしてから、Apacheで実行したい!」
となるわけです。
Node.jsとApacheが同居してるイメージなんてなので、一見困ったとなるのですが、
Dockerが考えてないわけないじゃないですか。
ちゃんと「マルチステージビルド」という形で用意されています。
参考記事
このマルチステージを使うと、
一度Node.jsのイメージを起動させてGulpやWebpack等を実行して静的ファイル達にコンパイルして
Node.jsのマシンで出来上がった静的ファイルをApacheだけが入っているイメージにコピー
その後Apacheだけが入っているイメージのみを保存
こういう形でフロントエンドのイメージを作成する事が可能となります。
Apacheで調べたらhttpdという名前だったのでそれを使いますかね。
Dockerfile
1FROM node:17-alpine AS build-env
2ADD . /work
3WORKDIR /work
4RUN gulp build # ここに静的ファイル群を生成する為の実行コマンドを記述する
5
6FROM httpd:2.4-alpine
7COPY --from=build-env /work/dist /usr/local/apache2/htdocs/
一般的にsrc(ソース)、コンパイル前のファイルを指す言葉であり、
生成されたファイルはdist(ディスティネーション)、コンパイル等を行ったあとに生成される成果物を指します。
なのでプロジェクトルートにdistディレクトリをつくって、それをApacheイメージが「個々に保存しろ」と指定したディレクトリにコピーするというDockerfileを作りました。
yaml
1version: "3.8"
2
3services:
4 front:
5 build:
6 context: ./
7 dockerfile: ./docker/front/Dockerfile
8 restart: always
9 volumes:
10 - ./dist:/usr/local/apache2/htdocs:cached
11 ports:
12 - "3000:3000"
13
14volumes:
15 db-store:
これである程度進むんじゃないですかね。
最後に
dockerfile: ./docker/front/Dockerfile
これ絶対社内に詳しい仕事できるエンジニアいるでしょ。
知らない事を聞けないのはチームである意味がないので、
ある程度勉強するのは良いと思いますが、
実際問題どうするか、最終的な判断はその人に相談してください。
2022/03/30 07:40
退会済みユーザー
2022/03/30 11:45
2022/04/14 00:40