在App Engine上使用Angular Universal进行服务器渲染的Angular 5应用程序

2018-06-10 15:47:51

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

我还希望在Angular Universal的应用程序中支持服务器端渲染，并在Google Cloud App Engine上托管我的应用程序。

我试图在App Engine上传一个角度通用的入门工具包，但它失败了。（https://github.com/gdi2290/angular-starter）。我已经使用docker部署了它。尽管部署成功，但它为nginx提供了502错误的网关错误。我已经尝试清除缓存和所有其他建议在网络上可用。但结果仍然相同。

我也尝试了谷歌的例子：https://codelabs.developers.google.com/codelabs/cloud-cardboard-viewer/index.html?index=..%2F..%2Findex工作，但它是基本的。

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

在详细讨论之前，让我给你看看我的Angular Universal种子项目的Github链接与Dockerfile和Sass。我用它作为我的项目的起点。由于我是Vagrant的粉丝，因此您会在存储库中找到Vagranfile ，并使用它创建完全相同的开发环境以及测试Docker容器。自述文件提供了关于如何使用该项目的所有细节。

链接在这里。

有角度的通用项目创建

Angular Universal安装步骤在官方文档中详细介绍。

但是，我花了几个小时找出以下几点

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

Dockerfile

我的Dockerfile如下所示。因此，正如您所看到的，我正在使用Docker功能的多阶段构建，首先在容器中构建项目，将该分布复制到新的容器并丢弃用于构建的旧容器。这允许Google Cloud构建触发器构建源代码并从分发中创建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 Cloud中部署Kubernetes

我们需要先在Google Cloud中创建构建触发器，以便只要我们将代码推入（比方说）主分支，就会触发代码构建和后续部署。您的代码可能托管在Google云端源代码管理，Bitbucket或Github中。您需要将源代码管理与生成触发器集成。在创建生成触发器时，您可以选择Dockerfile或cloudbuild.yaml ，如果选择第一个选项，则将构建代码并随后生成Docker映像存储在Google Container Repository中。我选择第二种选择，因为它可以让我在Kubernetes中进行更多的部署。

这是我的cloudbuild.yaml的样子。

这里需要注意一些重要的问题：

在克隆存储库时，我无法提供任何外部URL。所以，这里发生的是当你创建一个构建触发器时，Google在Google域中创建另一个存储库，基本上指向外部源控件，比如我的情况下的Bitbucket。你可以在Google Source Control部分找到它。

其次，我为容器映像创建了一个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。然后在几分钟后，您的应用开始显示在网址上。

你一定要定制这个以适应你的需求。不过，我希望这可能会给你一个出发点。

链接地址: http://www.djcxy.com/p/31399.html

上一篇: Angular 5 app with server rendering with Angular Universal on App Engine

下一篇: How to implement angular server side rendering in laravel?