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

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

我在本官方文件中使用了这两个示例：

具有http服务器的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

控制台中没有任何有用的东西。docker在httpServer上记录应用程序时除外：

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

显然，Dockerfiles中的“暴露一切”并没有通过。

---

附言：我不需要现成的生产解决方案。所以我会选择最快的解决方案。

我在中找到了使用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;"]

docker compose：

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

答案似乎在于大卫·梅兹在评论中的建议。需要一种正确的方法来告诉服务器侦听特定端口

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服务器实现这一点，但这个解决方案足以满足我的需要。

您是否正在采取措施更改应用程序正在侦听的端口（例如，一个Nginx

listen

指令）？Docker内部端口号与我们有关系吗？嘿，David，Docker内部端口很重要，因为我在同一Docker compose中有多个前端应用程序。因此，不需要使用默认端口。对于http服务器，我假设除了Dockerfile之外，不需要其他任何东西？使用nginx。。。嗯，我尝试了10个教程，例如这家伙的解决方案，它似乎正是我需要的：nginx文件是：假设您有三个基于Express的组件，它们都在端口3000上侦听。在容器之间，您可以使用Docker网络连接到

app1:3000

，

后端：3000

，等等。在Docker外部，您可以将这些端口重新映射到不同的端口：对于

app1

set

3000:3000

，对于

后端
6969:3000
，等等。但是第二个
端口：
号需要匹配应用程序正在侦听的端口。更改Docker配置而不同时更改应用程序将导致此错误。设置
EXPOSE
几乎不起任何作用。