VueJS Nginx and docker set up - Local ERR_EMPTY_RESPONSE

Question

This is my first time using Docker so apologies if this drives you mad when reading this.

I'm currently attempting to dockerise my Vue application with Nginx and a dev container (Neither works at the moment)

I have been going endlessly around tutorials but keep going round in circles as my folder structure is not the same so I keep getting this OSError: [Errno 22] Invalid argument: '\\?\D:\GitHub\RepoName\website\node_modules\.bin\acorn' error

The structure of my environment is currently (And cannot be changed!)

RepoName
  - Docker-Compose
       - website
          - Vue Application (Build, src, static, node modules)
           -Dockerfile (Moved from Docker-Setup/Website)
           -Nginx Conf (Moved from Docker-Setup/Website)

Docker-Compose

 website:
        container_name: tutorial
        image: nginx:1.17
        build:
            context: ./website
        volumes:
            - ./website:/app
            - ./app/node_modules
        ports:
            - "8080:80"

As you can see when building it calls the Dockerfile in ./website

#Docker file for VueJS using NGINX
# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN apk add --update npm
RUN npm install @vue/cli@3.7.0 -g
RUN npm install
COPY . /app
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage

COPY --from=build-stage . /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d

ENV PORT = 8080
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

My Nginx conf if required (Copied from VueJS Docker set up)

server {

  listen 8080;

  location / {
    root   /usr/share/nginx/html/app;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

Errors:

OSError: [Errno 22] Invalid argument: '\\?\D:\GitHub\RepoName\website\node_modules\.bin\acorn'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "docker-compose", line 3, in <module>
  File "compose\cli\main.py", line 67, in main
  File "compose\cli\main.py", line 126, in perform_command
  File "compose\cli\main.py", line 1070, in up
  File "compose\cli\main.py", line 1066, in up
  File "compose\project.py", line 615, in up
  File "compose\service.py", line 346, in ensure_image_exists
  File "compose\service.py", line 1125, in build
  File "site-packages\docker\api\build.py", line 160, in build
  File "site-packages\docker\utils\build.py", line 31, in tar
  File "site-packages\docker\utils\build.py", line 100, in create_archive
OSError: Can not read file in context: \\?\D:\GitHub\RepoName\website\node_modules\.bin\acorn
[16788] Failed to execute script docker-compose

Update

Fixed Node Issue (I think) by adding it to .dockerignore

Now getting:

Error: Cannot find module '/app/build/build.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-10-12T10_36_28_384Z-debug.log

Fixed that issue now, now onto the next one...

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve '/app/index.html' in '/app':
  Error: Can't resolve '/app/index.html' in '/app'

  - compiler.js:76
    [app]/[html-webpack-plugin]/lib/compiler.js:76:16

  - Compiler.js:300
    [app]/[webpack]/lib/Compiler.js:300:11

  - Compiler.js:510
    [app]/[webpack]/lib/Compiler.js:510:14

  - Tapable.js:202 next
    [app]/[tapable]/lib/Tapable.js:202:11

  - CachePlugin.js:78 Compiler.<anonymous>
    [app]/[webpack]/lib/CachePlugin.js:78:5

  - Tapable.js:206 Compiler.applyPluginsAsyncSeries
    [app]/[tapable]/lib/Tapable.js:206:13

  - Compiler.js:507
    [app]/[webpack]/lib/Compiler.js:507:11

  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [app]/[tapable]/lib/Tapable.js:195:46

  - Compilation.js:683
    [app]/[webpack]/lib/Compilation.js:683:19

  - Tapable.js:202 next
    [app]/[tapable]/lib/Tapable.js:202:11

  - index.js:126 LastCallWebpackPlugin.process
    [app]/[last-call-webpack-plugin]/index.js:126:12

  - index.js:197 Compilation.<anonymous>
    [app]/[last-call-webpack-plugin]/index.js:197:12

  - Tapable.js:206 Compilation.applyPluginsAsyncSeries
    [app]/[tapable]/lib/Tapable.js:206:13

  - Compilation.js:674
    [app]/[webpack]/lib/Compilation.js:674:11

  - Tapable.js:202 next
    [app]/[tapable]/lib/Tapable.js:202:11

  - index.js:126 LastCallWebpackPlugin.process
    [app]/[last-call-webpack-plugin]/index.js:126:12



  Build failed with errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-10-12T11_35_40_116Z-debug.log

Fixed that issue now by pretty much re-installing vue (I deleted the index.html file when trying to get it set up...)

Now I'm getting (Updated my docker-compose, nginx and dockerfile to reflect this)

```
This page isn’t working localhost didn’t send any data.
ERR_EMPTY_RESPONSE
```

Answer 1

Fixed this issue by changing nginx port to listen on 80.

Nginx path also needs to point to app/dist as npm run build makes the files go there!