Deploy the Vue3 Docker image to the Google Cloud Run

Through the series of articles, I’ve introduced several preparation things, such as “Build a Docker image” or “Push the Docker image“. All these articles are the required prerequisites for the goal of this article, to deploy a Vue3 application included in the Docker image into the Google Cloud Run.

It might be better to focus on which part of the entire development process. I hope the below diagram will be helpful.

Of course, this article is not only for the Vue application but every Container application. But please understand that what I confirm is only for the Vue application.

macOS: 12.2.1

The deploy process overview

[ads]

The only thing for us to deploy a Docker container that is saved in the Google Container Registry into the Google Cloud Run is to execute gcloud run deploy command.

But we should consider the user and its roles to perform in advance. Let me explain in the next chapter.


Create the service account for deployment

[ads]

We need the below permissions to deploy according to this document.

https://cloud.google.com/run/docs/deploying#permissions_required_to_deploy

In the previous article, I created a service account that aims to push to the Google Container Registry. I would also like to create another service account that aims to deploy to the Google Cloud Run. Because I think it would be more understandable to think separately.

I would like to go with the third option, add both Cloud Run Admin and Service Accout User, in this article.

Create the service account with the required role

Navigate to the [Service Accounts] section underneath the [IAM & Admin]

Click the [CREATE SERVICE ACCOUNT] button.

Fill in the required fields with the information that would be like below.

Select the [Cloud Run] – [Cloud Run Admin] role.

So the selected roles will look like the below, then click [CONTINUE].

Nothing will be filled in this section, then click [DONE].

After that, the service account for deployment will create and list.

In addition, we can check if the service account has been created or not with the gcloud command.

cloud iam service-accounts list

Next, we need to allow the gcloud to use this created service account.

Create the Key file to auth with

The gcloud auth activate-service-account command allows the gloud command to use a service account, according to this document.

At first, we need to create the key file to auth with. I would like to generate this key file into the home directory with the name sa-deploy-cloud-run.json. Of course, you need to replace [gcp project name] with a valid project name.

gcloud iam service-accounts keys create ~/sa-deploy-cloud-run.json \
    [email protected][gcp project name].iam.gserviceaccount.com

Activate the service account

Once we create the key file, we need to activate the service account with this key consequently. Note that the path to the key file specified in the the –key-file the attribute has to be the absolute path.

gcloud auth activate-service-account [email protected][gcp project name].iam.gserviceaccount.com --key-file=/Users/[Username]/sa-deploy-cloud-run.json

Once the command is completed, the following message has shown.

Activated service account credentials for: [service account]

That’s all for the preparation steps to deploy. But I would like to introduce the additional step as my recommendation in the next chapter.


Set the region default

[ads]

We will have to specify the region to where to deploy. I guess most of the developer has decided on their region in advance. So it is better to set the specified region as your default with the following command.

The following command set the asia-northeast1 as a default region. FYI, the region list is available here.

gcloud config set run/region asia-northeast1

Next, finally, we can go to the deployment.


Perform the deployment

[ads]

In this section, we are going to deploy the Docker image saved in the GCR into the Google Cloud Run.

Check the active service account

Be sure the created service account for deployment has been set as an active user. We can check with the following command.

gcloud auth list

The output will be like the below. If the active account is not for the deployment, we can activate with the gcloud config set account command.

% gcloud auth list
                     Credentialed Accounts
ACTIVE  ACCOUNT
*       [email protected][gcp project name].iam.gserviceaccount.com
        [email protected][gcp project name].iam.gserviceaccount.com
        [some user account]

To set the active account, run:
    $ gcloud config set account `ACCOUNT`

Execute the gcloud run deploy command

The following gcloud run deploy will deploy the Docker image saved in the GCR into the Google Cloud Run.

gcloud run deploy [cloud run service name] --image [region]/[gcp project name]/latest

The cloud run service name will be the service name of the Google Cloud Run. e.g.) if the name has been given as “vue3-sample", you can find the deployed application in the Google Cloud Run section

Once the command is executed, we will face the following message that indicates the security confirmation. I would like to proceed with Y that allows unauthenticated invocations at this time.

Allow unauthenticated invocations to [vue3-sample] (y/N)?Y

Then, we will get the following information as an output.

Deploying container to Cloud Run service [vue3-sample] in project [gcp project name] region [region name]
✓ Deploying new service... Done.
  ✓ Creating Revision...
  ✓ Routing traffic...
  ✓ Setting IAM Policy...
Done.
Service [service name] revision [rivision] has been deployed and is serving 100 percent of traffic.
Service URL: https://[servicename]-ljlyfrsqqq-an.a.run.app

You can find the application that has been built to a Docker image deployed to the Google Cloud Run, and see it through the internet by clicking the Service URL informed in the above output.

Also, you can see the deployed service details below.

Summary

[ads]
  • Create a service account optimized for the deployment
  • Activate the service account created
  • Deploy with gcloud run deploy command by specifying the target region

Related article