Deploy Your Website on Cloud Run

One of the subfields of computer science, cloud technologies are increasingly gaining value today with the rising importance of websites. This is due to the need for websites to be hosted and continuously available, which is provided by cloud environments. In this article, I will cover the steps necessary to deploy a ready-made website on Google Cloud.

1. Choosing a Cloud Provider

At this stage, you need to select one of the widely used cloud providers such as Huawei Cloud, Amazon Web Services, Google Cloud, or Microsoft Azure. Although these cloud providers have the necessary technologies to deploy a website, they offer these technologies in different ways and under different names. In this example, I will focus on how we can perform this process on Google Cloud.

2. Creating an Account

You need to create an account on your chosen cloud provider. Most cloud providers offer a free trial account, and if you are a student, some cloud providers provide various advantages.

3. Preparing Website Files

You need to collect all the files related to your website in a folder. To ensure these processes are error-free, make sure that your files are complete and working without any issues. Storing your website files on developer platforms like GitHub or GitLab during these processes will provide you with various advantages in areas like Continuous Integration / Continuous Development (CI/CD). In this article, I will continue by providing an example using GitHub.

4. Cloning Website Files to the Cloud Environment

First, to clone the files from GitHub to the cloud environment, you need to activate the Cloud Shell from the top right corner. Most of the operations we will perform afterward will continue from this screen. After activating this screen, you need to customize the following codes according to your GitHub repository.

git clone https://github.com/berkkaya0304/portfoliowebsiteofmine.git
cd ~/portfoliowebsiteofmine

After this step, to carry out the necessary installations, you should create a file like the setup.sh file in my own repository and execute the installations through this file.

./setup.sh

Afterward, you can test if the application is running with the help of the following command.

cd ~/portfoliowebsiteofmine
npm start
 

5. Creating a Docker Container with Google Cloud Build

If you have completed the previous steps without any issues, you should not encounter problems in the following steps. We will now create a Docker container for the application, which will allow it to run using fewer resources.

To create a Docker container, go to the Artifact Registry -> Repositories screen.
After clicking "Create Repository," name the repository as "website" and set the format to "Docker."
You can select "us-central1" as the location and region. Then, click "Create" to complete the setup.

To verify using the Google Cloud CLI in Cloud Shell, you need to run the following command:

gcloud auth configure-docker

6. Using Docker

At this stage, you need to enable the necessary APIs. Therefore, run the following commands in Cloud Shell:

gcloud services enable artifactregistry.googleapis.com \
cloudbuild.googleapis.com \
run.googleapis.com

Next, you can start the build process with the following command:

gcloud builds submit --tag us-central1-docker.pkg.dev/${GOOGLE_CLOUD_PROJECT}/website/website:1.0.0

7. Deploying the Container to Cloud Run

At this stage, we will transfer the Docker container we created to Cloud Run.

gcloud run deploy website --image us-central1-docker.pkg.dev/${GOOGLE_CLOUD_PROJECT}/website/website:1.0.0 --region us-central1

8. Updating the Website

In this section, we will discuss how you can update your website after publishing it in this way. Of course, you will need to make many updates during these processes. Therefore, this section is very important.

If you want to update your website again after these processes, and if your website is written in React, you can find example codes below. But if your website is written in another language, you can easily find the equivalent commands in your programming language with a little research.

cd ~/portfoliowebsiteofmine/react-app
npm run build:portfoliowebsiteofmine

After rebuilding in this way, the next step is to run it again in the Docker environment, and to make future management easier, you will need to update the version as well.

cd ~/portfoliowebsiteofmine
gcloud builds submit --tag us-central1-docker.pkg.dev/${GOOGLE_CLOUD_PROJECT}/website/website:2.0.0

In the next step, we will see how we can update our application without any downtime using the latest build we have created.

9. Updating the Website Without Downtime

The changes are complete, and the final step is to update the website without any downtime. Cloud Run brings the part we created as a Docker container online and directs the incoming traffic to the new container. By using the following command in Cloud Shell, you can easily update your website without downtime, as mentioned above.

gcloud run deploy monolith --image us-central1-docker.pkg.dev/${GOOGLE_CLOUD_PROJECT}/monolith-demo/monolith:2.0.0 --region us-central1

In this article, we focused on how you can convert your existing website into a container on Google Cloud and start it with Cloud Run. After that, we also saw how you can easily update the website you have published.

I hope this article has helped you understand how to bring your website online with Google Cloud. I am Berk Kaya, wishing everyone good work and feel free to contact me if you have any questions.