无法通过nginx容器从其容器为angular应用程序提供服务

我在通过nginx显示基本角度页面时遇到问题。 我们有一个angular和一个nginx容器

这是nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

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

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;

    server {
        server_name angular_test.dev;

        proxy_cache_key $request_method$request_uri;
        proxy_cache_min_uses 1;
        proxy_cache_methods GET;
        proxy_cache_valid 200 1y;

        location /angular {
            proxy_pass https://angular:4200;
            rewrite ^/angular(.*)$ $1 break;
        }
        listen 80;
        listen 443 ssl;
        ssl_certificate /etc/letsencrypt/angular_test.dev.crt;
        ssl_certificate_key /etc/letsencrypt/angular_test.dev.key;      
    }
}

所以，我用docker文件构建了angular应用程序，如下所示

FROM node:10.16.0-alpine as node
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
#RUN npm install -g @angular/cli 
COPY . .
RUN npm install
CMD ["npm", "start"]

这是docker编写的文件

version: '3.1'

services:

  angular:
    container_name: angular
    restart: unless-stopped
    build: ./wanderkite
    expose:
      - 4200
    ports:
      - "4200:4200"
  nginx:
    image: nginx
    container_name: nginx
    #restart: unless-stopped
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/error.log:/etc/nginx/error_log.log
      - ./nginx/cache/:/etc/nginx/cache
      - ./certs/client:/etc/letsencrypt
    ports:
      - 80:80
      - 443:443

---

我也不能通过在浏览器中键入localhost:4200来访问angular。所以基本上我想要的是通过nginx在不同的容器上运行angular应用程序。我是不是遗漏了什么？我还检查了angular容器的日志，它说angular live development server正在本地主机4200上侦听。当我访问主机（angular_test.dev）上的页面时，我得到了404。

我是kubernetes人，所以我不确定docker compose文件的语法，但看起来您没有公开nginx容器的80和443端口。

我是kubernetes人，所以我不确定docker compose文件的语法，但看起来您没有公开nginx容器的80和443端口容器。

这不是在生产环境中提供/托管angular的方式，npm start命令仅用于开发目的。angular构建过程输出一组静态文件，任何web服务器都可以将这些文件用作静态站点，只需稍加调整。。。请在此处阅读更多信息：

---

我不太熟悉nginx或docker-tbh，也从未运行过这样的配置。但是，从过去的部署/配置来看，我的一般期望是docker像这样运行build命令

RUN ng build --prod

nginx只是配置为在端口80/443的所有（非404）请求上提供输出的index.html，而不是在docker容器内运行angular dev服务器，nginx指向dev服务器

《部署指南》中的具体nginx配置如下：

try_files $uri $uri/ /index.html;

---

这不是angular在生产环境中的服务/托管方式，NPMStart命令仅用于开发目的。angular构建过程输出一组静态文件，任何web服务器都可以将这些文件用作静态站点，只需稍加调整。。。请在此处阅读更多信息：

---

我不太熟悉nginx或docker-tbh，也从未运行过这样的配置。但是，从过去的部署/配置来看，我的一般期望是docker像这样运行build命令

RUN ng build --prod

nginx只是配置为在端口80/443的所有（非404）请求上提供输出的index.html，而不是在docker容器内运行angular dev服务器，nginx指向dev服务器

《部署指南》中的具体nginx配置如下：

try_files $uri $uri/ /index.html;

---

你为什么要这么做？这不是angular在生产环境中的服务/托管方式，NPMStart命令仅用于开发目的。angular构建过程输出一组静态文件，任何web服务器都可以将这些文件用作静态站点，只需稍加调整。。。在这里阅读更多：我看到了一些使用案例，其中nginx与angular应用程序位于同一个容器中。这是正确的配置吗？每个angular应用程序都有自己的服务器（apache/nginx），然后一个nginx容器实际上是一个反向代理？我对nginx或docker tbh不太熟悉。但是，我的期望是docker运行build命令，nginx只是配置为在端口80/443的所有请求上提供输出的index.html，而不是在docker容器内运行angular dev服务器，nginx指向dev服务器。请将此作为答案发布，以便我可以接受它？谢谢你很高兴我能帮忙。你为什么要这么做？这不是angular在生产环境中的服务/托管方式，NPMStart命令仅用于开发目的。angular构建过程输出一组静态文件，任何web服务器都可以将这些文件用作静态站点，只需稍加调整。。。在这里阅读更多：我看到了一些使用案例，其中nginx与angular应用程序位于同一个容器中。这是正确的配置吗？每个angular应用程序都有自己的服务器（apache/nginx），然后一个nginx容器实际上是一个反向代理？我对nginx或docker tbh不太熟悉。但是，我的期望是docker运行build命令，nginx只是配置为在端口80/443的所有请求上提供输出的index.html，而不是在docker容器内运行angular dev服务器，nginx指向dev服务器。请将此作为答案发布，以便我可以接受它？谢谢你很高兴我能帮上忙。事实上，他们已经被港口司令部曝光了。端口和expose之间的区别在于，端口也将向主机公开。Expose命令将只向其他docker容器公开端口，而不向主机公开端口。好的，尝试在nginx pod中执行exec，然后执行

curlhttps://angular:4200

并查看angular应用程序是否可从nginx容器访问。如果还没有安装curl，请安装它。实际上，它们是通过ports命令公开的。端口和expose之间的区别在于，端口也将向主机公开。Expose命令将只向其他docker容器公开端口，而不向主机公开端口。好的，尝试在nginx pod中执行exec，然后执行

curlhttps://angular:4200

并查看angular应用程序是否可从nginx容器访问。如果尚未安装，请安装curl。