Article Image
Article Image

This post outline the different steps required to deploy VuePress on Google Firebase using Google Cloud Build to automate the process.

The VuePress site

The first step, if it’s not done already, is to create a VuePress site. For the complete instructions see the “Getting Started” guide on https://vuepress.vuejs.org/guide/getting-started.html. Basically, inside a new folder :

1
2
3
4
5
6
7
8
9
``` 
mkdir myVuePress
cd myVuePress
npm install -g vuepress
mkdir docs
echo '# Hello VuePress' > docs/README.md

vuepress build docs
```

The last command will create the docs/.vuepress/dist folder. This folder contains the static web site that has been generated by the VuePress build and this is the one that we want to deploy on Firebase. In the next step, we will add this folder path in on of the Firebase config file.

Firebase configuration files

  • Create the firebase.json config file :

    1
    2
    3
    4
    5
    6
    
      {
          "hosting": {
              "public": "./docs/.vuepress/dist",
              "ignore": []
          }
      }
    
  • And also the .firebaserc where you will need to specify your Firebase project ID :

    1
    2
    3
    4
    5
    
      {
          "projects": {
              "default": "<YOUR_FIREBASE_ID>"
          }
      }
    
  • We can now test our configuration by deploying to Firebase. In order to do that, install the firebase-tools :

    npm install -g firebase-tools

  • Once it’s installed, run the following command to launch the deployment on Firebase :

    firebase deploy

Google Cloud build setup

Configuration file

Once you got a successful deployment on Firebase, you can start working on automating the build and deploy process using Google Cloud Build. To achieve this, it needs a cloudbuild.yaml config file detailing the steps we need to execute. Inside your VuePress folder, add the cloudbuild.yaml file with the following content:

1
2
3
4
5
6
7
8
steps:
- name: 'gcr.io/vuepress-e0b13/vuepress'
args: [ 'build', 'docs' ]
- name: 'gcr.io/vuepress-e0b13/firebase'
args: [ 'deploy', '--token', '${_FIREBASETOKEN}']
images:
- 'gcr.io/vuepress-e0b13/firebase'
- 'gcr.io/vuepress-e0b13/vuepress'

We are defining two steps. They are both executing a containerized image of VuePress and Firebase tools. We will see more on this later.

Code repository

Google Cloud Build will automatically launch a build when you push a new commit on your Git repository. Put the VuePress source files on one of these three :

  • Cloud Source Repository
  • Bitbucket
  • GitHub

Build tools

We now need to make available to Google Cloud Build the two tools that we will need to build the VuePress site and deploy it to Firebase. These tools will be placed in their respective Docker containers and they are only needed for the build process. The VuePress build also needs Node.js 8.x or newer. Make sure you specify “node:carbon” (or newer) inside your Dockerfile or the VuePress build will not work. Google’s documentation is still referring to “node:boron” which is Node.js 6.

  • Create a new folder and name it “DockerVuePress”. Inside it, put these two configuration files:

    • cloudbuild.yaml

      1
      2
      3
      4
      5
      
        steps:
        - name: 'gcr.io/cloud-builders/docker'
        args: [ 'build', '-t', 'gcr.io/[PROJECT_ID]/vuepress', '.' ]
        images:
        - 'gcr.io/[PROJECT_ID]/vuepress'
      

      You need to replace [PROJECT_ID] with your Google Cloud project ID.

    • Dockerfile

      1
      2
      3
      4
      5
      6
      
        # use Node 8 / Carbon
        FROM node:carbon
        # install Firebase CLI
        RUN npm install -g vuepress
      
        ENTRYPOINT ["/usr/local/bin/vuepress"]
      

    Now run the following command to build the VuePress Docker container:

    1
    
      gcloud builds submit --config=cloudbuild.yaml .
    

    In order to run this command, make sure you have Google Cloud SDK installed. You can get it here: https://cloud.google.com/sdk/

  • Create a new folder and name it “DockerFirebase”. Like what we did for VuePress, put these two files inside it:

    • cloudbuild.yaml

      1
      2
      3
      4
      5
      
        steps:
        - name: 'gcr.io/cloud-builders/docker'
        args: [ 'build', '-t', 'gcr.io/[PROJECT_ID]/firebase', '.' ]
        images:
        - 'gcr.io/[PROJECT_ID]/firebase'
      

      You need to replace [PROJECT_ID] with your Google Cloud project ID.

    • Dockerfile

      1
      2
      3
      4
      5
      6
      
        # use Node 8 / Carbon
        FROM node:carbon
        # install Firebase CLI
        RUN npm install -g firebase-tools
      
        ENTRYPOINT ["/usr/local/bin/firebase"]
      

    Now run the same gcloud command :

    1
    
      gcloud builds submit --config=cloudbuild.yaml .
    

Google Cloud Build Trigger

  • The final step is to configure a new trigger in Google Cloud Build. The configuration looks like this :

    Google Cloud Build trigger configuration

    Make sure you add the “_FIREBASETOKEN” variable. This variable contains your Firebase token.

Final words

This is it, now when you will push a commit in your branch (master in my example) it will automatically redeploy your VuePress site.

For more information on the various parts of this how-to please visit these links :

Blog Logo

Raphael Berube


Published

Image

raphael berube

Don't forget to play.

Back to Overview