时间戳

首页 > 解决方案 > 无法通过 nginx 容器从其容器中提供 Angular 应用程序

angular - 无法通过 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文件构建了角度应用程序

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-compose 文件

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 应用程序提供服务。我在这里错过了什么吗？我还检查了角度容器的日志，它说角度实时开发服务器正在监听 localhost:4200。当我访问主机（angular_test.dev）上的页面时，我得到 404。

标签： angulardockernginxdocker-composedockerfile

解决方案

这不是 Angular 在生产环境中的服务/托管方式， npm start 命令仅用于开发目的。角度构建过程输出一组静态文件，任何 Web 服务器都可以将这些文件用作静态站点，并进行一些小的调整……在此处阅读更多信息：https ://angular.io/guide/deployment

我对 nginx 或 docker tbh 并不太熟悉，也从未运行过这样的配置。但是，我对过去部署/配置的一般期望是 docker 运行构建命令，如

RUN ng build --prod

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

部署指南中的特定 nginx 配置在这里：

try_files $uri $uri/ /index.html;

推荐阅读