docker - VueJS Nginx 和 docker 设置 - 本地 ERR_EMPTY_RESPONSE

Question

这是我第一次使用 Docker，如果您在阅读本文时感到生气，我们深表歉意。

我目前正在尝试将我的 Vue 应用程序与 Nginx 和开发容器对接(目前都不起作用)

我一直在无休止地浏览教程，但由于我的文件夹结构不一样，我一直在兜圈子，所以我不断收到此 OSError: [Errno 22] Invalid argument: '\\?\D:\GitHub\RepoName\website\node_modules\.bin\acorn' 错误

我的环境结构目前是(而且不能改变!)

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"

正如您在构建时看到的那样，它会调用 ./website 中的 Dockerfile

#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;"]

如果需要，我的 Nginx conf(从 VueJS Docker 设置复制)

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;
  }

}

错误:

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

在处理上述异常的过程中，又发生了一个异常:

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

更新

通过将其添加到 .dockerignore 来修复节点问题(我认为)

现在得到:

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

现在解决了那个问题，现在解决下一个问题......

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

现在通过几乎重新安装 vue 解决了这个问题(我在尝试设置它时删除了 index.html 文件......)

现在我得到了(更新了我的 docker-compose、nginx 和 dockerfile 以反射(reflect)这一点)

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

Answer 1

通过将 nginx 端口更改为监听 80 解决了此问题。

Nginx 路径还需要指向 app/dist，因为 npm run build 会把文件放在那里!