时间戳

首页 > 解决方案 > 使用 nginx 的 Angular 2 部署

nginx - 使用 nginx 的 Angular 2 部署

问题描述

以下是我使用 Nginx 在本地部署 Angular2 应用程序所遵循的步骤：

- 在我机器的某个地方下载并解压 Nginx。

- 使用 ng build 命令 ng build --prod 为生产构建我的 Angular 应用程序

-打开../nginx-1.13.8/conf/nginx.conf，添加如下脚本：

worker_processes  1;

events {
    worker_connections  1024;
}

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

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       9090;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        location /device-listing/ {
            proxy_pass https://apim.azure-api.net/devicelisting/device-listing; 
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

- 导航到 ../nginx-1.13.8/html，并在其中复制所有从 app/dist 文件夹生成的文件。

- 双击 ../nginx-1.13.8/nginx.exe 运行 Nginx 服务器。

- 使用浏览器打开 localhost:9090，我的 Angular 应用程序已启动并正在运行。

但是当我点击导航链接时，它给了我 405 Not Allowed 错误！！！！！！基本上它不会在单击导航链接时重定向到 api 调用

网络详情：

请建议我还需要做什么配置？

标签： nginxangular2-forms

解决方案

看起来您错误地POST访问了无效的 URL，而不是您的预期 IP 地址。

您的帖子请求转到http://localhost:9090/null，您是否打算改为转到http://localhost:9090/device-listing？

如果您的 API 仍然无法工作，这可能是原因：

proxy_pass会将整个路径传递给代理。因此，当有人访问/device-listing/您的 Web 服务器时，他们的请求将被传递给：

https://apim.azure-api.net/devicelisting/device-listing/device-listing

注意device-listing重复两次。

如果我不得不猜测，那不是您后端的有效 API 方法，因此您的 API 返回 405 Not Allowed。

proxy_pass将您的指令更改为https://apim.azure-api.net/devicelisting/应该使其按预期工作。

推荐阅读