Question

我是node.js＆amp;的新手角度和我有简单的Angular应用程序构建Angular 5与一些简单的路由。

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

我尝试在App Engine上传一个角度通用入门套件，但它失败了。（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有效，但它是基本的。

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

Answer 1

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

这是link。

角度通用项目创建

Angular Universal设置步骤在官方文档中详细列出here。

但是，我有几个浪费时间来找出以下几点

Webpack 3与高于的ts-loader版本不兼容 3.5.0。在开发时，最新版本的Angular CLI是1.7.2，它使用Webpack 3. *。因此，在设置Angular时通用，安装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 Cloud源代码控制，Bitbucket或Github中。您需要将源代码控制与构建触发器集成。在创建构建触发器时，您可以选择Dockerfile或cloudbuild.yaml，如果您选择了第一个选项，您的代码将被构建并且随后Docker镜像将存储在Google Container Repository中。我选择了第二个选项，因为它允许我在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 app，在App Engine上使用Angular Universal进行服务器渲染

1 个答案: