Angular SSR在docker NGINX中不工作

我在应用程序中添加了通用语言。

当我运行命令时:

npm run build:ssr
npm run serve:ssr

SSR渲染效果良好。

但当我在docker SSR中运行我的应用程序时,我在页面源代码中只能看到我的静态index.html。

这是我的服务器。ts:

import 'zone.js/dist/zone-node';

import {APP_BASE_HREF} from '@angular/common';
import {ngExpressEngine} from '@nguniversal/express-engine';
import * as express from 'express';
import {existsSync} from 'fs';
import {join} from 'path';

import {AppServerModule} from './src/main.server';
const compression = require('compression');

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/my-app-frontend/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  server.use(compression());

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run(): void {
  const port = process.env['PORT'] || 4200;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

这是我的 Dockerfile :

    FROM node:16.17.0-alpine3.16 AS node
    
    WORKDIR /frontend
    
    COPY package*.json ./
    
    RUN npm install
    
    COPY . .
    
    RUN npm run build:ssr

这是我的 docker-compose.yml :

version: '3'
    
...
    
  frontend:
    container_name: my-app-docker-frontend
    build: ./frontend
    restart: unless-stopped
    command: npm run serve:ssr
    networks:
      - my-app-docker-network

  nginx:
    image: nginx:stable
    container_name: my-app-docker-nginx
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./data/nginx:/etc/nginx/conf.d
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
    depends_on:
      - frontend
      - backend
    networks:
      - my-app-docker-network
    command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"


volumes:
  my-app-docker-db: { }

networks:
  my-app-docker-network:
    driver: bridge

这是我的 app.conf :

server {
  gzip on;
  gzip_static on;
  gzip_types      text/plain application/xml;
  gzip_proxied    no-cache no-store private expired auth;
  gzip_min_length 1000;

  listen 80;
  server_name mysite.com;
  server_tokens off;

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

    location /api {
      proxy_pass http://backend:8080;
      rewrite ^/api/(.*) /$1 break;
    }
}

我花了两天时间来解决这个问题,任何帮助都会有用的。

看起来你的帖子大部分都是代码;请添加更多详细信息。