- Google Cloud Platform account
- Billing account
- Basic knowledge of
GCP offers a wide range of tools (like App Engine, Cloud Functions, Datastore, etc) that make it easier deploying serverless applications.
In this article, I'll talk about setting up a React application to be deployed on Google Cloud platform using App Engine and about storing my code on Google Cloud Source Repositories.
First, I create a new React project
npx create-react-app looney-tunes cd looney-tunes npm start
Now I setup the project on Google Cloud Platform
I have to install
gcloud CLI to interact with the project from my machine.
For Mac OS, download the
.tar.gz file at https://cloud.google.com/sdk/docs/quickstart-macos and extract it. Then run
Once reloaded the terminal, I run
gcloud -v to check the installation
Google Cloud SDK 279.0.0 bq 2.0.53 core 2020.01.31 gsutil 4.47
In the root folder of the React project I run
gcloud init to initialize the project for GCP. Following the interactive CLI, I can setup the project
It's time to create my repository for this initial code. I search
cloud repositories via the search bar
and then I click
GO TO CLOUD SOURCE REPOSITORIES
Add repository on the right-top corner. Then select
Create new repository. Now I choose a name for my repository )project's name) and I select the GCP project
At this point, make sure
Push code from a local Git repository is selected. I use the
SSH authentication to push my code. From the root folder of the React project, I run
git remote add google ssh://email@example.com@source.developers.google.com:2022/p/looney-tunes-267812/r/looney-tunes git push --all google
Error. Probably due to the missing API Key. I create a new API Key and I add it to my Cloud Source Repositories https://source.cloud.google.com/user/ssh_keys.
Once done, I run
git push --all google once again to push my code.
To make Google Cloud Platform able to deploy the project, I add a new file in the root folder of the project:
# Copyright 2017, Google, Inc. # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. # [START app_yaml] env: flex runtime: nodejs # [END app_yaml]
I save and push
Everything is ready! In the root folder of the project, I run
gcloud app deploy. I select the region of the project (in my case,
The console prompts the following message
Services to deploy: descriptor: [/Users/rossanodan/Desktop/Development/looney-tunes/app.yaml] source: [/Users/rossanodan/Desktop/Development/looney-tunes] target project: [looney-tunes-267812] target service: [default] target version: [20200210t131032] target url: [https://looney-tunes-267812.appspot.com]
This is a preview of what is going to be deployed and published. I enter
Once the project is deployed, I run
gcloud app browse that opens https://looney-tunes-267812.appspot.com/.