Angular 5 个带有服务器渲染的应用 Angular App Engine 通用

Question

我是 node.js 和 angular 的新手，我有简单的 Angular 应用程序构建 Angular 5 和一些简单的路线。

我还想使用 Angular Universal 在我的应用程序中支持服务器端呈现，并将我的应用程序托管在 Google Cloud App Engine 上。

我试图在 App Engine 上上传 angular 通用的初学者工具包，但失败了。（https://github.com/gdi2290/angular-starter).I 已使用 docker 部署它。虽然部署成功，但它为 nginx 提供 502 Bad Gateway 错误。我已尝试清除缓存和网络上可用的所有其他建议。但结果仍然相同。

我也试过 Google 中的示例：https://codelabs.developers.google.com/codelabs/cloud-cardboard-viewer/index.html?index=..%2F..%2Findex 有效，但它是基本的。

请帮我创建一个 App Engine 可部署版本的代码 https://github.com/gdi2290/angular-starter。

Answer 1

在我进入任何细节之前，让我向您介绍我的 Angular 通用种子项目的 Github link Dockerfile 和 Sass。我用它作为我项目的起点。由于我是 Vagrant 的粉丝，您将在存储库中找到 Vagranfile 并使用它来创建完全相同的开发环境以及测试 Docker 容器。自述文件提供了有关如何使用该项目的所有详细信息。

这里是 link.

Angular 通用项目创建

Angular 通用设置步骤在官方文档中有详细说明here。

但是，我浪费了几个小时来找出以下几点

Webpack 3 不兼容 ts-loader 版本高于 3.5.0。在开发这个时，最新版本的 Angular CLI 是 1.7.2，它使用 Webpack 3.*。因此，在设置 Angular 通用，安装ts-config@3.5.0

Docker文件

我的 Dockerfile 如下所示。因此，如您所见，我使用 docker 功能多阶段构建首先在容器中构建项目，将分发复制到新容器并丢弃用于构建的旧容器。这允许 Google 云构建触发器构建源代码并从分发中创建 Docker 图像。

FROM node:8.10.0 AS ausbuilder
RUN useradd --create-home --shell /bin/bash aus; \
    chown -R aus /home/aus
USER aus
WORKDIR /home/aus
COPY aus/ /home/aus
RUN mkdir /home/aus/.npm; \
    npm config set prefix /home/aus/.npm; \
    npm install --quiet --no-progress -g webpack@3.11.0; \
    npm install --quiet --no-progress -g @angular/cli@1.7.2; \
    npm install --quiet --no-progress;
ENV PATH=/home/aus/.npm/bin:$PATH
RUN npm run build; \
    webpack --config webpack.server.config.js --no-progress

FROM keymetrics/pm2:8-alpine
RUN adduser -h /home/aus -s /bin/bash aus; \
    chown -R aus /home/aus
USER aus
WORKDIR /home/aus
COPY --from=ausbuilder /home/aus/dist /home/aus/dist
EXPOSE 4000/tcp
ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]

在 Google 云中的 Kubernetes 中部署

我们需要先在 Google Cloud 中创建一个构建触发器，这样一旦我们将代码推送到（比方说）master 分支中，就会触发代码构建和后续部署。您的代码可能托管在 Google 云源代码管理、Bitbucket 或 Github 中。您需要将源代码管理与构建 trigger.While 集成以创建构建触发器，如果您选择第一个选项，则可以选择 select Dockerfile 或 cloudbuild.yaml，您的代码将被构建，随后 Docker 图像将存储在 Google 容器存储库中。我选择第二个选项，因为它允许我做更多类似在 Kubernetes 中部署的事情。

这是我的 cloudbuild.yaml 的样子。

这里要注意几个要点：

在克隆存储库时我无法提供任何外部 URL。所以，这里发生的是当你创建一个构建触发器时，google 在 Google 域中创建另一个存储库，它基本上指向外部源代码控制，比如我的 Bitbucket。您可以在 Google 源代码管理部分找到它。
其次，我正在为容器镜像创建一个标签 latest，以便我可以在我命名为 kubedeployment.yaml 的 Kubernetes 部署描述符中引用它。 kubedeployment.yaml 在 cloudbuild.yaml 中被引用，如下所示

steps:
- name: gcr.io/cloud-builders/git
  args: ['clone', 'https://source.developers.google.com/p/aus2018/r/bitbucket-saptarshibasu-aus']
- name: 'gcr.io/cloud-builders/docker'
  args: ["build", "-t", "gcr.io/aus2018/aus:$REVISION_ID", "."]
- name: 'gcr.io/cloud-builders/docker'
  args: ["tag", "gcr.io/aus2018/aus:$REVISION_ID", "gcr.io/aus2018/aus:latest"]
- name: 'gcr.io/cloud-builders/docker'
  args: ["push", "gcr.io/aus2018/aus:$REVISION_ID"]
- name: 'gcr.io/cloud-builders/docker'
  args: ["push", "gcr.io/aus2018/aus:latest"]
- name: 'gcr.io/cloud-builders/kubectl'
  args:
  - 'create'
  - '-f'
  - 'kubedeployment.yaml'
  env:
  - 'CLOUDSDK_COMPUTE_ZONE=asia-south1-a'
  - 'CLOUDSDK_CONTAINER_CLUSTER=aus'

最后，kubedeployment.yaml 的外观如下：

apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: aus-deploy
spec:
  replicas: 1
  selector: 
    matchLabels: 
      app: aus
  template:
    metadata:
      labels:
        app: aus
    spec:
      containers:
        - name: aus
          image: gcr.io/aus2018/aus:latest
          ports:
            - containerPort: 4000
---
apiVersion: v1
kind: Service
metadata:
  name: aus-svc
  labels: 
    app: aus
spec:
  type: NodePort
  selector:
    app: aus
  ports:
  - protocol: TCP
    port: 80
    targetPort: 4000
---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: aus-ing
spec:
  backend:
    serviceName: aus-svc
    servicePort: 80

几分钟后部署完成后，您将获得 Ingress URL。几分钟后，您的应用程序开始出现在 URL。

您肯定会对其进行自定义以满足您的需要。但是，我希望这可能会给您一个起点。

Angular 5 个带有服务器渲染的应用 Angular App Engine 通用

Angular 5 app with server rendering with Angular Universal on App Engine

google-app-engine

node.js

google-cloud-platform

angular-universal

angular