时间戳

首页 > 解决方案 > Angular 8 到 GAE

angular - Angular 8 到 GAE

问题描述

我正在努力将我的网络应用程序部署到 App Engine。一般来说，我对 node.js / Javascript / web 的知识并不多，我只是使用 Angular 构建了一些简单的东西。非常感谢任何对好的教程/文章的建议或指示，这可能是我在这里遗漏的完全明显的东西。

当我运行时，该项目在本地运行良好ng serve --open，但我很难将其部署到 App Engine。我尝试过的事情：

1) 使用 Docker 的 App Engine 灵活运行时

步骤：验证，然后gcloud app deploy frontend.yaml。我的 frontend.yaml 文件：

runtime: custom
env: flex

service: frontend

manual_scaling:
  instances: 1

resources:
  cpu: 1
  memory_gb: 4
  disk_size_gb: 10

我的Dockerfile：

FROM node:10-alpine
WORKDIR /usr/src/app
COPY ./ .
RUN npm config set unsafe-perm true
RUN npm install -g @angular/cli .
ENV PATH="${PATH}:/usr/src/app"
ENV STAGE="int"
EXPOSE 8080
ENTRYPOINT ["ng serve"]

发生了什么：基本上什么都没有，Docker容器构建成功但没有部署

Updating service [frontend] (this may take several minutes)...failed.
ERROR: (gcloud.app.deploy) Error Response: [4] Your deployment has failed to become healthy in the allotted time and therefore was rolled back. If you believe this was an error, try adjusting the 'app_start_timeout_sec' setting in the 'readiness_check' section.

我注意到为什么这不起作用，你只能ng serve在本地设置一个网络服务器吗？

2) 使用ng build和生成的dist文件夹

从这里的示例：在 Google App Engine 上部署 Angular 2/4/6 App

当我使用启动 gcloud 交互式 shell 时，gcloud beta interactive我得到以下信息： gsutil rsync -r gs://angular-app-bucket ./angular-app-gcp /usr/bin/bash: line 248: gsutil: command not found

3) 安装附加工具

例如，请参阅此讨论：如何将 Angular 7 项目部署到 Google Cloud 不幸的是，这对我来说是不可能的。

非常感谢所有的意见和建议！

标签： angulardockergoogle-app-engine

解决方案

我对您的设置感到有些惊讶。你的 Docker 镜像的目的是什么？我没有看到任何指向 GAE 的链接。

并且ng serve不适合生产环境。事实上，一个高效的 Angular 应用程序由静态文件组成，几乎可以从任何 Web 服务器提供服务。（ng serve为了支持高效的软件开发而更加复杂。）

进行简单的设置：

  • 运行ng build --prod以构建应用程序的生产版本（在目录中dist）。
  • 部署到 GAE：gcloud app deploy app.yaml

以下app.yml是所有需要的。它假定您的应用程序被称为app. 它主要负责将所有 URL 重写为index.html. 它使用 Python 运行时，因为它体积小、可配置且足以为 Angular 应用程序提供服务。

runtime: python27
api_version: 1
threadsafe: yes
instance_class: f1

handlers:
  - url: /(.*\.[A-Za-z0-9]{1,4})$
    static_files: dist/app/\1
    upload: dist/app/(.*\.[A-Za-z0-9]{1,4})$
  - url: /(.*)$
    static_files: dist/app/index.html
    upload: dist/app/index.html

推荐阅读