In this article, I would be explaining how to deploy a web app to GCP App Engine and the benefits of deploying your app to GCP.
So first of all, What is GCP? well according to Wikipedia
Google Cloud Platform (GCP), offered by Google, is a suite of cloud computing services that runs on the same infrastructure that Google uses internally for its end-user products, such as Google Search, Gmail, Google Drive, and YouTube. Alongside a set of management tools, it provides a series of modular cloud services including computing, data storage, data analytics, and machine learning. Registration requires credit card or bank account details.
So in basic terms what GCP is all about is, it offers different services such as compute, storage, big data, machine learning, and the internet of things.
Now that you understand what GCP is all about. What is App Engine?
App Engine is a fully managed, serverless platform for developing and hosting web applications at scale. You can choose from several popular languages, libraries, and frameworks to develop your apps, and then let App Engine take care of provisioning servers and scaling your app instances based on demand.
Now that we fully understand what GCP and App Engine is all about. let's know the benefits of deploying your web apps to the GCP App Engine before we go through the steps of deploying web apps into the app engine.
What are the Benefits of Deploying Web Apps into App Engine?
- Fully Managed
- Easy to use Platform
- Pay-as-you-go
- Scalability
- Reliability and Performance
- Cost Minimization: You would be given $300 free for a year to make use of GCP services
Steps in Deploying Web Apps into App Engine
We would be creating a covid19 tracker JavaScript web app using the Angular framework.
Create an Angular web app project by cloning the repo link below.
copy and paste the command below on your terminal.
After we are done cloning the repo on our terminal, we should get this result Output:
We then install the packages by copying and pasting the command below into our terminal.
Outcome:
Open the app folder into your code editor
Go back to the terminal by copying and pasting the command below. this would start the app in your local machine
Output:
Access the app in your local machine by going into your local browser by inputting the link below
Create app.yaml file
In your code editor create a file called app.yaml and copy and paste the code below into the app.yaml
In the app.yaml file edit the text "project-name" to the name of your project.
Output:
Run the command below to generate a production-built minify version that is lighter and faster. this is the folder we would be hosting on GCP App Engine.
Output:
Create New GCP Project
First of sign up on GCP via the link below
So, once you are done signing up. Access the console/dashboard via the link below.
Kindly follow-through from the guide in the pictures below Click the drop-down arrow below to create a new project.
Click "new project"
Type in your project name and click create.
Add Google App Engine
So next, we need to access the app engine for the deployment. Kindly verify you are still on the right project by clicking on the drop-down menu.
Click on the search bar and search for "app engine" click on app engine.
A welcome to app engine message pops up. Click on "Create Application".
Select a region close to you and click next.
A new page pops up. in the language section click on "other" since our project is built on JavaScript. Leave the environment section as "flexible" and click on "I'LL DO THIS LATER".
Download, Install, and Login into the Google Cloud SDK
Click on the link below to download the Google Cloud SDK for different OS
Once you are done downloading and installing, get back to your terminal and copy and paste the command into your terminal. The command is used for login and authentication.
A link pops up. Click on the link to open the browser. select the account you use to sign up for GCP and click allow.
A page pops up just like the picture below.
Deploy Project by Running the Command in your Terminal "gcloud app deploy --project=projectID"
To access the project ID get back to the GCP dashboard click on the drop-down menu and copy the project ID of the project you created a few moments back.
Copy and paste the command below into your terminal to deploy the app into GCP
Output: Type in the region number close to you.
To view your web app in your browser click the link generated for you in the terminal.
Likely Errors
To resolve the issue make sure your app.yaml file is in the project folder.
To resolve this issue go to GCP console and activate billing.
Finally, we are done deploying our covid-app into GCP app engine. Kindly follow me for more related articles. Thanks for reading.