How to Build and Deploy a Vue Web App to Google Cloud Run

In this guide, you'll learn how to build a Vue.js application and deploy it to Google Cloud Run, a fully managed serverless platform that allows you to run stateless containers without the concern of infrastructure. 

Google Cloud Run allows you to deploy and run containerized applications without the necessity of server management. It handles traffic, scaling, and load balancing automatically, allowing you to focus on writing code instead of managing infrastructure for a wide scale of production web apps.

The following requirements are needed to begin:

Pre-requisites:

• Google Cloud Account: Sign up is free and new customers are given $300 USD in credits for their platform, valid for 90 days.
• Google Cloud SDK (gcloud CLI): Install and configure this into your machine. For further documentation can be found on this link.
• Node.js and npm or Yarn: Install for Vue.js development.
  For further documentation check the following links: NPM Docs, Yarn Docs.
• Docker: Platform to build a Docker image.
  Docker can be installed via this link.

Step 1: Create a Vue App

If you already have a Vue.js application, you can skip this step. Otherwise, let's create a new one using Vue CLI:

1. Install Vue CLI (if not already installed):

npm install -g @vue/cli

Alternatively, you can use yarn as follows:

yarn global add @vue/cli

2. Create a new Vue project:

Follow the prompts based on your own preference. However, for this guide, default is fine.

vue create vue-app
cd vue-app

Below is an example of a default setup:

You will then be requested to run:

cd vue-app
npm install

3. Build your Vue app for production:

This command will create a dist directory containing the production-ready static assets of your Vue app.

npm run build

Alternatively, you can go with Yarn as follows:

yarn build

Step 2: Create a Dockerfile

Create a file named Dockerfile in the root of your my-vue-app directory with the following content:

# Stage 1: Build the Vue application
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Stage 2: Serve the application with Nginx
FROM nginx:alpine
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

This is what each command in the Dockerfile does:

• FROM node:lts-alpine as build-stage
  Uses a Node.js image to build the Vue application
• WORKDIR /app
  Sets the working directory inside the container
• COPY package*.json ./
  Copies the package.json and package-lock.json files to install dependencies
• RUN npm install
  Installs the Node.js dependencies
• COPY . .
  Copies the entire project directory into the container
• RUN npm run build
  Builds the Vue app
• FROM nginx:alpine
  Uses a lightweight Nginx image to serve the static files
• COPY --from=build-stage /app/dist /usr/share/nginx/html
  Copies the built Vue application from the build-stage to the Nginx web root
• EXPOSE 8080 
  Informs Docker that the container listens on port 8080
• CMD ["nginx", "-g", "daemon off;"]
  Starts the Nginx server in the foreground.

Step 3: Setup Google Cloud Run

In order to proceed using Google Cloud Run, Billing must be set and created.

Link and Create a Billing Account. You will be asked for your Account information.

Install gcloud CLI

For google cloud run to have access to your project, proceed to execute the terminal command below, which will then prompt authorization.

gcloud auth login

Step 4: Build and Push the Docker Image to Google Container Registry

Now, let's build your Docker image and push it to Google Container Registry (GCR).

1.  Set your Google Cloud Project ID:
Replace [YOUR_PROJECT_ID] with your Google Cloud Project ID.

gcloud config set project [YOUR_PROJECT_ID]

[YOUR_PROJECT_ID] can be found in the project home page.

2. Build the Docker image:

docker build -t gcr.io/[YOUR_PROJECT_ID]/my-vue-app:latest .

3. Push the Docker image to Container Registry:

docker push gcr.io/[YOUR_PROJECT_ID]/my-vue-app:latest

Step 4: Deploy to Google Cloud Run

Finally, deploy your Docker image to Cloud Run.

Deploy the service:

This is what each command does:

• gcloud run deploy my-vue-app
  the service name for your application
• --image gcr.io/[YOUR_PROJECT_ID]/my-vue-app:latest:
  Points to the Docker image you pushed to GCR
• --platform managed
  Indicates that you want to use the fully managed Cloud Run environment
• --region us-central1
  Sets the region where your service will be deployed
• --allow-unauthenticated
  Allows unauthenticated access to your service. 

For production apps, consider skipping this tag and opt for more secure methods.

Confirm the deployment:

The gcloud run deploy command will output the URL of your deployed service. 

And with that, your Vue app is now live on Google Cloud! Your application now has access to implement the following features:

Additional Features:

• Custom Domains: Configure a custom domain name for your application.
• Environment Variables: Pass environment variables to your Cloud Run service to securely store secrets without hardcoding into your codebase.
• Continuous Deployment: Set up continuous integration and continuous deployment (CI/CD) pipelines to automatically run any provided unit tests before deploying, when you push code to a code hosting provider, and automatically build and deploy the app after a successful test. The push will then update the production application.
• Monitoring and Logging: observe the performance and health of your application.

Additional features can be found in the official Google Cloud Run documentation. This concludes the deployment guide for your Vue App. Here are some additional points you should consider before deploying your application to production.

Best Practices:

Use Environment Variables: Never hardcode secrets or API keys. Instead, pass them as environment variables using Cloud Run’s settings.

Enable IAM & Authentication: For sensitive apps, disable --allow-unauthenticated and set up Identity and Access Management (IAM) to control access.

Implement CI/CD: Automate builds, tests, and deployments using tools like GitHub Actions or Cloud Build.

Monitor Logs and Metrics: Enable Cloud Monitoring and Cloud Logging to get insights into usage patterns and errors.

Optimize Image Size: Use multistage builds and lightweight base images (like alpine) to reduce cold start times.

Minimize Cold Starts: Keep traffic steady or consider setting a minimum number of instances if your app is latency-sensitive.

Resource Optimization: Regularly check your GCP console to remove unused images, services, or unused egress rules to avoid unnecessary charges.

Conclusion

You’ve successfully built a Vue.js app containerized with Docker and deployed to Google Cloud Run. Now you will be able to expand your application with features like user authentication, APIs or database connections. For more advanced features, check the Official documentation for Google Cloud Run