用于 Angular 7 的谷歌云应用程序 yaml答案

【问题标题】：Google cloud application yaml for angular 7用于 Angular 7 的谷歌云应用程序 yaml
【发布时间】：2019-05-17 05:01:38
【问题描述】：

我的项目目录是这样的

**demo**
 -->
   **ui**-->
     **dist**-->
       **ui**-->
         *.html
         *.js files


In my app.yaml    

runtime: python27
api_version: 1
threadsafe: true`enter code here`
handlers:
- url: /
  static_files: dist/\1/index.html
  upload: dist/(.*)/(.*)

每当我部署我的应用程序并点击 URL 时，我都会看到 404 Failed to load 资源：服务器响应所有文件的状态为 404 () index.html 除外。

任何帮助如何进一步进行将不胜感激。

阅读堆栈溢出相关问题但没有运气

【问题讨论】：

标签： angular google-app-engine google-cloud-platform

【解决方案1】：

这是我的设置。您会注意到其他答案存在一些细微差别。这些细微差别使我能够部署我的应用程序。而且部署文件要简单得多。

它适用于 Angular 9 和当前版本的应用引擎（截至 2020 年 3 月）

首先，angular.json 文件设置目标构建目录如下：

"build": {
          ...
          "options": {
            "outputPath": "dist/my-awesome-app",
            ...

接下来，您必须在您的dist 目录中创建一个app.yaml。这是您的部署文件。注意，因为dist 没有被 git 跟踪。因此，在部署之前，您要么必须摆弄 .gitignore 文件，要么将 app.yaml 文件复制到 dist 中。（我选择了前者）。

您的项目应如下所示：

> my-awesom-app
|  > dist
|  |  > my-awesome-app
|  |  $ app.yaml

与app.yaml 和dist/my-awesome-app 处于同一级别。

接下来您的app.yaml 文件应如下所示

runtime: nodejs12

handlers:
- url: /
  static_files: my-awesome-app/index.html
  upload: my-awesome-app/index.html

- url: /
  static_dir: my-awesome-app

【讨论】：

【解决方案2】：

在这里我分享我使用的方法。

app.yaml 应该是这样的：

runtime: python27
threadsafe: true
api_version: 1

handlers:
- url: /(.+\.js)
  static_files: app/\1
  upload: app/(.+\.js)

- url: /(.+\.css)
  static_files: app/\1
  upload: app/(.+\.css)

- url: /(.+\.png)
  static_files: app/\1
  upload: app/(.+\.png)

- url: /(.+\.jpg)
  static_files: app/\1
  upload: app/(.+\.jpg)

- url: /(.+\.svg)
  static_files: app/\1
  upload: app/(.+\.svg)

- url: /favicon.ico
  static_files: app/favicon.ico
  upload: app/favicon.ico

- url: /(.+\.json)
  static_files: app/\1
  upload: app/(.+\.json)

- url: /(.+)
  static_files: app/index.html
  upload: app/index.html

- url: /
  static_files: app/index.html
  upload: app/index.html

这些处理程序规则可以优化。在这里，我将它们以每种文件类型的详细形式保存。

deploy 文件夹的目录结构应如下所示：

/deploy
  app.yaml
  /app  =>  generated by ng build
    index.html
    ...bundles..js
    /assets
      ...

此默认服务将照常在https://YOUR_PROJECT_ID.appspot.com 提供。

也许这些链接可以帮助你：

My answer to an other question
Deploy Angular 2/4/6 App on Google App Engine by Anoop Sharma

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
@JL2210 你是对的，真的很抱歉。我用我之前回答的内容更新了我的回答。我们每天都在学习。 ;-)
真正适用于 Angular 7 的唯一答案。谢谢

【解决方案3】：

我收到 404 响应，因为在云 shell 控制台中我没有添加用于递归同步的命令 -r，是什么让它跳过了我的项目文件。对我有用的命令是：

gsutil -m  rsync -r gs://your-bucket ./your-directory-in-cloudshell

-m 是多线程同步的命令，可以加快进程。

在运行命令时注意your-directory-in-cloudshell 的相对路径以及运行它的位置。

将此解决方案与@avi.elkharrat 答案相结合使我的应用程序正常工作。

祝你好运！

【讨论】：

【解决方案4】：

为了补充@Thierry Falvo 的回答，我想建议，如果您打算上传所有资源，如图像、视频、字体等，请编写如下更通用的规则。

- url: /(.*\.(.+))$
  secure: always
  redirect_http_response_code: 301
  static_files: app/\1
  upload: app/(.*\.(.+))$

【讨论】：