在 nginx（Windows 版本）上部署 Angular 17 SSR 的步骤是什么？

Question

我已经构建了一个带有默认 Angular 17 SSR 的示例项目。项目的 dist 文件夹中有两个文件夹（浏览器和服务器）。我不知道SSR模式应该使用哪一个。 请指导我完成部署 Angular 17 SSR 所需的步骤？

Answer 1

我知道这是一个迟到的答案，但也很难弄清楚这一点

假设您正在 Digital Ocean、Amazon EC2 或任何等效环境上部署

另外假设您将使用 Docker，那么这是必需的步骤（使用 Nginx 将 Angular 17 SSR 应用程序部署到生产环境）

我知道您可能需要针对 Windows 的不同指令，但是使用这些 docker 脚本，您几乎可以在任何服务器上运行它

docker-compose-prod.yml：

version: "3.4"

services:
  angular:
    restart: unless-stopped
    build:
      context: .
      dockerfile: docker/angular.dockerfile
    ports:
      - '4000:4000'
    environment:
      - PORT=4000
    networks:
      - backend
    logging:
      options:
        max-size: "88m" // Pick whatever you want
        max-file: "4" // Pick whatever you want
  nginx:
    restart: unless-stopped
    build:
      context: .
      dockerfile: docker/nginx-prod.dockerfile
    ports:
      - '80:80'
      - '443:443' // If you have SSL
    networks: 
      - backend
    depends_on:
      - angular
    volumes: // Just link to your SSL file
      - /data/ssl:/ssl 
    logging:
      options:
        max-size: "88m" // Pick whatever you want
        max-file: "4" // Pick whatever you want

networks:
  backend:
    driver: bridge

然后是 docker/angular.dockerfile

FROM node:20.12.2 // Choose your version
MAINTAINER YOUR_APP_NAME

RUN mkdir /usr/src/app
WORKDIR /usr/src/app

COPY package*.json /usr/src/app/
RUN npm install
RUN npm install -g @angular/[email protected]

COPY ./ /usr/src/app

EXPOSE 4000

RUN npm run build
CMD [ "npm", "run", "serve:ssr:YOUR_APP_NAME" ]

然后 docker/nginx-prod.dockerfile

# nginx
FROM nginx
MAINTAINER YOUR_APP_NAME

COPY nginx/production-ssl.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

尝试设置您自己的配置或也使用它

nginx/生产-ssl.conf

upstream docker-angular {
  server angular:4000;
}

server {
  listen 80;
  listen [::]:80;
  server_name your-domain.com;
  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl;

  ssl_certificate /ssl/YOUR_CERT.crt;
  ssl_certificate_key /ssl/YOUR_CERT.key;

  server_name your-domain.com;

  location / {
    proxy_pass http://docker-angular;

    # All below are optional!
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    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;
    proxy_cache_bypass $http_upgrade;
  }
}