使用 Nginx 为 Angular2 CLI 构建的应用程序提供服务会抛出 404、403

Posted 2023-03-10

【中文标题】使用 Nginx 为 Angular2 CLI 构建的应用程序提供服务会抛出 404、403

【英文标题】：Serving an Angular2 CLI built app using Nginx throws 404, 403

【发布时间】：2017-07-18 06:50:49

【问题描述】：

我使用 Angular-CLI 创建了一个测试应用程序并使用 nginx 提供它。得到了 404 或 403。我想这是我的 Nginx 配置的问题，但为了进一步确定，我已经提供了为达到这一点而执行的所有步骤。

这些是我遵循的步骤：

已安装 angular-cli:npm install -g @angular/cli

开始了一个新项目：ng new test-angular

使用ng-serve 进行检查，它可以工作。

使用 nginx 构建要服务的项目：ng build。在项目目录中创建一个dist 文件夹。

更改了我的 nginx 配置：

events  
    worker_connections 1024;


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

    server 
        listen 80 default_server;
        root /home/mellkor/test-angular/dist;
        index index.html index.htm;
        server_name localhost;
        location / 
            try_files $uri $uri/ =404;
        
     
 

nginx -s reload 成功。在点击 localhost 时，我得到一个 404 Not Found。

根据一些建议，更改为 try_files $uri /index.html 会给我一个 403 Forbidden。

另一个问题：由于ng init 似乎不再起作用，我如何初始化现有的 angular2 应用程序并使用 angular-cli 将其构建到生产环境中？

是的，我确实提到了 this 已关闭主题，但目前还没有解决方案。

其他信息：

@angular/cli: 1.0.0-rc.0
node: 7.5.0
os: linux x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8

【问题讨论】：

你能检查一下 dist/index.html 中 base href 的值是多少，寻找这样一行<base href="">？

<base href="/"> .. 可以吗？ @cpz

是的，看起来没问题。使用上述信息很难将问题归零。您能否确保 nginx 对文件夹 askubuntu.com/questions/9402/… 具有正确的权限？

我所有的文件夹内容都有-rwxr-xr-x .. 好吧，也许这是个愚蠢的问题.. 作为超级用户进程运行 nginx 会导致任何问题吗？

默认的 nginx conf 指向我的/usr/share/nginx/html 中的一个 HTML 文件。它已经工作了。所以我将整个构建复制到该文件夹​​，它也可以正常工作。在我chown'd 到 root:root 之后。我在我的家庭目录中做了同样的事情，但失败了。仅供参考..非常感谢@cpz

【参考方案1】：

可能存在一种可能性，这就是您收到错误 404/403 的原因：

index.html 头标记中的基本 href 错误 ng build 命令时 --base-href 值错误 错误的 nginx 配置（即服务器根目录或服务器位置 /） 对 Nginx 必须提供的文件（即 /dist 文件夹）的权限错误

解决办法如下：

假设您想在 HOST：http://example.com 和 PORT：8080 部署您的 Angular 应用 注意 - HOST 和 PORT 在您的情况下可能会有所不同。

确保您的 index.html 头部标签中有 <base href="/">。

此外，请检查您是否拥有对 Nginx 必须提供的 /dist 文件的正确权限。这是help。

首先，转到您机器上的 Angular 存储库（即 /home/user/helloWorld）路径。

然后使用以下命令为您的生产服务器构建 /dist：

ng build --prod --base-href http://example.com:8080

现在将 /dist（即 /home/user/helloWorld/dist）文件夹从您计算机的 Angular 存储库复制到您要托管生产服务器的远程计算机。

现在登录到您的远程服务器并添加以下 nginx 服务器配置。

server 

    listen 8080;

    server_name http://example.com;

    root /path/to/your/dist/location;

    # eg. root /home/admin/helloWorld/dist

    index index.html index.htm;

    location / 

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    

现在重启 nginx。

就是这样！现在您可以通过http://example.com:8080

访问您的 Angular 应用

希望对您有所帮助。

【讨论】：

谢谢@viks 问题在于 Nginx 必须提供的文件的权限。我改变了它，它工作得很好。您可能可以将其添加到解决方案中，我可以接受答案:)

感谢@Mellkor 分享您的发现。我已经更新了解决方案。