dockerfileでNODE_ENV=productionを指定するとビルドが失敗する

Question

実現したいこと

• node.js環境でvueを本番環境用のnginxにビルドしたい

前提

• node:20-alpine3.17

発生している問題・エラーメッセージ

vueの公式ページを参考に開発環境・ビルド環境をnode.jsに、本番環境をnginxにデプロイするマルチステージビルドを実装していましたが、ビルド環境のNODE_ENVをNODE_ENV=productionに変更するとビルドエラーとなります。
エラー内容はビルド時に呼び出しているyarn buildで定義されているvue-cli-serviceが見つからないという内容です。

ERROR [frontend build-stage 9/9] RUN yarn run build                                                                                                                                                     0.8s
------
 > [frontend build-stage 9/9] RUN yarn run build:
0.493 yarn run v1.22.19
0.542 $ vue-cli-service build
0.556 /bin/sh: vue-cli-service: not found
0.568 error Command failed with exit code 127.
0.568 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
failed to solve: process "/bin/sh -c yarn run build" did not complete successfully: exit code: 127

該当のソースコード

手順としては以下のようにdocker-composeからdockerfileを呼び出してビルドしています。

1. docker-composeでワークスペースをマウント
2. package.jsonとyarn.lockファイルを/appにコピーしyarn installを実行
3. ワークスペース全体をマウントし、ビルド

version: "3.9"
services:
    
  frontend:
    container_name: vue-container
    build: 
      context: .
      dockerfile: ./infra/vue/Dockerfile.verifi
    ports:
      - 9001:80
    working_dir: /app
    volumes:
      - node_modules:/app/node_modules   
      - ./vue_workspace/front_app/:/app:cached

FROM node:20-alpine3.17 as build-stage

ENV NODE_ENV production

WORKDIR /app

RUN mkdir -p /usr/share/nginx/html
COPY ./vue_workspace/front_app /app
COPY ./vue_workspace/front_app/package*.json ./
COPY ./vue_workspace/front_app/yarn.lock ./
RUN yarn install --prod
COPY ./vue_workspace/front_app/ /app/
RUN yarn run build


FROM nginx:1.17.10-alpine as production-stage

RUN mkdir /app
COPY --from=build-stage /usr/share/nginx/html /usr/share/nginx/html
COPY ./infra/vue/nginx-verifi.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

試したこと

vue-cli-service: not foundと表示があったので、build前にyarn add @vue/cliを入れて実行してみましたが状況変わらずでした。
また、package.jsonのdependencesに@vue/cliが記載されていなかったため、devDependencesからコピーして持ってきましたが、同じエラーとなりました。
NODE_ENV=developmentを指定するとbuildは通過します。
よろしくお願いいたします。

Answer 1

解決しました。
package.jsonのdependencesに@vue-cli-serviceがなかったため、devDependencesの記述をコピーして実行するとビルドできました。

Comments

[退会済みユーザー]

productionビルドにvue-cli-service入ったらまずいのではないのでしょうか？
プロジェクトの構成など肝心な部分がないので分かりませんが、ビルドはdevelopmentで大丈夫だと思います。
https://vuejs.org/guide/best-practices/production-deployment.html

[mnr_kbys]

コメントありがとうございます。
dameo様のおっしゃる通りビルドはdevelopmentで問題なさそうでした。
ありがとうございます。