Google App Engine — Configure custom domains with SSL
Google Cloud Platform makes it easy for anyone to deploy an application on Google’s App Engine and configure custom domains. The use cases include configuring companies’ domains to GCP apps and implementing SSL for apps deployed on google app engine.
This article will guide you through the entire process, with step-by-step instructions on deploying your application on the Google App Engine and configure personalized domains for it along with SSL for the application.
You can configure multiple domains on a single app engine. In this article, we show how to deploy a single-page React application and configure the following domain names for it:
b) https://www.demo.mach3bi.com
Step 1: Have all the following requirements ready.
Before we dive into the topic, please ensure you have NPM, Node.js, and Yarn installed on your machine.
Also, make sure that you have already created a project on the Google Cloud — https://cloud.google.com/resource-manager/docs/creating-managing-projects.
Step 2: Install Google Cloud SDK on your machine
In order to proceed, you need to install the Google Cloud SDK on your machine.
There are various ways to install Google Cloud SDK. The link will take you through all the options and instructions to choose and maintain a Cloud SDK installation. Click here to begin the installation process.
Step 3: Enable the API of your Google Cloud Project.
The App Engine API needs to be enabled in GCP project. You will find the detailed instructions on granting and revoking access here.
Step 4: Build the Test SSL Application
For demonstration, I have used PowerShell to run the commands.
You may download the Boiler-Plate test application by clicking here.
Once you download the zip file, follow the steps given below.
- Unzip the folder and extract all the files to ssl_test_app.
- Launch PowerShell and navigate to the ssl_test_app folder. Now, we need to build the app. Type in the following command to build the application.
#yarn run build
- To ensure all the routes are working smoothly, you need to run the build locally. This step is recommended but optional. The following command will build the app locally:
#yarn run client
The application should launch automatically.
Step 5] Deploy the Test Application on Google Cloud Platform(GCP).
The Google Cloud SDK that we downloaded in Step 1 needs to be configured so that we can connect it to our project where the SSL test application is going to be deployed.
To configure the Google Cloud SDK head over to the PowerShell and execute the gcloud init command given below:
#gcloud init
The table below lists the options that will be required while initializing. It also lists the values we selected for the deployment.
Following are the screenshots of the configuration and their values for your reference.
Were you prompted with a “Your Google Cloud SDK is configured and ready to use!’’ message?
This message indicates that initialization is successful.
Now, type in the following command to deploy the application to the app engine:
#gcloud app deploy
Enter your region. We selected the US-East1 option for my app engine.
It takes about 3 to 5 minutes for the app deployment process to complete. Once done, you will be provided with the URL for the app. This URL is also available thru the app engine console in GCP. This URL will redirect you to the test page that we created earlier.
Voila! We have deployed our Test app and are all set to configure a custom domain.
Step 6: Configure Customized Domains
- To customize the domains, head over to the App Engine option on GCP.
- Navigate to the Settings options, locate the Custom Domain choice, and select it. Then, click on ‘Add a custom domain.’
3. You will find the ‘Verify a new domain’ on the screen when you visit the custom domain. Select it from the drop and provide your preferred domain name. Then proceed to select Verify.
4. You will be asked to verify your ownership. Google will request you to add a TXT record depending upon your provider.
5. Our Domain provider is Bluehost. Thus, we have added the TXT record as shown in the screenshot below:
6. Proceed by clicking the “Verify” button located on the Google Webmaster Page. This step should verify your domain.
7. Once you are through the previous step, head back to the GCP custom window screen and you should see that your domain is verified.
8. By default, you may see some mappings already displayed. You can add any other mappings as per your requirement.
9. Add the DNS information by entering the AAAA Record and CNAME.
10. You can find the screenshots of the configuration carried out by us below. We have used the domain provided by Bluehost.
Important: Please note that it takes up to 4 hours for these changes to reflect and propagate globally.
The Custom Domain section should display the domain configuration as follows:
Once the domain is in effect and working, the Google App Engine will automatically issue a certificate authorized and signed by the Google Trust services.
To view our website, navigate to the domain using a browser. It will show us our demo page.
At this moment, the website permits both HTTP and HTTPS traffic. If you wish to add more security to your app’s handler, you can specify it by adding the ‘secure: always’ element to all of your handlers in the app.yaml.
Follow the example below to force https traffic to your app.
handlers:
- url: /.*
script: auto
secure: always
redirect_http_response_code: 301
Using the ‘secure: always’ element will forward all the HTTP traffic to an HTTPS URL using the same path. You can check out the app.yaml configuration options for more information.
Note: This is only applicable to standard app engine deployment. This does not apply to Flexible deployments.
Thank for reading thru this lengthy article. Let us know if you have any feedback or questions.
In order to proceed, you need to install the Google Cloud SDK on your machine.
