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
Contents
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:
|
1 2 3 4 5 6 7 8 9 10 |
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: grokonez-angular-app by mkdir cmd.
– Sync the data from the bucket bucket-angular-app into this directory grokonez-angular-app by cmd:
$gsutil rsync -r gs://bucket-angular-app ./grokonez-angular-app
-> Details:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
javasampleapproach@cloudshell:~ (gcp-angular-app)$ gsutil rsync -r gs://bucket-angular-app ./grokonez-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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
javasampleapproach@cloudshell:~/grokonez-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/grokonez-angular-app/app.yaml] source: [/home/javasampleapproach/grokonez-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:
Hello, admin.
Interesting website, really!
But “Search” function on it doesnt work. Sad.
P.S. Where I can get XEvil4.0 for free?
It’s best captcha solver, included Google ReCaptcha.
Need it for white SEO. Thanks.
Hi WilliamTef,
Please capture your screen when you use the search function, we’ll check its problem 🙂
It works well on my PC.
Regards,
grokonez.