当我try 通过Nginx反向代理访问我停靠的ANGLING应用程序时,页面没有完全加载,因为没有找到所有包含的脚本(404).

当我在位于Localhost:4200的expose 的坞站端口上直接访问它时,它加载正常.

基本URL设置为<base href="/">

例如,有一个脚本:

<link rel="stylesheet" href="styles-AVJWFAVY.css" media="print" onload="this.media='all'">

example.com/styles-AVJWFAVY.css -> 404

localhost:4200/styles-AVJWFAVY.css -> OK

Nginx(反向代理)

server {
        listen 443 ssl;
        listen [::]:443 ssl;
        http2 on;

        server_name example.com;

        # SSL
        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
        ssl_trusted_certificate /etc/letsencrypt/live/example.com/chain.pem;

        location / {
                 proxy_pass http://localhost:4200;
        }
}

# HTTP redirect to HTTPS
server {
        listen 80;
        listen [::]:80;

        server_name .example.com;

        location / {
                return 301 https://example.com$request_uri;
        }
}

Dockerfile

FROM node:latest as build
WORKDIR /usr/local/app
COPY ./ /usr/local/app/
RUN npm install
RUN npm run build

FROM nginx:latest
COPY --from=build /usr/local/app/dist/app/browser /usr/share/nginx/html
COPY /nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 4200

nginx.conf(在坞站环境中)

server {
  listen 4200;
  listen [::]:4200;
  server_name localhost;

  root /usr/share/nginx/html;
  index index.html index.htm;

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

我从sudo docker run -d --name personal-website -p 4200:4200 personal-website开始停靠

推荐答案

Your main issue is the path from which these assets are being served versus how they are being requested.
From what you have described, accessing the Angular app directly through the Docker port works fine, which suggests that the problem lies in how requests are being forwarded by Nginx.

您已经设置了<base href="/">,这对于大多数设置都是正确的.这应该意味着所有assets资源 都是相对于域根请求的.try 在proxy_pass directive后面添加一个斜杠,以确保正确地附加了路径:

location / {
    proxy_pass http://localhost:4200/;
}

而且,为了正确处理静态assets资源 ,您可能希望设置为add some headers in the proxy configuration,以确保主机和协议被正确转发到Angular 应用程序:

location / {
    proxy_pass http://localhost: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;
    proxy_set_header X-Forwarded-Proto $scheme;
}

After making the changes to the Nginx reverse proxy configuration, make sure you reload Nginx to apply these changes (sudo nginx -s reload).
And verify there are no caching issues. Browsers sometimes cache the 404 responses. Try accessing the app in incognito mode or clearing your browser's cache.
Then check the Nginx access and error logs for any additional clues on why the assets might be failing to load.

Angular相关问答推荐

自动完成搜索过滤器不适用于Angular 中动态添加的输入字段

间歇性不正确的SSR重定向(server. ts级别的请求和响应不匹配)

有没有一种方法用timeout()操作符创建计数器,用于超时一个观察对象?

如何在HTMLTITLE属性中使用Angular 显示特殊字符?

Angular 和PrimeNg文件Uploader:渲染元件时如何显示选定文件的列表?

如何使用ANGLING HTTP.POST并将类型更改为键入的回复?

访问Angular 模板中的HTML元素属性

Angular 如何观察DOM元素属性的变化?

如何使用formBuilder.Group()从角形表单中删除选定的选项?

Angular 13 - 使用 PUT 时出现 400 错误(错误请求)

Angular 等待对话框未显示

如何更改 Angular material 按钮中的内部 RippleColor 和 UnboundedRipple 效果?

Angular 2 二传手与 ngOnChanges

如何修复 [Object: null prototype] { title: 'product' }

如何在插值中编写条件?

为什么 Angular2 routerLinkActive 将活动类设置为多个链接?

如何在angular material中使用输入类型文件

如何在 Angular 5 react式表单输入中使用管道

为什么 ngOnInit 被调用两次?

Angular 4.3 HttpClient:拦截响应