使用Nginx投放Angular2 CLI构建的应用程序会抛出404、403 [英] Serving an Angular2 CLI built app using Nginx throws 404, 403

问题描述

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

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.

这些是我遵循的步骤:

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

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

已使用ng-serve进行了检查，并且可以使用.

Checked using ng-serve and it works.

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

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

更改了我的Nginx配置:

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成功.按下localhost时，我得到404 Not Found.

nginx -s reload successful. On hitting localhost, I get a 404 Not Found.

根据一些建议，将其更改为try_files $uri /index.html会使我被禁止使用403.

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

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

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.

其他信息:

@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

推荐答案

可能存在一种可能性，这就是为什么您会收到404/403错误:

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

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

这是解决方案:

假设您要在HOST:http://example.com和PORT:8080部署角度应用程序 注意-您的主机和端口可能会有所不同.

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.

确保index.html头标记中包含<base href="/">.

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

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

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

1. 首先，在计算机上转到您的角度存储库(即/home/user/helloWorld).

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

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

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

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

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

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

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.

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

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.

    }

}

现在重新启动nginx.

Now restart nginx.

就是这样！现在，您可以访问 http://example.com:8080

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

希望这会有所帮助.

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