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 ac

Solution 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

Solution 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

Solution 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.

Solution 4:

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

runtime:nodejs10env_variables:NODE_ENV:productionhandlers:-url:/static_files:dist/my-project/index.htmlupload: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