更改 Docker 上 Vue.js 应用程序的默认端口答案

【问题标题】：Change default port for Vue.js app on Docker更改 Docker 上 Vue.js 应用程序的默认端口
【发布时间】：2021-07-31 01:15:39
【问题描述】：

我正在尝试更改 docker 上 Vue.js 应用程序的默认端口。

我在官方文档中使用了这两个示例：https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html

带有 http-server 的 Dockerfile：

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

EXPOSE 8080
CMD [ "http-server", "dist" ]

带有 nginx 服务器的 Dockerfile：

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

这是我的 docker-compose 文件：

version: "3.7"
services:
    admclient: 
        build: ../food-order-frontend-admin
        image: myapp/myapp:v1.0
        container_name: myapp
        ports:
            - "6969:whateverIExposeInDockerFile"

这两个示例都有效，但仅在使用它们的默认端口 8080 和 80 时。使用非默认端口时，我在浏览器中收到以下错误：

crbug/1173575, non-JS module files deprecated

在控制台中没有任何用处。除非在 httpServer 上对应用程序进行 docker 记录：

Starting up http-server, serving dist
Available on:
  http://127.0.0.1:8080
  http://172.19.0.2:8080

显然，Dockerfiles 中的“公开任何端口”没有通过。 P.S：我不需要生产就绪的解决方案。所以我会寻求最快的解决方案。

【问题讨论】：

您是否正在做任何事情来更改应用程序正在侦听的端口（例如 Nginx listen 指令）？我们的 Docker 内部端口号有什么关系？
嘿大卫，docker-internal 端口很重要，因为我在同一个 docker-compose 中有多个前端应用程序。因此不需要使用默认端口。使用 http-server，我认为除了 Dockerfile 之外不需要其他任何东西？使用 nginx ......好吧，我尝试了 10 个教程，例如这个家伙的解决方案，这似乎正是我需要的：youtube.com/watch?v=hqOW4TuN59M nginx 文件是：github.com/adhavpavan/ContainerizingApps/blob/master/vue/…
假设您有三个基于 Express 的组件，它们都侦听端口 3000。在容器之间您可以使用 Docker 网络并连接到 app1:3000、backend:3000 等。在 Docker 之外，您可以将它们重新映射到不同的端口：app1 设置3000:3000，backend 6969:3000，等等。
但是第二个ports: 号码需要匹配应用程序正在监听的内容。更改 Docker 配置而不更改应用程序将导致此错误。设置EXPOSE 几乎没有任何作用。

标签： docker vue.js docker-compose

【解决方案1】：

我在 https://github.com/adhavpavan/ContainerizingApps/tree/master/vue 中找到了使用 nginx 的可行解决方案。

Dockerfile：

FROM node:lts-alpine as builder
WORKDIR /usr/src/app
COPY . ./
RUN npm install
RUN npm run build
FROM nginx:alpine
COPY --from=builder /usr/src/app/dist /var/www
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 3001
ENTRYPOINT ["nginx","-g","daemon off;"]

码头工人撰写：

version: "3.7"
services:
    myapp: 
        build: ../myapp
        image: test/myapp:v1.0
        container_name: myapp
        ports:
            - "6970:3001"

答案似乎在于 David Maze 在 cmets 中提出的建议。需要一种正确的方法来告诉服务器监听特定端口。

nginx.conf：

worker_processes auto;
events {
    worker_connections 8000;
    multi_accept on;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    log_format compression '$remote_addr - $remote_user [$time_local] '
         '"$request" $status $upstream_addr '
         '"$http_referer" "$http_user_agent"';
    server {
        listen 3001;
        access_log /var/log/nginx/access.log compression;
        root /var/www;
        index index.html index.htm;
        location / {
            if (!-e $request_filename) {
                rewrite ^(.*)$ /index.html break;
            }
        }
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
            expires 1M;
            access_log off;
            add_header 'Cache-Control' 'public';
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
        }
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }
        location ~ ^.+\..+$ {
            try_files $uri =404;
        }
    }
}

我仍然不确定如何使用 http-server 执行此操作，但这个解决方案足以满足我的需要。

【讨论】：