使用 Nginx 为 Angular2 CLI 构建的应用程序提供服务抛出 404、403 [英] Serving an Angular2 CLI built app using Nginx throws 404, 403

问题描述

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

这些是我遵循的步骤:

1. 安装angular-cli:npm install -g @angular/cli

2. 开始了一个新项目:ng new test-angular

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

4. 使用 nginx 构建要提供服务的项目:ng build.在项目目录中创建一个 dist 文件夹.

5. 更改了我的 nginx 配置:

   事件{worker_connections 1024;}http {包括 mime.types;default_type 应用程序/八位字节流；服务器 {听 80 default_server;根/home/mellkor/test-angular/dist;index index.html index.htm;server_name 本地主机；地点/{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节点:7.5.0操作系统:Linux x64@angular/common:2.4.8@角度/编译器:2.4.8@角度/核心:2.4.8@角度/表格:2.4.8@角度/http:2.4.8@角度/平台浏览器:2.4.8@angular/platform-b​​rowser-dynamic: 2.4.8@角度/路由器:3.4.8@angular/cli: 1.0.0-rc.0@angular/compiler-cli: 2.4.8

解决方案

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

• index.html head 标签中的 base href 错误
• ng build 命令时错误的 --base-href 值
• 错误的 nginx 配置(即服务器根目录或服务器位置/)
• 对 Nginx 必须提供的文件(即/dist 文件夹)的错误权限

解决办法如下:

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

确保您的 index.html head 标签中有 .

此外，请检查您是否对 Nginx 必须提供的/dist 文件具有正确的权限.这是帮助.

1. 首先，转到您机器上的 angular 存储库(即/home/user/helloWorld)路径.

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

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

3. 现在将/dist(即/home/user/helloWorld/dist)文件夹从您机器的 angular 存储库复制到您要托管生产服务器的远程机器.

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

   服务器{听8080；server_name http://example.com;root/path/to/your/dist/location;# 例如.root/home/admin/helloWorld/distindex index.html index.htm;地点/{try_files $uri $uri//index.html;# 这将允许您在 angular 应用程序中刷新页面.这不会给出错误 404.}}

5. 现在重启nginx.

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

希望能帮到你.

I used Angular-CLI to create a test app and serve it using Nginx. Got either a 404 or a 403. I guess it is a problem with my Nginx config but just to be additionally sure, I have provided all the steps that I performed to get to this point.

These are the steps I followed:

1. Installed angular-cli: npm install -g @angular/cli

2. Started a new project: ng new test-angular

3. Checked using ng-serve and it works.

4. Built the project to be served using nginx: ng build. Creates a dist folder within the project directory.

5. Changed my nginx config:

   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 successful. On hitting localhost, I get a 404 Not Found.

Based on some suggestions, changing to try_files $uri /index.html gives me a 403 Forbidden.

Another question: since ng init doesn't seem to work anymore, how can I initialize an existing angular2 application and build it to production using angular-cli?

Yes I did refer this closed topic, but there is no solution there so far.

Additional Information:

@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

解决方案

There could be one of the possibility, that's why you are getting errors 404/403:

• Wrong base href in index.html head tag
• Wrong --base-href value while ng build command
• Wrong nginx configuration(i.e. server root OR server location /)
• Wrong rights to the files(i.e. /dist folder) that Nginx have to serve

Here is the solution:

Suppose you want to deploy your angular app at HOST: http://example.com and PORT: 8080 Note - HOST and PORT might be different in your case.

Make sure you have <base href="/"> in you index.html head tag.

Also, check that you have correct rights to /dist files which Nginx have to serve. Here is the help.

1. Firstly, go to your angular repo (i.e. /home/user/helloWorld) path at your machine.

2. Then build /dist for your production server using the following command:

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

3. Now copy /dist (i.e. /home/user/helloWorld/dist) folder from your machine's angular repo to the remote machine where you want to host your production server.

4. Now login to your remote server and add following nginx server configuration.

   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.
   
       }
   
   }
   

5. Now restart nginx.

6. That's it !! Now you can access your angular app at http://example.com:8080

Hope it will be helpful.

这篇关于使用 Nginx 为 Angular2 CLI 构建的应用程序提供服务抛出 404、403的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！