CODEWITHSUNDEEP
docker-composedockerfilenuxt.js
DaniG2k
DaniG2k

Reputation: 4903

Dockerizing Nuxt.js app: docker run works but docker-compose doesn't

I'm trying to containerize a Vue.js + Nuxt.js app. The odd thing is that I am able to access the app when I run docker run -p 3000:3000 <image_name> but not when I run a docker-compose up command.

My Dockerfile looks like this:

FROM node:8.9.1-alpine

# Create app dir
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install deps
RUN apk update && apk upgrade && apk add git

COPY package*.json /usr/src/app/
RUN npm install
# If building for production:
# RUN npm install --only=production
COPY . /usr/src/app/

ENV HOST 0.0.0.0
EXPOSE 3000

# Start command
CMD [ "npm", "run", "dev" ]

As aforementioned, running docker build -t <image_name> . and then docker run -p 3000:3000 <image_name> works.

However, with the following docker-compose.yml file:

version: '3'
services:
  web:
    build: .
    ports:
    - "3000:3000"
    volumes:
    - .:/usr/src/app

running docker-compose up results in the following error:

docker-compose up
Creating network "vueui_default" with the default driver
Creating vueui_web_1 ...
Creating vueui_web_1 ... done
Attaching to vueui_web_1
web_1  |
web_1  | > [email protected] dev /usr/src/app
web_1  | > nuxt
web_1  |
web_1  | 2017-11-27T06:23:52.962Z nuxt:axios BaseURL: http://localhost:3000/api (Browser: /api)
web_1  | 2017-11-27T06:23:57.822Z nuxt:build App root: /usr/src/app
web_1  | 2017-11-27T06:23:57.823Z nuxt:build Generating /usr/src/app/.nuxt files...
web_1  | 2017-11-27T06:23:57.855Z nuxt:build Generating files...
web_1  | 2017-11-27T06:23:57.883Z nuxt:build Generating routes...
web_1  | 2017-11-27T06:23:58.018Z nuxt:build Building files...
web_1  | 2017-11-27T06:23:58.429Z nuxt:build Adding webpack middleware...
web_1  |  ERROR  Failed to compile with 3 errors06:24:28
web_1  |
web_1  |  error  in ./layouts/default.vue
web_1  |
web_1  | Module build failed: Error: Missing binding /usr/src/app/node_modules/node-sass/vendor/linux_musl-x64-57/binding.node
web_1  | Node Sass could not find a binding for your current environment: Linux/musl 64-bit with Node.js 8.x
web_1  |
web_1  | Found bindings for the following environments:
web_1  |   - OS X 64-bit with Node.js 9.x
web_1  |
web_1  | This usually happens because your environment has changed since running `npm install`.
web_1  | Run `npm rebuild node-sass --force` to build the binding for your current environment.
web_1  |     at module.exports (/usr/src/app/node_modules/node-sass/lib/binding.js:15:13)
web_1  |     at Object.<anonymous> (/usr/src/app/node_modules/node-sass/lib/index.js:14:35)
web_1  |     at Module._compile (module.js:635:30)
web_1  |     at Object.Module._extensions..js (module.js:646:10)
web_1  |     at Module.load (module.js:554:32)
web_1  |     at tryModuleLoad (module.js:497:12)
web_1  |     at Function.Module._load (module.js:489:3)
web_1  |     at Module.require (module.js:579:17)
web_1  |     at require (internal/module.js:11:18)
web_1  |     at Object.<anonymous> (/usr/src/app/node_modules/sass-loader/lib/loader.js:3:14)
web_1  |     at Module._compile (module.js:635:30)
web_1  |     at Object.Module._extensions..js (module.js:646:10)
web_1  |     at Module.load (module.js:554:32)
web_1  |     at tryModuleLoad (module.js:497:12)
web_1  |     at Function.Module._load (module.js:489:3)
web_1  |     at Module.require (module.js:579:17)
web_1  |
web_1  |  @ ./node_modules/vue-style-loader?{"sourceMap":true}!./node_modules/css-loader?{"minimize":true,"importLoaders":1,"sourceMap":true,"alias":{"/static":"/usr/src/app/static","/assets":"/usr/src/app/assets"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-314f53c6","scoped":false,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./layouts/default.vue 4:14-499 13:3-17:5 14:22-507
web_1  |  @ ./layouts/default.vue
web_1  |  @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["/usr/src/app/node_modules/babel-preset-vue-app/dist/index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./.nuxt/App.vue
web_1  |  @ ./.nuxt/App.vue
web_1  |  @ ./.nuxt/index.js
web_1  |  @ ./.nuxt/client.js
web_1  |  @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=3000&path=/__webpack_hmr ./.nuxt/client.js
web_1  |
web_1  |  error  in ./layouts/plain.vue
web_1  |
web_1  | Module build failed: Error: Missing binding /usr/src/app/node_modules/node-sass/vendor/linux_musl-x64-57/binding.node
web_1  | Node Sass could not find a binding for your current environment: Linux/musl 64-bit with Node.js 8.x
web_1  |
web_1  | Found bindings for the following environments:
web_1  |   - OS X 64-bit with Node.js 9.x
web_1  |
web_1  | This usually happens because your environment has changed since running `npm install`.
web_1  | Run `npm rebuild node-sass --force` to build the binding for your current environment.
web_1  |     at module.exports (/usr/src/app/node_modules/node-sass/lib/binding.js:15:13)
web_1  |     at Object.<anonymous> (/usr/src/app/node_modules/node-sass/lib/index.js:14:35)
web_1  |     at Module._compile (module.js:635:30)
web_1  |     at Object.Module._extensions..js (module.js:646:10)
web_1  |     at Module.load (module.js:554:32)
web_1  |     at tryModuleLoad (module.js:497:12)
web_1  |     at Function.Module._load (module.js:489:3)
web_1  |     at Module.require (module.js:579:17)
web_1  |     at require (internal/module.js:11:18)
web_1  |     at Object.<anonymous> (/usr/src/app/node_modules/sass-loader/lib/loader.js:3:14)
web_1  |     at Module._compile (module.js:635:30)
web_1  |     at Object.Module._extensions..js (module.js:646:10)
web_1  |     at Module.load (module.js:554:32)
web_1  |     at tryModuleLoad (module.js:497:12)
web_1  |     at Function.Module._load (module.js:489:3)
web_1  |     at Module.require (module.js:579:17)
web_1  |
web_1  |  @ ./node_modules/vue-style-loader?{"sourceMap":true}!./node_modules/css-loader?{"minimize":true,"importLoaders":1,"sourceMap":true,"alias":{"/static":"/usr/src/app/static","/assets":"/usr/src/app/assets"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-1215e3b4","scoped":false,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./layouts/plain.vue 4:14-497 13:3-17:5 14:22-505
web_1  |  @ ./layouts/plain.vue
web_1  |  @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["/usr/src/app/node_modules/babel-preset-vue-app/dist/index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./.nuxt/App.vue
web_1  |  @ ./.nuxt/App.vue
web_1  |  @ ./.nuxt/index.js
web_1  |  @ ./.nuxt/client.js
web_1  |  @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=3000&path=/__webpack_hmr ./.nuxt/client.js
web_1  |
web_1  |  error  in ./layouts/public.vue
web_1  |
web_1  | Module build failed: Error: Missing binding /usr/src/app/node_modules/node-sass/vendor/linux_musl-x64-57/binding.node
web_1  | Node Sass could not find a binding for your current environment: Linux/musl 64-bit with Node.js 8.x
web_1  |
web_1  | Found bindings for the following environments:
web_1  |   - OS X 64-bit with Node.js 9.x
web_1  |
web_1  | This usually happens because your environment has changed since running `npm install`.
web_1  | Run `npm rebuild node-sass --force` to build the binding for your current environment.
web_1  |     at module.exports (/usr/src/app/node_modules/node-sass/lib/binding.js:15:13)
web_1  |     at Object.<anonymous> (/usr/src/app/node_modules/node-sass/lib/index.js:14:35)
web_1  |     at Module._compile (module.js:635:30)
web_1  |     at Object.Module._extensions..js (module.js:646:10)
web_1  |     at Module.load (module.js:554:32)
web_1  |     at tryModuleLoad (module.js:497:12)
web_1  |     at Function.Module._load (module.js:489:3)
web_1  |     at Module.require (module.js:579:17)
web_1  |     at require (internal/module.js:11:18)
web_1  |     at Object.<anonymous> (/usr/src/app/node_modules/sass-loader/lib/loader.js:3:14)
web_1  |     at Module._compile (module.js:635:30)
web_1  |     at Object.Module._extensions..js (module.js:646:10)
web_1  |     at Module.load (module.js:554:32)
web_1  |     at tryModuleLoad (module.js:497:12)
web_1  |     at Function.Module._load (module.js:489:3)
web_1  |     at Module.require (module.js:579:17)
web_1  |
web_1  |  @ ./node_modules/vue-style-loader?{"sourceMap":true}!./node_modules/css-loader?{"minimize":true,"importLoaders":1,"sourceMap":true,"alias":{"/static":"/usr/src/app/static","/assets":"/usr/src/app/assets"}}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-1eea6a3d","scoped":false,"hasInlineConfig":true}!./node_modules/sass-loader/lib/loader.js?{"indentedSyntax":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./layouts/public.vue 4:14-498 13:3-17:5 14:22-506
web_1  |  @ ./layouts/public.vue
web_1  |  @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["/usr/src/app/node_modules/babel-preset-vue-app/dist/index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./.nuxt/App.vue
web_1  |  @ ./.nuxt/App.vue
web_1  |  @ ./.nuxt/index.js
web_1  |  @ ./.nuxt/client.js
web_1  |  @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=3000&path=/__webpack_hmr ./.nuxt/client.js

Any idea what I might be doing incorrectly?

Thanks in advance!

EDIT:

I am using MacOS for local development so I thought maybe the modules might be affected somehow (hence the message OS X 64-bit with Node.js 9.x). However, I have the following in my .dockerignore so this shouldn't be the case:

node_modules
npm-debug.log

Upvotes: 0

Views: 3821

Answers (1)

DaniG2k
DaniG2k

Reputation: 4903

I was able to fix this. The problem, as other threads mention, is that the following command needs to be executed within the container:

npm rebuild node-sass

This is due to differences in my local dev environment (MacOS) and the Docker container (Linux).

Since bash is not present by default in alpine, this can be done by dropping into the container using:

docker exec -it <image_name> /bin/sh

Upvotes: 1

Related Questions