In this post , i will show you the steps to deploy your simple react application to GCP app engine service .
Before going for actual deployment you should consider below pre-requisites –
GCP account – You need to create at least Free tier GCP account by providing your credit card details which will be valid for 3 months. You can create it using https://cloud.google.com/
Github project – Simple hello world react project on github (https://github.com/AnupBhagwat7/gcp-examples)
Below are the steps to deploy application to App Engine –
1. Create your app in the GCP
Go to Google cloud console(https://console.cloud.google.com/) and click on App Engine –
You need to create a new project to before you start using cloud as below –
Once its created , you will see App Engine screen as below –
Now click on create application and select region from below screen –
Select Laguange as Nodejs and environment as standard-
2. Clone our app from our GitHub repository
Now you can clone the application from github using Cloud shell present at right top corner –
git clone https://github.com/AnupBhagwat7/gcp-examples.git
3. Build our app for deployment
Now navigate to your project –
Now you need to install the dependencies required and then build the project –
npm install npm run build
These commands will create the build artifacts in build folder .
4. Add an app.yaml to the root directory and deploy!
Delete all the files and folders except application.yaml and build folder. By the end of this step, the only things left should be the “build” folder and “app.yaml”. That’s all the App Engine will need to run our app.
rm fileName - delete single file
rm -r foldername - Delete all files recursivey
app.yaml contains below content –
runtime: nodejs12 handlers: # Serve all static files with url ending with a file extension - url: /(.*\..+)$ static_files: build/\1 upload: build/(.*\..+)$ # Catch all handler to index.html - url: /.* static_files: build/index.html upload: build/index.html
This file provides information required application deployment.
To deploy application , you need to execute below command on cloud shell –
gcloud app deploy
Just answer ‘y’ for any prompt comes up . After successful deployment you will see the application link on App Engine dashboard as below –
Once the application is deployed you will see URL in cloud shell console as below –
You can also see the application link on App engine dashboard –
Access application in browser –