0

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 > [email protected]: 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 > [email protected]: 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 > [email protected]: 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 > [email protected]: 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 > [email protected]: 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 > [email protected]: 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 > [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > [email protected]: 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 > [email protected]: 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 > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning @vue/cli > vue-codemod > jscodeshift > micromatch > snapdragon > source-map-resolve > [email protected]: See https://github.com/lydell/source-map-url#deprecated
warning @vue/cli > vue-codemod > jscodeshift > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > [email protected]: 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.

Improve this question

3 Answers 3

Reset to default
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
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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...
do you delete the command: yarn serve and stdin: true there is no need for them
I did. No change.
would you add docker logs <container name>?
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.
|
1

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

Improve this answer

Comments

0

Just add the following code in the Dockerfile:

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

Improve this answer

1 Comment

Are these two separate commands? It's not clear from the formatting.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.