导致升级启用SSR的Angular版本后Nginx出现502错误的原因是什么?

huangapple go评论67阅读模式
英文:

What is causing the 502 errors from Nginx after upgrading Angular version with SSR enabled?

问题

我最近将我的项目从Angular 14升级到15,并开始收到502错误。

该项目使用SSR和Nginx运行。

因此,我在本地运行以下命令:

npm run build:ssr

然后将服务器和浏览器文件夹移动到服务器上,并在服务器上使用以下配置在Docker中运行Nginx:

server {
    listen 443 ssl;
    gzip on;
    gzip_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied no-cache no-store private expired auth;
    gzip_min_length 1000;
    server_name ${NGINX_HOST};
    ssl_certificate /etc/letsencrypt/live/${NGINX_HOST}/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/${NGINX_HOST}/privkey.pem;

    location /api {
        proxy_pass http://core;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location / {
        alias /frontend/browser/;
        index index.html;
        try_files $uri  @universal;
    }

    location @universal {
        proxy_pass http://localhost:4000; 
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

使用Angular 14的构建结果仍然正常工作。

但如果我使用Angular 15的构建结果,我会从Nginx收到502错误(在连接到上游时出现connect()失败)。但API仍然正常工作。

奇怪的是,如果我使用Angular 14准备的服务器和浏览器文件夹启动Nginx,然后在不重启的情况下用Angular 15的文件夹替换它们,一切仍然正常工作(在我的浏览器中,我可以看到应用程序的新版本)。但在重新启动后,我又开始收到502错误。

我的Angular server.ts文件在升级过程中没有更改,但结果的main.js文件有很大的不同。

这种问题的根本原因是什么?

我尝试过更改端口(从4000到8000)的不同组合,甚至在Angular 14版本上也成功收到502错误。

我尝试在本地使用Angular 15运行npm run serve:ssr,一切正常(端口是4000)。

我检查了main.js运行日志并发现了一个错误:

SyntaxError: Unexpected token '.'

但如何调试,找出这个'.'为何是意外的呢?

英文:

I recently updgraded my project from Angular 14 to 15 and started receive 502 errors.

Project works with SSR and Nginx

So, I locally run

npm run build:ssr

receive server and browser dirs, move them on server and on server run nginx in docker with config

server {
    listen 443 ssl;
	gzip on;
    gzip_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied no-cache no-store private expired auth;
    gzip_min_length 1000;
    server_name ${NGINX_HOST};
    ssl_certificate /etc/letsencrypt/live/${NGINX_HOST}/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/${NGINX_HOST}/privkey.pem;
	
    location /api {
        proxy_pass http://core;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location / {
	    alias /frontend/browser/;
		index index.html;
		try_files $uri  @universal;
    }
	
	location @universal {
        #port defined in your server.js
        proxy_pass http://localhost:4000; 
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

    }
}

With build results from Angular 14 this still works perfect.

If I use build results of Angular 15, I'm receiving 502 errors from Nginx (connect() failed while connecting to upstream) if call /. Api still works well.

What is weird - if I start nginx with server and browser dirs prepared through Angular 14 and then without restarting, replace those dirs with Angular 15 folders, everything still works properly (and in my browser I can see the new version of the app). After restart, I start receiving 502 again.

My Angular server.ts file wasn't changed during the upgrade, but the result main.js files are quite different.

What can be the source of such a problem?

I tried to change ports (from 4000 to 8000) in different combinations, so managed to receive 502 error even on Angular 14 version.

Tried to run

npm run serve:ssr

with Angular 15 locally, everything works perfect (port is 4000)

Checked main.js run logs and found an error:

nginx    |     SyntaxError: Unexpected token '.'
nginx    |     at wrapSafe (internal/modules/cjs/loader.js:915:16)
nginx    |     at Module._compile (internal/modules/cjs/loader.js:963:27)
nginx    |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
nginx    |     at Module.load (internal/modules/cjs/loader.js:863:32)
nginx    |     at Function.Module._load (internal/modules/cjs/loader.js:708:14)
nginx    |     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
nginx    |     at internal/main/run_main_module.js:17:47

But how to debug, where this '.' is unexpected?

答案1

得分: 1

问题出在Node.js版本上。

Angular 15中的Server/main.js依赖于Node v16+。

而Angular 14中的Server/main.js可以使用Node v12。

出于某种原因,Dockerfile中的以下命令安装了Node 12和npm 7(基于FROM nginx:stable构建的Docker)。

在Dockerfile中添加以下两行命令解决了问题:

RUN npm install -g n && n latest
RUN npm install -g npm@latest
英文:

The problem was with node version.

Server/main.js in Angular 15 depends on node v16+.

Server/main.js in Angular 14 can work with node v12.

For some reason cmd

RUN apt-get update && apt-get upgrade -y && apt-get install npm -y

In my dockerfile installed node 12 and npm 7 (docker based on FROM nginx:stable).

Adding of two lines

RUN npm install -g n && n latest
RUN npm install -g npm@latest

in the Dockerfile resolved the problem.

huangapple
  • 本文由 发表于 2023年6月1日 20:01:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/76381645.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定