Overview

Set up CI/CD using Bitbucket pipeline.
This time, I will introduce how to set up it for React application.
If you know the setting method, you can apply it to applications using other languages.

Enable bitbucket pipelines

After you select 「Repository settings → pipelines Settings」,you can enable bitbucket pipelines.

Set up bitbucket-pipelines.yml

Please set up bitbucket-pipelines.yml in the home directory of repository you would like to set up.
The below codes are minimum settings we need.
If you would like to add something, please add.

home/bitbucket-pipelines.yml

pipelines:
  default:
    - step:
        caches:
          - node
          - pip
        script:
          - npm install
          - npm test
  branches:
    develop:
      - step:
          script:
            - apt-get update
            - ssh ec2-user@0.0.0.0 /var/www/home/scripts/devCdScript.sh
    staging:
      - step:
          script:
            - apt-get update
            - ssh ec2-user@0.0.0.0 /var/www/home/scripts/stgCdScript.sh
    master:
      - step:
          script:
            - apt-get update
            - ssh ec2-user@0.0.0.0 /var/www/home/scripts/prodCdScript.sh

I will explain about detail of this one by one.

Whichever branches you merged, the default part will run the script every time.
So, it is good to add a script such as a test code to ensure quality in this part.
I think you can put JavaScript flow as well.
On the other hand, under branches part, the scripts to be executed are different.And it depends on the branch name.
For example, if you merge a pull request into develop branch, the default and develop scripts will be executed.

Change to the appropriate IP address after ssh ec2-user@ part.
Change the directory name from home to appropriate name.

Prepare .sh file for each environment.
Write the script you want to run when deployment.

home/scripts/devCdScript.sh

#!/bin/bash

cd /var/www/home

git pull;

if [ $? -eq 0 ]; then
  echo 'git pull success.'
else
  echo 'git pull failure.'
  exit 1;
fi

npm install;
npm run build;

Set up SSH key

After you select 「Repository settings → SSH keys」, you can set up SSH key.
After you select 「Generate keys」, you can generate public key and private key.

Set up public key you generated to the server.
If you use EC2, paste your public key to below file.
/home/ec2-user/.ssh/authorized_keys

After you select 「Repository settings → SSH keys」, you can set up Known hosts.
Input IP address you would like to set up. And select 「Fetch」.

If you have set up all things so far, when your pull request is merged into the branch, the pipeline will run.

If you get failed due to a permission error when executing pipeline, try changing the permissions of script files such as devCdScript.sh.

・Reference
https://support.atlassian.com/bitbucket-cloud/docs/configure-bitbucket-pipelinesyml/