如何在nginx或apache httpd中构建angular 4应用程序?

时间:2017-08-04 14:33:53

标签: angular nginx angular-cli auth0

您好我正在尝试构建Angular 4应用程序,接下来的步骤如下 -

构建ng build

在我的amazon 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未找到。

app-problem

我尝试像ng build --base-href .一样构建,它在我的本地工作中没有用! Please help me how to build this one, please note that when I use ng服务。一切都很棒。但当我尝试部署到生产时,它给出了这个错误。我非常确定在构建应用程序时我正在做的事情。

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

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

  1. docker build -t ng-auth0-web-dev。
  2. docker run -d -p 8080:80 ng-auth0-web-dev
  3. 上面的docker文件有什么问题吗?

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

      

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

    确切错误:

    enter image description here

    auth0 callback settings

    更新 -

    我也试过像这样建筑 - ng build --base-href http://34.213.164.54/ng build --base-href http://34.213.164.54:80/,但同样的错误。

    所以问题是如何缩小到我如何构建Angular App

    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.`);
          }
        });
      }
    

1 个答案:

答案 0 :(得分:4)

Angular应用程序非常适合使用简单的静态HTML服务器。您不需要服务器端引擎来动态组合应用程序页面,因为Angular在客户端执行此操作。

如果应用程序使用Angular路由器,则必须将服务器配置为在被要求输入它没有的文件时返回应用程序的主机页面(index.html)。

假设在你的nginx服务器conf中添加一些这样的东西。 try_files $uri $uri/ /index.html;

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

谢谢你JB Nizet,它终于工作了。

server conf