[英]Angular 5 app with server rendering with Angular Universal on App Engine
I am newbie to node.js & angular and I have simple Angular app build Angular 5 with some simple routes.我是 node.js 和 angular 的新手,我有简单的 Angular 应用程序构建 Angular 5,有一些简单的路由。
I also want to support server side rendering in my app with Angular Universal and host my app on Google Cloud App Engine.我还希望使用 Angular Universal 在我的应用程序中支持服务器端渲染,并将我的应用程序托管在 Google Cloud App Engine 上。
I tried to upload a starter kit of angular universal on App Engine it fails.我尝试在 App Engine 上上传 angular Universal 的入门套件,但失败了。 ( https://github.com/gdi2290/angular-starter).I have deployed it using docker.
( https://github.com/gdi2290/angular-starter )。我已经使用 docker 部署了它。 Although deploy is successful but it gives 502 Bad Gateway error for nginx.
尽管部署成功,但它为 nginx 提供了 502 Bad Gateway 错误。 I have tried clearing cache and all other suggestion avaliable on net.
我已经尝试清除缓存和网络上可用的所有其他建议。 But still same result.
但结果还是一样。
I have also tried example from Google: https://codelabs.developers.google.com/codelabs/cloud-cardboard-viewer/index.html?index=..%2F..%2Findex worked but it is basic.我也试过谷歌的例子: https : //codelabs.developers.google.com/codelabs/cloud-cardboard-viewer/index.html?index= ..%2F..% 2Findex工作,但它是基本的。
Please help me create a App Engine deploy-able version of code https://github.com/gdi2290/angular-starter .请帮助我创建一个 App Engine 可部署版本的代码https://github.com/gdi2290/angular-starter 。
Before I go into any detail, let me give you the Github link of my Angular Universal seed project with Dockerfile
and Sass.在我进入任何细节之前,让我给你我的 Angular Universal 种子项目的 Github 链接和
Dockerfile
和 Sass。 I use it as a starting point for my projects.我用它作为我项目的起点。 Since I am a fan of Vagrant, you will find the
Vagranfile
in the repository and use it to create the exact same environment for development as well as testing the Docker container.由于我是 Vagrant 的粉丝,您将在存储库中找到
Vagranfile
并使用它来创建完全相同的开发环境以及测试 Docker 容器。 The Readme file provides all the details as to how to work with the project.自述文件提供了有关如何使用该项目的所有详细信息。
Angular Universal Project Creation Angular 通用项目创建
The Angular Universal setup steps are detailed here in the official documentation.该角通用设置步骤详细说明这里的官方文档。
However, I had a few wasted hours to find out the following point但是,我浪费了几个小时来找出以下几点
ts-config@3.5.0
ts-config@3.5.0
Dockerfile文件
My Dockerfile
looks like below.我的
Dockerfile
如下所示。 So, as you can see, I am using the docker feature multi stage build to first build the project in a container, copying the distribution to a new container and discarding the old container used for build.因此,如您所见,我使用 docker 功能多阶段构建首先在容器中构建项目,将分发复制到新容器并丢弃用于构建的旧容器。 This allows Google Cloud build trigger to build the source code and create the Docker image from the distribution.
这允许 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"]
Deployment in Kubernetes in Google Cloud在 Google Cloud 中的 Kubernetes 中部署
We need to first create a build trigger in Google Cloud, so that as soon as we push the code in (let's say) the master branch, the code build and subsequent deployment is triggered.我们需要首先在 Google Cloud 中创建一个构建触发器,这样一旦我们将代码推送到(假设)主分支中,代码构建和后续部署就会被触发。 Your code may be hosted in Google Cloud source control, Bitbucket or Github.
您的代码可能托管在 Google Cloud 源代码管理、Bitbucket 或 Github 中。 You need to integrate your source control with the build trigger.While creating the build trigger, you will have option to select either
Dockerfile
or cloudbuild.yaml
, if you chose the first option, your code will be built and subsequently the Docker image will be stored in the Google Container Repository.您需要将源代码控制与构建触发器集成。在创建构建触发器时,您可以选择
Dockerfile
或cloudbuild.yaml
,如果您选择第一个选项,您的代码将被构建,随后 Docker 镜像将被存储在 Google 容器存储库中。 I go for the second option as it allows me to do more like deployment in Kubernetes.我选择第二个选项,因为它允许我做更多的事情,比如在 Kubernetes 中进行部署。
Here is how my cloudbuild.yaml looks like.这是我的 cloudbuild.yaml 的样子。
A few important points to note here:这里有几个要点需要注意:
latest
for the container image so that I can refer it in the Kubernetes deployment descriptor which I named as kubedeployment.yaml
.latest
的标签,以便我可以在我命名为kubedeployment.yaml
的 Kubernetes 部署描述符中引用它。 kubedeployment.yaml
is referenced in the cloudbuild.yaml
as you can see below 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'
Finally, here is how the kubedeployment.yaml
looks:最后,
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
Once deployment is complete after a few minutes, you'll get the Ingress URL.几分钟后部署完成后,您将获得 Ingress URL。 And then after a few minutes you app starts showing up at the URL.
几分钟后,您的应用程序开始显示在 URL 中。
You are definitely going to customise this to fit your needs.您肯定会自定义它以满足您的需求。 However, I hope, this would probably give you a starting point.
但是,我希望,这可能会给您一个起点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.