如何在 nginx 或 apache httpd 中构建 Angular 4 应用程序？

Posted 2023-03-08

【中文标题】如何在 nginx 或 apache httpd 中构建 Angular 4 应用程序？

【英文标题】：How to build angular 4 apps in nginx or apache httpd?

【发布时间】：2018-01-12 13:12:46

【问题描述】：

您好，我正在尝试构建 Angular 4 应用程序，以下步骤如下 -

构建ng build

在我的亚马逊 ec2 实例中，我正在运行 apache。后续步骤 -

#!/bin/bash
yum install httpd -y
yum update -y
cp dist/* /var/www/html/
service httpd start
chkconfig httpd on

一切正常，但我的应用程序使用 auth0 进行身份验证，我看到他们确实回调到 http://ip/callback

我的应用程序显示 - 404 Not found.

我尝试像ng build --base-href . 一样构建，但在我的本地没有工作! Please help me how to build this one, please note that when I useng serve` 一切都很棒。但是当我尝试部署到生产环境时，它会出现这个错误。我很确定我在构建应用程序时做错了什么。

我试过nginx docker 容器，它给出了同样的错误。我的 docker 文件看起来像这样。

FROM nginx COPY dist /usr/share/nginx/html

docker build -t ng-auth0-web-dev . docker run -d -p 8080:80 ng-auth0-web-dev

上面的 docker 文件有什么问题吗？

https://github.com/auth0-samples/auth0-angular-samples/tree/master/01-Login - 示例应用代码

https://manage.auth0.com/#/logs - 日志中没有错误，这意味着 auth0 工作正常，但我遇到了 Angular 的构建错误。

确切的错误：

更新 -

我也尝试过这样构建 - ng build --base-href http://34.213.164.54/ 和ng build --base-href http://34.213.164.54:80/，但同样的错误。

所以问题缩小到我如何构建 Angular 应用程序

public handleAuthentication(): void 
    this.auth0.parseHash((err, authResult) => 
      if (authResult && authResult.accessToken && authResult.idToken) 
        window.location.hash = '';
        this.setSession(authResult);
          localStorage.setItem('email', profile.email);
          this.verticofactoryService.registerUser(u);
          this.router.navigate(['/home']);
        );



       else if (err) 
        this.router.navigate(['/home']);
        console.log(err);
        alert(`Error: $err.error. Check the console for further details.`);
      
    );
  

【问题讨论】：

您为什么期望 /callback 的请求会提供除 404 以外的任何内容？您是否已将 Apache 配置为为该 URL 提供任何服务？

是的，我要求 /callback 将验证用户。我没有在apache中配置任何东西。我完全按照上述步骤操作。可以举个例子吗？

举个例子？当 /callback 的请求到达您的服务器时应该发生什么？

你不明白。如果您没有将服务器配置为为 url /callback 提供服务，那么它将不会为该 URL 提供任何服务。您的服务器只有一堆或静态文件（如 index.html）。除非您对其进行配置，否则它不会提供除这些静态文件之外的任何内容。阅读angular.io/guide/deployment#server-configuration

知道了，谢谢。我不确定您是否使用了该示例。

【参考方案1】：

Angular 应用程序非常适合使用简单的静态 HTML 服务器进行服务。您不需要服务器端引擎来动态组合应用程序页面，因为 Angular 是在客户端完成的。

如果应用程序使用 Angular 路由器，您必须将服务器配置为在请求提供它没有的文件时返回应用程序的主机页面 (index.html)。

假设在你的 nginx 服务器配置文件中添加一些类似这样的东西。 try_files $uri $uri/ /index.html;

参考 - https://github.com/auth0-samples/auth0-angular-samples/tree/master/02-User-Profile

感谢 JB Nizet，终于成功了。