Prerequisites
This will be a two-part tutorial focused on deployment of a full-stack, JavaScript application on Google Cloud Platform. The relevant tech stack I’ll be focused on is a SQL database and a Node server. I also used React and Webpack although any front-end framework and build strategy should be fine. I’ll touch on this in Part 2 when it’s time to deploy.
In Part 1, I’ll cover setting up a GCP App Engine and configuring the app.yaml.
In Part 2, l’ll cover setting up a Cloud SQL instance and deploying with a successful database connection.
I’m going to assume that you have built a full-stack JavaScript app in a local development environment and are ready to deploy some initial version. If you’re under a deadline for an application, it’s always a good idea to deploy early! Once your production environment is configured properly, redeploying new versions should only take a minute or two.
Signup For a Google Cloud Platform Account
Next, make sure you have a Google Cloud Platform (GCP) account. If you are just signing up for an account, Google should give you $300 of free credit to start experimenting. Just make sure you activate it when you make an account.
If you’re like me, you’ll probably make mistakes and have several duplicate projects working out the kinks. Just make sure you shutdown old projects and instances that are no longer being used so that you don’t waste your free credit!
You’ll need a credit card to make a GCP account. Google claims this is for authentication and that they won’t roll you into automatic billing when your credit expires. I’m trusting you Google!
Once you’ve jumped through these hoops, let's get started!
Create a Project in the Cloud
From the Google Cloud Platform dashboard, click the project dropdown in the navbar to create a new project. This will either say “My First Project” or a project name. Click the New Project button.
Give your project a name. You won’t be able to change this name so choose carefully. You can leave the organization as No Organization.
After creating the project, you will land on the project dashboard. Around this time, you may start to realize the breadth of options available to you on GCP. It can feel overwhelming!
I like to use the Search products and resources bar to find what I’m looking for because the Navigation menu is hilariously overstuffed.
Create an App Engine
Navigate to the App Engine resources page and click Create Application.
[APP ENGINE CREATE APP IMAGE]
Select the region closest to your app users. This should be filled correctly automatically unless you are using a VPN or blocking your location in some other way. Then, click Create App.
Next, select your language. Assuming you built a JavaScript app, select Node.js. You can leave the Environment as standard and select Next.
Boom. App Engine created. That was easy!
Activate the Cloud Shell
Feel free to download the Cloud SDK if you want. That won’t be required for this tutorial since I’ll be showing you how to use the Google Cloud Shell in your browser.
In the navbar, click the Activate Cloud Shell icon.
This opens a bash terminal in the browser. Your terminal will be organized by project. Since we already are inside of a project, your command line should have the following format:
username@cloudshell:~ (project-name) $
If for any reason your terminal instance doesn’t have the correct project name associated with it, you can change it with the following command, where PROJECT_ID is the project name:
gcloud config set project [PROJECT_ID]
Clone the Repository Into the Cloud
Before we move on, I recommend adding the following two files to your .gitignore and pushing the changes to your repo: app.yaml and .gcloudignore.
GCP will ultimately need these two files in the cloud repo, but they shouldn’t live in your local environment. This is especially true regarding the app.yaml which will contain your environment variables. On GCP, instead of a .env file, you will be declaring your environment variables inside the app.yaml. The same rule applies to the .env and the app.yaml:
Never commit a file containing environment variables to a public repository because malicious bots can steal your credentials!
As you’ll see later, this change to the .gitignore file will pave a smooth workflow for updating your deployed version even if you make minor changes in your development environment.
Next, copy your clone link from your Github repository, and clone it inside the cloud shell.
git clone <clone link to your github repository>
Change directories into your project, then open the terminal in a new window. Next open the editor.
The Google Cloud editor looks remarkably like VSCode.
In the project root directory, create the app.yaml.
touch app.yaml
Next add the following line of code to the app.yaml:
runtime: nodejs10
This simply informs GCP that your app is intended to run in the node environment. Version 10 is the earliest version of node supported by GCP.
Conclusion
That’s it for Part 1! We’ve created an App Engine inside of a Google Cloud Project. Then we used the Google Cloud Shell to clone a Github repository into the cloud. Finally, we added an app.yaml to the project directory and configured our local IDE to ignore this file in the Git workflow.
Next week in Part 2, we’ll create a Cloud SQL instance, make the necessary configurations, and deploy the app!
Top comments (0)