docker - 无法访问使用 Nginx 服务 Dockerized VueJS 应用程序并导致 SSL 错误

Question

我尝试运行一个 Dockerized VueJS 应用程序。这是我的 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

CMD [ "http-server", "-p 5000", "dist" ]

我使用以下命令启动容器:

sudo docker run -it -p 5000:5000 vuejs

我的默认 nginx 文件有这个相关部分:

server {

    listen                443;
    server_name           data-mastery.com;

    ssl on;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;

    ssl_certificate /etc/letsencrypt/live/data-mastery.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/data-mastery.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


       location / {

        proxy_pass          https://127.0.0.1:5000;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 600s;

        proxy_redirect    off;
        proxy_set_header  Host             $http_host;
        proxy_set_header  X-Real-IP        $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header  X-Forwarded-Protocol $scheme;

    }
}

不幸的是，当我尝试访问时，我没有被重定向并尝试在我的端口( https://data-mastery.com:5000/)上访问它会导致错误:

ERR_SSL_PROTOCOL_ERROR

另一个在端口 8443 上运行的容器工作正常。这里有什么问题？

Answer 1

它按预期工作。您的 Vue 应用程序在 https://data-mastery.com 上可用(LE 证书)。并且5000端口被Keycloak占用(但只启用了http协议(protocol))-http://data-mastery.com:5000/ .