关于angular:使用nginx起环境踩坑

35次阅读

共计 1677 个字符,预计需要花费 5 分钟才能阅读完成。

前言:

本周是第一次应用 nginx 来起环境进行测试,在开始的时候不晓得我的项目中 nginx.conf 文件的作用,便还是像以前一样间接 ng s 起前台环境,同时起后盾环境。

一、不指明后盾拜访端口:

启前台和后盾环境后并未查看环境变量的更改,报错:

思考:前台端口不是 4200 吗,为何申请后盾的也变成 4200?

去查看了前台 environment 环境变量:

环境变量中没有指明后盾拜访地址和端口号!

全局搜寻 4200: 三个无关的文件


第一处为 readme 文件,能够排除它并不会起作用
第二处为前台源地址,与后盾申请无关

第三处在开始并不理解,就想着将 4200 改成后盾端口 8080 试试:
无反馈!

在认真看了该配置文件后开始纳闷:

server {
    listen 8005;

    server_name 127.0.0.1 localhost;
    # 限度上传文件大小,保障该值小于等于 nginx.conf -> http 中的 client_max_body_size 值
    client_max_body_size 20M;

    location / {
        proxy_pass http://127.0.0.1:4200;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /sockjs-node/ {
        proxy_pass http://127.0.0.1:4200/sockjs-node/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8081/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

难道和后盾申请端口无关的不是第三个吗?因为 location 为定位,猜想是将 /api/ 用如下的进行代替:http://127.0.0.1:8081/
那为啥前台向后盾拜访的是 4200 呢?

心浮气躁:

童稚的我居然把后盾端口改成了 4200:

接下来就出了一系列的问题:
1. 拜访 localhost:4200 首先让我登陆
2. 我登陆胜利或者点勾销都会再报 404
如下图


在后盾控制台中看到:

除此之外还有 No mapping for GET / 等等。。。。

当我间接通过 url 拜访 login,resetPassword 等办法都胜利,开始狐疑难道 spring Security 生效了?

除此之外也想了是不是本人前台的问题,去理解了前台的启动过程。反正就是自觉的找!

总之:做了很多无用功

问老师:

以后应用了 nginx,你须要改成 nginx 转发:转发配置都在 nginx.conf 文件:
此处就不介绍在启动 nginx 时本人的一些蛊惑操作了!

具体操作:

通过 include 形式,将我的项目中的 nginx.conf 文件增加到 /usr/local/etc/nginx/nginx.conf 文件中,如下图:

应用 nginx -t: 查看引入的配置是否失效, 查看是否有导入的 nginx.conf
胜利后应用 nginx -s reload:重新启动 nginx

此时咱们关上监听的端口 8005,便会首先关上前台端口:

总结:

nginx 此处的作用次要是反向代理:
如下图,当咱们拜访 127.0.0.1:8005/ 或者 localhost:8005/,则定位到 http://127.0.0.1:4200,也就是咱们的前台地址。
将监听咱们设置的地址,当发动申请时,匹配特定的规定。最初再将申请的后果返回给咱们监听的地址。

版权申明

本文作者:河北工业大学梦云智开发团队 – 郝泽龙

正文完
 0