如何将 Angular 7 项目部署到 Google Cloud [英] How to Deploy Angular 7 Project to Google Cloud

问题描述

我构建了一个 Angular 7 应用程序，当我从本地 mac 或远程 centos 服务器执行 ng serve 命令时，该应用程序运行良好.

I have built an Angular 7 application that works nicely when I do the ng serve command from my local mac or from a remote centos server.

此应用程序正在使用 php 文件访问 MySQL 数据库，这些文件都在我的谷歌云上提供服务.

This application is using php files that access MySQL data base both served on my google cloud.

现在在执行 gcloud app deploy 后，我在屏幕上看到的最后一件事是消息:

Now after doing the gcloud app deploy the last thing I see on the screen is the message:

nebula@0.0.0 start/appng服务

nebula@0.0.0 start /app ng serve

sh: 1: ng: 未找到

sh: 1: ng: not found

我已经死在水里了.

我尝试了很多不同版本的 app.yaml 和 cloudbuild.yaml 文件，我觉得我什么都没学到.

I have tried so many different versions of app.yaml and cloudbuild.yaml file that I feel like i have not learned anything.

我从非常基本的Hero's"应用开始尝试了同样的事情，但遇到了同样的问题.

I have tried the same thing by starting with the very basic "Hero's" app and get the same issue.

即

ng 新 xxxcd xxx安装ng服务

ng new xxx cd xxx npm install ng serve

然后我会在浏览器中看到默认的英雄屏幕.

Then I see the default Heros screen in my browser.

然后我创建这个 app.yaml 文件

I then create this app.yaml file

runtime: nodejs
env: flex

manual_scaling:
  instances: 1
resources:
  cpu: 1
  memory_gb: 0.5
  disk_size_gb: 10


service: 
  xxx

然后我尝试使用以下方法进行部署:

I then try to deploy using:

gcloud 应用部署

gcloud app deploy

完成后我收到消息

将服务 [xxx] 部署到 [https://xxx-dot-project.appspot.com]

Deployed service [xxx] to [https://xxx-dot-project.appspot.com]

当我去那个网址时，我得到:

When I go to that url, I get:

错误:服务器错误

服务器遇到错误，无法完成您的请求.请在 30 秒后重试.

The server encountered an error and could not complete your request. Please try again in 30 seconds.

这次运行的日志文件是:

The log file for this run is:

    gcloud app logs tail -s xxx
    Waiting for new log entries...
    2019-05-04 15:27:35 xxx[20190504t102436]  "GET / HTTP/1.1" 404
    2019-05-04 15:27:35 xxx[20190504t102436]  "GET /favicon.ico HTTP/1.1" 404
    2019-05-04 15:28:56 xxx[20190504t102436]  "GET / HTTP/1.1" 404
    2019-05-04 15:32:45 xxx[prod]  "GET / HTTP/1.1" 404
    2019-05-04 15:32:50 xxx[prod]  "GET / HTTP/1.1" 404
    2019-05-04 15:33:06 xxx[prod]  "GET / HTTP/1.1" 404
    2019-05-04 15:33:10 xxx[prod]  "GET /run HTTP/1.1" 404
    2019-05-04 15:33:10 xxx[prod]  "GET /favicon.ico HTTP/1.1" 404
    2019-05-04 15:33:16 xxx[prod]  "GET /run HTTP/1.1" 404
    2019-05-04 15:33:16 xxx[prod]  "GET / HTTP/1.1" 404
    2019-05-04 15:33:19 xxx[prod]  "GET /login HTTP/1.1" 404
    2019-05-04 15:33:19 xxx[prod]  "GET /favicon.ico HTTP/1.1" 404
    2019-05-04 15:40:43 xxx[prod]  "GET /login HTTP/1.1" 404
    2019-05-04 15:40:46 xxx[prod]  "GET /login HTTP/1.1" 404
    2019-05-04 15:40:50 xxx[prod]  "GET /login HTTP/1.1" 404
    2019-05-04 15:40:50 xxx[prod]  "GET / HTTP/1.1" 404
    2019-05-04 15:40:53 xxx[prod]  "GET / HTTP/1.1" 404
    2019-05-04 16:01:50 xxx[20190504t105955]  "GET / HTTP/1.1" 500
    2019-05-04 16:01:51 xxx[20190504t105955]  /bin/sh: 1: ng: not found
    2019-05-04 16:06:19 xxx[20190504t105955]  "GET / HTTP/1.1" 500
    2019-05-04 16:06:20 xxx[20190504t105955]  /bin/sh: 1: ng: not found

我的问题是有人可以提供一个应用程序在谷歌云中运行的过程的简单示例吗?

My question is can someone provide a trivial example of this process where the application runs in the google cloud?

推荐答案

您可以使用 app.yaml 类似这样:

You can deploy a SPA (like Angular) with an app.yaml similar to this:

runtime: nodejs10
env_variables:
  NODE_ENV: production
handlers:
  - url: /
    static_files: dist/my-project/index.html
    upload: dist/my-project/index.html

  - url: /
    static_dir: dist/my-project

您需要事先使用 ng build --prod 在本地构建您的 angular 项目，否则您需要在 package.json 上设置一个 predeploy 命令，它将被 gcloud app deploy 调用(例如 predeploy": "npm run lint && npm run build -- --prod --aot").另外重要的是，您需要确保使用 .gcloudignore 文件忽略 dist 文件夹之外的所有文件.这将阻止谷歌云上传这些文件.

You'd need to build locally your angular project beforehand with a ng build --prod, otherwise you need to set a predeploy command on your package.json, which will be called by gcloud app deploy (e.g. predeploy": "npm run lint && npm run build -- --prod --aot"). Also important, you need to make sure you ignore all files outside of dist folder with .gcloudignore file. This will prevent google cloud to upload those files.

# This file specifies files that are *not* uploaded to Google Cloud Platform
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore

# Node.js dependencies:
node_modules/
webpack.config.js
src/
tsconfig.json
readme.md
ssl/
tslint.json
LICENSE
.editorconfig
.dockerignore
.gitignore

https://github.com/mrdulin/angular-apollo-starter包括所有这些文件

这篇关于如何将 Angular 7 项目部署到 Google Cloud的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！