Google App Engine is a web framework and cloud computing platform. App Engine enables developers to stay more productive and agile. So in the tutorial, we show you how to deploy Angular 4/6/7 Application on Google App Engine – Google Cloud Platform.
Related posts:
– Angular 6 dynamic Navigation Bar – add/remove Route dynamically
Technologies
– Google Cloud Platform
– Angular
Goal
– We deploy Angular Application on Google App Engine:
Practice
Create Google App Engine & Storage
– Use your Google account -> Go to the Google Cloud Console then Login with your Google account. Create a Google App Engine gcp-angular-app:
– On Search box, search Storage, and create a bucket-angular-app bucket.
Now the cloud is almost setup
Build Angular Application
* Get the sourcecode here!
Build Angular application with production mode:
ng build --prod --output-path angularapp
-> Results:
Create Config file
We create a config file app.yaml that will be used by Google Cloud App Engine to deploy the project:
runtime: python27 api_version: 1 threadsafe: true handlers: - url: / static_files: angularapp/index.html upload: angularapp/index.html - url: / static_dir: angularapp
Upload Angular build & Config files
– Go to the bucket bucket-angular-app, then select the Upload Files & Upload Folder to upload
app.yaml & build angularapp folder to the cloud bucket.
Deployment
– Open the in-browser terminal window Google Cloud Interactive Shell.
– Create a folder: ozenero-angular-app by mkdir cmd.
– Sync the data from the bucket bucket-angular-app into this directory ozenero-angular-app by cmd:
$gsutil rsync -r gs://bucket-angular-app ./ozenero-angular-app
-> Details:
javasampleapproach@cloudshell:~ (gcp-angular-app)$ gsutil rsync -r gs://bucket-angular-app ./ozenero-angular-app Building synchronization state... Starting synchronization... Copying gs://bucket-angular-app/angularapp/3rdpartylicenses.txt... Copying gs://bucket-angular-app/angularapp/favicon.ico... Copying gs://bucket-angular-app/angularapp/index.html... Copying gs://bucket-angular-app/angularapp/main.5ff5b18e98ffe2324713.js... - [4 files][273.5 KiB/273.5 KiB] ==> NOTE: You are performing a sequence of gsutil operations that may run significantly faster if you instead use gsutil -m -o ... Please see the -m section under "gsutil help options" for further information about when gsutil -m can be advantageous. Copying gs://bucket-angular-app/angularapp/polyfills.2f4a59095805af02bd79.js... Copying gs://bucket-angular-app/angularapp/runtime.a66f828dca56eeb90e02.js... Copying gs://bucket-angular-app/angularapp/styles.34c57ab7888ec1573f9c.css... Copying gs://bucket-angular-app/app.yaml... / [8 files][332.9 KiB/332.9 KiB] Operation completed over 8 objects/332.9 KiB.
– Deploy the angular application using the following command:
$gcloud app deploy
-> Details:
javasampleapproach@cloudshell:~/ozenero-angular-app (gcp-angular-app)$ gcloud app deploy ... s-east1 (supports standard and flexible) [12] us-east4 (supports standard and flexible) [13] us-west2 (supports standard and flexible) [14] cancel Please enter your numeric choice: 11 Creating App Engine application in project [gcp-angular-app] and region [us-east1]....done. Services to deploy: descriptor: [/home/javasampleapproach/ozenero-angular-app/app.yaml] source: [/home/javasampleapproach/ozenero-angular-app] target project: [gcp-angular-app] target service: [default] target version: [20181220t231434] target url: [https://gcp-angular-app.appspot.com] Do you want to continue (Y/n)? y Beginning deployment of service [default]... ╔════════════════════════════════════════════════════════════╗ ╠═ Uploading 8 files to Google Cloud Storage ═╣ ╚════════════════════════════════════════════════════════════╝ File upload done. Updating service [default]...done. Setting traffic split for service [default]...done. Deployed service [default] to [https://gcp-angular-app.appspot.com] You can stream logs from the command line by running: $ gcloud app logs tail -s default To view your application in the web browser run: $ gcloud app browse
-> Now go to link: https://gcp-angular-app.appspot.com. Result:
