Bitbucket Pipelines: Deploy VueJS App to Digital Ocean

3 min readMar 10, 2021

For a side-project, I need to build & deploy a VueJS application to Digital Ocean automatically. After each push or merge.

As you may know, VueJS uses server-side rendering. So, using webhooks (ie post-receive hook) may not be convenient for deployment. This is why, I decided to continue with Bitbucket Pipelines.

TL;DR

We will add a pipeline to connect DigitalOcean via SSH. We’ll add SSH key pair and known host information to securely connect to Digital Ocean. And pipeline will execute a bash script which builds our application. See this gist link for all.

Caution: On free plan, BitBucket is offering 50 build minutes per month. For a mid-sized VueJS application, it takes ~1 minute to build as far as I tested. Also, it may vary depending on the droplet you use.

Let’s Begin

Add Pipeline configuration:

Go to Pipelines from the repository menu, for the first time you’ll see something like this:

To create first pipeline, select Starter Pipeline. A pipeline is defined using a YAML. So, there will be a bunch of example steps that wants to show how Bitbucket Pipelines does a great job. Delete all and add following lines:

image: atlassian/default-image:latestpipelines:
  default:
    - step:
      deployment: staging
      script:
        - cat ./deploy.sh | ssh $user@$address
        - echo “Deploy step finished”

Let me explain line by line: First four lines are default pipeline declaration. Deployment is about environment: Bitbucket creates 3 basic environments for you by default, a test environment called ‘Test’, a staging environment called ‘Staging’, and a production environment called (you’ve guessed it!) ‘Production’.

If you prefer to run pipeline for a specific branch, please replace default by this, for master branch:

branch:
  master:

Add SSH Key

Go to Repository Settings -> SSH Keys from the menu. Generate key, if not exist. Then copy the public key. Also below the keys, there is section called Known Hosts. Please be sure that you’ve added ip address of droplet and fetch the host’s fingerprint. Now we’re ready to add public key to droplet.

Connect to your droplet via SSH and append authorized_keys with your key, like this:cat your_key >> ~/.ssh/authorized_keys

Add Repository Variables

See the line in the configuration ssh $user@$address?.To use these variables, we'll add each one. Go to Repository Settings -> Repository Variables. Add the variables.

Remember, these variables are on the repository level that means, can be accessed by the users with push permissions in the repository.

deploy.sh

Here is how my script looks like:

echo "Deploy script started"
cd /var/www/
sh pull.sh
echo "Deploy script finished execution."

It’s pretty simple. Two messages, at the beginning and the end. And another bash execution, pull.sh. Please be sure that your bash file is on the right directory.

I prefer to use another bash script to go to my www folder, cause want to keep it easy. I didn’t want to mess with pipeline.

pull.sh

Here is the matter. Now, we’re ready to pull the latest changes and build. Create a file named pull.sh and place same directory with project. Not in folder.

echo "Pull script started"
# abort on errors
set -e
cd your_project_path
git pull origin master
npm run build
cp -r dist/* res
echo "Pull script finished execution"

Notes

Please be sure values of default origin and branch.
Please be sure that dist/ is not linked with web server to prevent any downtime.
Please replace res with the exact path of public folder.

If you went through these steps, auto-deployment should be working. To test it manually, go to Pipelines and click Run Pipeline.

That’s all.