概要

Bitbucket pipelineを使ってCI/CDを設定します。
今回はReactのアプリケーションの場合、どのように設定するかをご紹介します。
設定方法が分かれば、他の言語を使ったアプリケーションでも応用が効きます。

bitbucket pipelinesを有効にする。

Repository settingsからpipelinesのSettingsを選択して、有効にします。

bitbucket-pipelines.ymlを設定する

設定したいリポジトリのホームディレクトリにbitbucket-pipelines.ymlを設定します。
以下は、最低限の設定を記載しました。必要に応じて追加してください。

pipelines:
  default:
    - step:
        caches:
          - node
          - pip
        script:
          - npm install
          - npm test
  branches:
    develop:
      - step:
          script:
            - apt-get update
            - ssh [email protected] /var/www/home/scripts/devCdScript.sh
    staging:
      - step:
          script:
            - apt-get update
            - ssh [email protected] /var/www/home/scripts/stgCdScript.sh
    master:
      - step:
          script:
            - apt-get update
            - ssh [email protected] /var/www/home/scripts/prodCdScript.sh

一つ一つ解説して行きます。
どのブランチにマージしたかに関わらず、defaultの部分は、scriptが毎回実行されます。
なので、この部分にはテストコードなど品質を担保するためのscriptを追加すると良いです。
JavaScriptのflowなどを入れても良いと思います。
一方で、branches以下はブランチ名によって、実行されるscriptが異なります。
例えば、developブランチにプルリクエストをマージする場合、defaultとdevelopのscriptが実行されます。

ssh ec2-user@以降のIPアドレスは適宜変更してください。
homeとなっている部分もディレクトリ名を適宜変更してください。

.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;

SSH keyの設定

Repository settingsからSSH keysを選択し、SSH keyの設定ができます。
Generate keysを選択すると公開鍵と秘密鍵を作成できます。

作成した公開鍵をサーバーに設定します。
EC2の場合、以下のファイルにコピーした公開鍵を貼り付けます。
/home/ec2-user/.ssh/authorized_keys

Repository settings → SSH keysからKnown hostsを設定します。
設定したいサーバーのIPアドレスを入力して、Fetchを選択。

ここまで設定したら、プルリクエストを対象のブランチにマージした際にpipelineが動くと思います。
なお、pipeline実行時にpermission errorでfailedになった場合は、devCdScript.shなどのスクリプトファイルの権限を変更してみて下さい。

・参考
https://ja.confluence.atlassian.com/bitbucket/configure-bitbucket-pipelines-yml-792298910.html