代码之家 › 专栏 › 技术社区 › Yogender Singh

Angular 5应用程序,服务器渲染,Angular Universal on app Engine

angular-universal google-cloud-platform google-app-engine angular node.js

Yogender Singh · 技术社区 · 6 年前

我是node的新手。js(&A);angular和我有一个简单的angular应用程序,用一些简单的路线构建angular 5。

我还想使用Angular Universal在我的应用程序中支持服务器端渲染,并将我的应用程序托管在谷歌云应用程序引擎上。

我尝试在App Engine上上传angular universal的启动工具包,但失败了。( https://github.com/gdi2290/angular-starter).I 使用docker部署了它。虽然部署成功,但它为nginx提供了502个坏网关错误。我已经尝试清除缓存和所有其他在网上可用的建议。但结果仍然相同。

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

请帮助我创建可部署应用引擎的代码版本 https://github.com/gdi2290/angular-starter 。

1 回复 | 直到 4 年前

Saptarshi Basu 6 年前

在我深入讨论任何细节之前,让我为您提供我的Angular Universal seed项目的Github链接 Dockerfile 还有Sass。我把它作为我项目的起点。既然我是流浪汉的粉丝,你会发现 Vagranfile 并使用它创建完全相同的开发环境以及测试Docker容器。自述文件提供了有关如何使用项目的所有详细信息。

这是 link 。

角度通用项目创建

详细介绍了角度通用设置步骤 here 在官方文件中。

然而,我浪费了几个小时来找出以下几点

Webpack 3与高于的ts加载程序版本不兼容 3.5.0。在开发时,Angular CLI的最新版本是1.7.2,它使用Webpack 3。*。因此,在设置角度通用,安装 ts-config@3.5.0

Dockerfile文件

我的 Dockerfile文件 如下所示。因此,如您所见,我使用docker特性多阶段构建首先在容器中构建项目,将分发内容复制到新容器中,并丢弃用于构建的旧容器。这允许Google Cloud build trigger构建源代码并从发行版创建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"]

在谷歌云中的Kubernetes部署

我们需要首先在谷歌云中创建一个构建触发器,这样一旦我们将代码推入(比方说)主分支,就会触发代码构建和后续部署。您的代码可能托管在Google云源代码管理、Bitbucket或Github中。您需要将源代码管理与构建触发器集成。创建构建触发器时,您可以选择 Dockerfile文件 或 cloudbuild.yaml ,如果选择第一个选项,则将生成代码,随后Docker图像将存储在Google容器存储库中。我选择第二个选项,因为它允许我更像在Kubernetes中进行部署。

下面是我的cloudbuild。亚马尔看起来像。

这里需要注意的几个要点:

克隆存储库时,我无法提供任何外部URL。所以,这里发生的事情是,当你创建一个构建触发器时,google在google域中创建了另一个存储库,它基本上指向外部源代码控制,比如我的例子中的Bitbucket。您可以在Google源代码管理部分找到这一点。
其次,我正在创建一个标记 latest 对于容器映像,我可以在Kubernetes部署描述符中引用它,我将其命名为 kubedeployment.yaml 。 kubedeployment公司。亚马尔 在中引用 cloudbuild。亚马尔 如下所示

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公司。亚马尔 外观:

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

几分钟后部署完成后,您将获得入口URL。几分钟后,你的应用程序开始出现在URL上。

您一定会根据自己的需要来定制它。然而,我希望,这可能会给你一个起点。