Fatal编程技术网
  • angular/
  • 通过NGINX在Docker中提供Angular 10应用程序

通过NGINX在Docker中提供Angular 10应用程序

angular docker nginx

通过NGINX在Docker中提供Angular 10应用程序,angular,docker,nginx,Angular,Docker,Nginx,我试图在Docker中使用NGINX部署Angular 10 web应用程序，但我无法让它提供服务。通过谷歌搜索，我发现了很多稀疏的信息，但我提出了以下步骤： 通常在Docker外部为生产（--prod）构建Angular应用程序。结果将保存到项目的dist文件夹中，然后将其复制到容器中。我发现了其他在容器中使用多阶段构建的示例；但出于可伸缩性的目的，不鼓励这样做。无论如何，手动构建应用程序可以让我更容易地控制结果，所以对我来说，这是一条路要走 使用nginx:alpine提供Dockerfi

我试图在Docker中使用NGINX部署Angular 10 web应用程序，但我无法让它提供服务。通过谷歌搜索，我发现了很多稀疏的信息，但我提出了以下步骤：

  • 通常在Docker外部为生产（
    --prod
    ）构建Angular应用程序。结果将保存到项目的
    dist
    文件夹中，然后将其复制到容器中。我发现了其他在容器中使用多阶段构建的示例；但出于可伸缩性的目的，不鼓励这样做。无论如何，手动构建应用程序可以让我更容易地控制结果，所以对我来说，这是一条路要走

  • 使用
    nginx:alpine
    提供Dockerfile，我只需将自定义配置和已编译的应用程序复制到容器中，然后通过
    入口点将其作为可执行文件运行即可：
    • 这样，NGINX日志应该被重定向到控制台，从而显示在容器的终端中

  • 这里的肉在NGINX配置文件中。我对它了解不多，但从和的证据中，我想到了这个，它应该正确地考虑HTML5路由（
    nginx.conf
    ，保存在
    Dockerfile
    的同一文件夹中）：
    • （我也发现了这个，但出于Angular的目的，它的配置不太完整）

  • 构建图像（
    docker-build.-t myrepo/myapp:tag
    ）。执行此操作时，将无用内容发送到
    dist
    文件夹外需要花费大量时间。因此，根据“优化构建”的提示，我添加了一个.dockrignore，其中包含：
    • 这一次，构建速度要快得多。在这两种情况下，它都是成功建造的

    我现在可以直接运行容器（
    docker run-d-p 4200:80 myrepo/myapp:tag
    ），或者从docker编写脚本运行容器。在这两种情况下，我都需要将容器的端口80（NGINX）重定向到主机端口4200（通常的Angular app localhost端口）

    问题：我希望看到NGINX在
    localhost:4200
    上为我的应用提供服务。相反，我发现的只是默认的欢迎NGINX页面，告诉我NGINX服务器已成功安装并工作，但需要进一步配置

    我在日志中查找了一些内容，但mycontainer的docker日志没有显示任何内容

    我试图检查容器的文件系统，看看Angular应用程序是否在它的位置（
    usr/share/nginx/html
    ）。为此，我遵循了以下建议：对于alpine映像，没有bash，因此我使用
    docker export mycontainer>mydump.TAR将文件系统转储到一个TAR文件中。通过查看TAR的内容，我可以看到我的应用程序文件在那里：
    index.html
    、JS文件、资产等等
    
我在这里缺少什么来完成NGINX配置并获得应用服务
    
更新
    

    FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY dist/name_of_your_app/ /usr/share/nginx/html
EXPOSE 80


    
我按照@Derek的指示：删除
    .gitignore
    ，用建议的
    nginx.conf
    替换我的
    nginx.conf，重建应用程序，然后运行它。这次构建耗时约15分钟，并向Docker守护进程发送了1.134 GB的构建上下文
    
为了在我的测试机器上快速运行，我在Docker Hub中发布了该图像。整个项目都是开源的，因此，如果有人想在repo环境中诊断某个东西，那么二进制图像和它的源代码都有：
    

      

    • 图片：
      vedph2020/cadmus_web:1.0.5
      （
      1.0.4
      是我的nginx版本）。只需在那里使用
      docker compose.yml
      ，将标签
      1.0.5
      用于
      cadmus web
      服务。那里有一些后端的东西，但我确信它可以工作，因为我可以连接到它在localhost:60380/swagger的端点
      • 

    • repository：（真正的应用程序名是
      cadmus_web
      ；因此构建是
      docker构建。-t vedph2020/cadmus_web:1.0.5
      ）
      • 

    

    同时，我尝试创建一个空的虚拟Angular应用程序，并使用我原来的Dockerfile和nginx文件。令我惊讶的是，它奏效了。唯一的区别是虚拟Angular应用程序没有路由，而我的应用程序使用哈希定位策略。假设NGINX中存在一些与散列相关的配置问题，我尝试从访问我的配置，但运气不佳：相同的欢迎页面。
    我向您介绍了如何使用我的容器。。。我看到所有的都是一样的，但请删除.dockrignore。。。你不需要忽略src。。。等，当您仅复制dist文件时
    
重要
    

  • 运行ng build…时验证应用程序的名称。。。。去医院
文件夹并查看文件夹的名称，以验证它是否为我的应用程序
    • 
结构
    

    FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY dist/name_of_your_app/ /usr/share/nginx/html
EXPOSE 80


    
这需要在应用程序的根目录中
    

    src
dist
    name_of_your_app
        index.html //and the other files
e2e
node_modules
nginx.conf
Dockerfile

    
DOCKERFILE
    

    FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY dist/name_of_your_app/ /usr/share/nginx/html
EXPOSE 80


    
NGINX CONF
    

    user  nginx;
worker_processes  auto;

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;

    keepalive_timeout  65;

    server {
        listen       80;
        listen  [::]:80;
        server_name  localhost;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}


    
构建
    

    docker build -t my_app .

    
跑步
    

    docker run -d -p 4200:80 -t my_app

    

    就这些。。。也许是一些配置，标签。。。这是你的问题。告诉我这是否解决了您的问题。
    我想我已经找到了问题所在：通过查看文件系统转储，我注意到了
    default.conf
    文件；检查它的内容时，我看到在端口80上已经有一个
    localhost
    的位置。我认为这应该不是问题，因为我的
    nginx.conf
    文件没有导入（
    include
    指令）它；但它似乎仍然得到评估。至少，一旦我在Dockerfile中删除了它：
    

    FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
RUN rm /etc/nginx/conf.d/default.conf
WORKDIR /usr/share/nginx/html
COPY dist/apps/cadmus/ .
EXPOSE 80

    

    该应用程序现在按预期启动。希望这能帮助像我这样的新手，定义一个清晰的服务程序（我想无论如何我可以重新引入
    gzip
    指令，甚至
    .dockrignore
    ）…
    对于阿尔卑斯山的形象，阿尔卑斯山没有bash
    应该有
    /bin/sh
    ，这将让你完成同样的事情。您能检查一下
    /usr/share/nginx/html/index.html
    是否包含您的

    FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
RUN rm /etc/nginx/conf.d/default.conf
WORKDIR /usr/share/nginx/html
COPY dist/apps/cadmus/ .
EXPOSE 80