Vue CLI errors trying to deploy vue app with docker

Question

I have a VUE app I have been developing locally which I am trying to deploy to a remote server for testing.

My dev machine is running Arch with Docker 20.10.17

My VUE app has the following Dev.Dockerfile which is used to build it:

FROM node:lts-alpine

WORKDIR /code

COPY package*.json /code/

RUN npm install --location=global @vue/cli

RUN yarn install

COPY . .

# serve application in development
CMD [ "yarn", "serve" ]

The relevant service in my docker-compose.yml is:

frontend:
  build: 
    context: ./frontend
    dockerfile: dockerfiles/Dev.Dockerfile
  command: yarn serve
  stdin_open: true
  restart: always
  volumes:
    - ./frontend/:/code/
  ports:
    - "8080:8080"

The VUE service is part of a larger set of services I am setting up with docker-compose.

This seems to be running fine on my local machine (Arch with the latest Docker).

When I try to deploy this to an Ubuntu 20.04 server, however, I run into issues.

The server is running Docker-compose 1.29.2 and Docker 20.17.1

The build goes fine, but when I try to run docker-compose up I get:

yarn run v1.22.19
$ vue-cli-service serve
/bin/sh: vue-cli-service: not found

Reading elsewhere on stackoverflow about this issue, I tried installing:

RUN npm install -g @vue/cli-service

This changes the error to:

yarn run v1.22.19
$ vue-cli-service serve
...
Error: Cannot find module '@vue/cli-plugin-babel'

I have also tried to explicitly install:

RUN npm install @babel/core @babel/preset-env
RUN npm install @vue/cli-plugin-babel

The error remains the same.

This is not an issue on my local machine running Arch, only the remote machine running Ubuntu 20. How do I fix this?

MORE INFORMATION.

After experimenting with @amir's answer I have some more information.

On Arch, Docker compose is now a command in Docker and I have been using it without thinking about it. On the Ubuntu server that doesn't work and instead I am using the 'docker-compose' command. I "assumed" these were functionally the same but I think docker-compose is causing the failure.

If I build my frontend service manually with Docker and my Dev.Dockerfile and then run it with Docker it works perfectly. No warnings.

Building with Docker-compose works... but throws a number a warnings:

yarn add v1.22.19
info No lockfile found.
[1/4] Resolving packages...
warning @vue/cli-service > cssnano > cssnano-preset-default > postcss-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
warning @vue/cli > @vue/cli-ui > apollo-server-express > subscriptions-transport-ws@0.9.19: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > subscriptions-transport-ws@0.9.19: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
warning @vue/cli > @vue/cli-ui > apollo-server-express > graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
warning @vue/cli > @vue/cli-ui > apollo-server-express > graphql-tools > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning @vue/cli > vue-codemod > jscodeshift > micromatch > snapdragon > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
warning @vue/cli > vue-codemod > jscodeshift > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @vue/cli > vue-codemod > jscodeshift > micromatch > snapdragon > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning @vue/cli > vue-codemod > jscodeshift > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details

So it isn't finding the yarn.lock file - which is there - and throwing a number of module errors.

Again, this does not occur on my Arch machine running 'Docker compose' but does on an Ubuntu 20.04 server running docker-compose

I did try adding a volume directly to the node_module directory as per @amir's answer but that did not work. I also tried changing the copy location for the Dockerfile as per that answer. No joy.

Ideas? I am really stuck here.

score 1 · Answer 1 · answered Jun 22 '22 at 09:28

1

Hi I fixed my own version with below dockerfile:

FROM node:16.6-alpine3.14
WORKDIR /code
RUN apk update && apk upgrade && apk add curl py-pip make g++
COPY package*.json ./
COPY . .
EXPOSE 8080
RUN yarn install
CMD yarn dev # or serve

I think there might be a problem in your copying package.json file line

  frontend:
    container_name: frontend
    ports:
      - 8080:8080
    env_file:
      - ./.env
    build:
      context: <Context>
      target: <TARGET>
    networks:
      - network
    volumes:
      - <Location>:/code
      - <Location>/node_modules

answered Jun 22 '22 at 09:28

Amir Jani

380
6
16

1

This answer didn't fix things but it's helped find some other issues. I think the problem is docker compose. Building with Docker directly works... – tanbog Jun 23 '22 at 03:10
do you delete the ```command: yarn serve``` and ```stdin: true``` there is no need for them – Amir Jani Jun 23 '22 at 06:55
I did. No change. – tanbog Jun 23 '22 at 07:15
would you add ```docker logs ```? – Amir Jani Jun 23 '22 at 07:41
The logs just repeat the error: ```yarn run v1.22.19 $ vue-cli-service serve /bin/sh: vue-cli-service: not found error Command failed with exit code 127. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.``` – tanbog Jun 23 '22 at 07:51
will you check this url https://stackoverflow.com/questions/59866945/npm-run-server-throws-error-sh-1-vue-cli-service-not-found – Amir Jani Jun 23 '22 at 07:59
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/245838/discussion-between-amir-jani-and-tanbog). – Amir Jani Jun 23 '22 at 08:01

score 1 · Accepted Answer · answered Jun 24 '22 at 01:55

Ok. After a lot of trial and error and lots of help from @Amir Jani I was able to fix it.

In case it helps anyone else. What was occuring is the node_module directory was being overwritten in the final image build. This is simmilar to this issue

The fix was to add a volume to store the node_module directory. The syntax for the volume had to be absolute from the volume storing the code - since that's where my node_module was located.

Final Dockerfile and docker-compose.yml

FROM node:lts-alpine
WORKDIR /code
COPY package*.json /code/
RUN yarn add global @vue/cli
RUN yarn install
COPY . .
CMD [ "yarn", "serve" ]

docker-compose.yml

version: "3.9"
services:
    ...
  frontend:
    container_name: frontend
    build:
      context: ./frontend
      dockerfile: dockerfiles/Dev.Dockerfile
    restart: always
    volumes:
      - ./frontend/:/code/
      - /code/node_modules
    ports:
      - "8080:8080"

I'm not sure this is the best solution, but it seems to work. Is mounting the node_modules bad for any reason?

I am still confused why this wasn't a problem on an Arch machine but was on Ubuntu 20. The versions of docker used were the same. If anyone could explain that it would be a big help

score 0 · Answer 3 · answered Jan 23 '23 at 14:20

0

Just add the following code in the Dockerfile:

NODE_ENV=development npm run instal and this might resolve vue-cli issue

answered Jan 23 '23 at 14:20

Tiago Perrelli

1

1

Are these two separate commands? It's not clear from the formatting. – ryanwebjackson Jan 27 '23 at 19:45

Vue CLI errors trying to deploy vue app with docker

3 Answers3