使用Angular Universal将应用程序部署在GKE上，并通过nginx进行公开

2 年 ago
逸, 科
2 minutes

(12/8に修正)
upstream でアプリケーションサーバーを指定すると、nginx のコンテナがエラーを吐くため。起動しないため。

(12/9に修正)
上記だけでは解消しないので、proxy_pass の指定を変数に。アプリケーションサーバーが起動するまえだと nginx が起動しない。

嗨?✨

这篇文章介绍了如何使用Angular v8.2.14中的Angular Universal来进行服务器端渲染，并在GKE上部署该应用程序的配置等内容。

这是一个通过 nginx 来展示 Angular 应用程序的配置。

在Nginx中可以很方便地进行从HTTP到HTTPS的重定向和gzip压缩等操作。

创建 Angular 的Docker容器

首先，使用npm run build:ssr来构建应用程序，然后使用下述的Dockerfile创建容器。

将在使用 Angular 构建时生成的 dist 目录放置在容器的 /app/angular-app/dist 目录下。

创建容器的命令类似于 docker build ./ -t angular-app –no-cache -f ./Dockerfile。

FROM node:10-alpine

ENV APP_HOME /app/angular-app
ENV APP_DIST /app/angular-app/dist
RUN mkdir -p $APP_HOME

WORKDIR $APP_HOME
COPY dist $APP_DIST

CMD ["node", "dist/server"]

创建一个nginx容器

我会准备如下所列的三个文件。

    • Dockerfile

 

    • nginx.conf

 

    default.conf

然后，通过以下命令创建容器：docker build ./ -t angular-app-nginx –no-cache。

请查看我写的关于在Kubernetes引擎上从HTTP重定向到HTTPS的文章，了解有关重定向到https的相关信息。

FROM nginx:mainline-alpine

COPY nginx.conf /etc/nginx/nginx.conf
COPY default.conf /etc/nginx/conf.d/default.conf

# これは不要(12/8修正)
# upstream angular {
#  server localhost:4000;
# }

server {
  listen 80;
  # server_name angular; 下記に修正(12/8)
  server_name example.com;

  set $redirect_to_https "";

  if ($http_x_forwarded_proto) {
    set $redirect_to_https A;
  }

  if ($http_x_forwarded_proto != https) {
    set $redirect_to_https "${redirect_to_https}B";
  }

  if ($redirect_to_https = AB) {
    return 301 https://$host$request_uri;
  }

  gzip on;
  gzip_types text/css application/javascript application/json application/font-woff application/font-tff image/gif image/png image/jpeg application/octet-stream image/svg+xml image/x-icon;
  gzip_proxied any;
  gzip_min_length 1000;
  gunzip on;

  location / {
    proxy_read_timeout 300;
    proxy_connect_timeout 300;
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # proxy_pass http://angular; 下記に修正(12/8)
    # proxy_pass http://localhost:4000; さらに修正(12/9)
    # APPサーバーが起動する前でも nginx が起動するように
    resolver 127.0.0.1;
    set $upstream 127.0.0.1:4000;
    proxy_pass http://$upstream;
  }
}

user nginx;
worker_processes 1;

error_log /var/log/nginx/error.log warn;
pid       /var/run/nginx.pid;

events {
  worker_connections 1024;
}

http {
  include      /etc/nginx/mime.types;
  default_type application/octet-stream;

  log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';

  access_log /var/log/nginx/access.log  main;

  sendfile on;
  keepalive_timeout 65;
  include /etc/nginx/conf.d/*.conf;
}

关于 GKE Deployment

# upstream angular {
#   server localhost:4000;
# }
proxy_pass http://localhost:4000

由于在nginx的配置文件中，使用localhost:4000的方式，所以将Angular应用程序和nginx容器在同一个Pod中运行。此类配置如下所示。

apiVersion: "extensions/v1beta1"
kind: "Deployment"
metadata:
  name: "angular-app"
  namespace: "default"
  labels:
    app: "angular-app"
spec:
  replicas: 1
  selector:
    matchLabels:
      app: "angular-app"
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 0
  minReadySeconds: 5
  template:
    metadata:
      labels:
        app: "angular-app"
    spec:
      containers:
      - name: "angular-app-nginx"
        image: "<IMAGE>"
        livenessProbe:
          httpGet:
            scheme: HTTP
            path: /
            port: 80
          initialDelaySeconds: 5
          periodSeconds: 10
      - name: "angular-app"
        image: "<IMAGE>"

结束了。

关于Angular Universal的推荐文章等。

Server-side Rendering (SSR): An intro to Angular Universal
公式ドキュメント。これを読めば大体動かせる?✨

SSR の知識ゼロから始める Angular Universal
大体動いたあとに、つまづくことがあったらこちらの記事を参考に。

bannerAds