英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论