如何运行（多个）dockerized angular 应用程序内部有 nginx 和 nginx 作为反向代理？

Question

我有以下问题：我在 docker 中使用 nginx 构建了一个 angular 应用程序...像这样：

FROM node:slim as build
WORKDIR /usr/local/app
COPY ./ /usr/local/app/
RUN npm install
RUN npm run build

FROM nginx:latest
COPY --from=build /usr/local/app/dist/myapp /usr/share/nginx/html
EXPOSE 4200

当我现在构建运行本地 docker 文件时...没问题，我可以输入“localhost:4200”最终到达我的应用程序。在那之后，我设置 github 操作并将我的代码 vis ssh 复制到我的 vps 服务器。在这台服务器上，我有一个 nginx，它用作反向代理。我的 angular 应用程序的 nginx 配置如下所示：


server {
    listen 80;
    return 301 https://$host$request_uri;
}

server {

    listen 443;
    server_name mydomain.com;

    ssl_certificate         /etc/ssl/certs/mydomain.com/cert.pem;
    ssl_certificate_key     /etc/ssl/certs/mydomain.com/key.pem;

    ssl on;

    access_log            /var/log/nginx/access.log;

    location / {
      proxy_pass          http://0.0.0.0:4200;
    }
  }

我通过 cloudflare 创建了 ssl 证书，并将 tls 设置为严格模式。现在我想当我输入 mydomain.com -> 它进入我的 ubuntu 安装了 nginx 的服务器，检查证书，然后它重定向到 docker 容器，但是当我没有任何反应尝试访问我的站点，出现 502 Bad Gateway....

我也试过这个 nginx 配置（没有 cloudflare 和 ssl），但我也有一个 502

server {
    listen 80 http2; 
    server_name mydomain.com;
    location / {
        proxy_set_header Host $host;
        proxy_pass http://localhost:4200;
    }
}

你能帮帮我吗？我目前不明白为什么那行不通。

（我公开了端口 4200，运行 angular 应用程序是这样的： docker run -p 4200:4200 myapp 当我输入 netstat -tulpn 它总是说 docker 是运行ning 在端口 4200 下...但是当我在我的 linux 上卷曲时它说：(56) Recv failure: Connection reset by peer)

Answer 1

您必须将应用程序部署为静态站点。您不应该在 4200 端口的生产环境中使用 ng serve。

这样做

将应用程序构建为静态站点
将其复制到 NgInx 位置 /usr/share/nginx/html
更新 NgInx 以从 /usr/share/nginx/html

这是更新后的 NgInx 文件

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events 
{
     worker_connections 768;
     # multi_accept on;
}

http 
{
    upstream springboot
    {
        server localhost:8080  max_conns=10;
    }

    server
    {
        listen 80;
        listen [::]:80;
        server_name     <server ip>;

        location /
        {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Port $server_port;
        }

    }

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
}

如何运行（多个）dockerized angular 应用程序内部有 nginx 和 nginx 作为反向代理？

How to run (multiple) dockerized angular apps with nginx inside and nginx as reverse proxy?

reverse-proxy

nginx

docker

dockerfile

angular

如何 运行 （多个）dockerized angular 应用程序内部有 nginx 和 nginx 作为反向代理？

How to run (multiple) dockerized angular apps with nginx inside and nginx as reverse proxy?

reverse-proxy

nginx

docker

dockerfile

angular

如何运行（多个）dockerized angular 应用程序内部有 nginx 和 nginx 作为反向代理？