How to Deploy Angular 7 Project to Google Cloud

问题

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.

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

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

nebula@0.0.0 start /app ng serve

sh: 1: ng: not found

and I am dead in the water.

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

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

i.e.

ng new xxx cd xxx npm install ng serve

Then I see the default Heros screen in my browser.

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 app deploy

When this finishes I get the message

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

When I go to that url, I get:

Error: Server Error

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?

回答1:

After project is created publish your project on GitHub. On GitHub Apps you have to install Google Cloud Build now, because it needs access to your repositories. You also have to create a Google Cloud Project for your new application and enable Cloud Build and Cloud App Engine.

Please refer here for more details:- https://medium.com/felixklauke/angular-google-cloud-build-app-engine-5e7c2038bdad

回答2:

When deploying Ng7 application with PHP backend, I would rather advise you to use two different solutions:

Firebase Hosting optimized for SPAs with CDN to deploy the Ng app (change your environment.ts to direct it to the AE endpoints. You will build your application first using ng build and then deploy the artifacts, so there is even no need for the Angular tooling in the resulting package.
Use AppEngine to deploy your backend

回答3:

Looks like the suggestion to go to firebase was the most useable option.

I am a lot closer to where I want to be and I now see a lot of useful extras.

回答4:

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

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 includes all those files

来源：https://stackoverflow.com/questions/55984502/how-to-deploy-angular-7-project-to-google-cloud

标签

javascript

angular7

gcloud