【Bitbucket Pipelines】WEB制作で使ってほしい自動デプロイ

# はじめに
WEB制作でPipelineを使ったらとても便利だったので紹介します。
自動デプロイと聞くと設定が難しそうと思うかもしれませんが、今回は静的ファイルだけを扱うことが前提なのでかなり簡単です。
今回はさくらのレンタルサーバーを使います。

# 概要
Bitbucketのbitbucket-pipelinesで指定したブランチにプッシュしたときにレンタルサーバーに自動デプロイする方法を紹介します。
下記の２通りのやり方で説明します。
- bitnamiのimageでgit-ftpを使用する方法
参考：https://hub.docker.com/r/bitnami/git
- Atlassianのftp-deployを使用する方法

# この記事を読んだらできること
指定したブランチにプッシュかプルリクをマージしたら自動でFTPサーバーに自動デプロイされるpipelineの設定:raised_hands:

# 前提条件
- **bitbucket**のアカウントが必要です
- **レンタルサーバー**が必要です

# 手順
[1. サーバー情報を確認する](#1サーバー情報を確認する)
[2. **bitbucket-pipelines**の初期設定をする](#2bitbucket-pipelinesの初期設定をする)
[3. サーバー情報を**Bitbucket**の環境変数に登録する](#3サーバー情報をbitbucketの環境変数に登録する)
[4. デプロイ設定をする](#4デプロイ設定をする)
[5. 自動デプロイを実行する](#５自動デプロイを実行する)

# 本題

## 1.サーバー情報を確認する
- サーバー情報をBitbucketの環境変数に登録するので、レンタルサーバーのホスト名、ユーザー名、パスワード、データをアップするディレクトリのパスを確認してください。
- さくらのレンタルサーバーの場合は下記のページから確認ができます。
    - コントロールパネル → サーバー情報 → FTP設定情報
![サーバ情報.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/22ef094d-21c0-eba8-2c06-7919b16b5143.jpeg)

:::note warn
国外IPの制限がある場合はサーバーにアクセスできない可能性がありますので、デプロイがうまくいかなかった場合は設定を無効にしてみてください。
:::

## 2.bitbucket-pipelinesの初期設定をする
1. サイドメニューにある「Repository settings」 → 「Setting」から**Pipelines settings**のページを開きます。
![Group 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/efa75973-3607-7c41-928c-f84e88f17f1e.png)

2. 「Enable Pipelines」のトグルを切り替えて有効化します。
![Group 4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/dbb555d3-7136-9322-4829-26fa3aa3328b.jpeg)

## 3.サーバー情報をBitbucketの環境変数に登録する
デプロイ設定をする前にサーバー情報を変数に登録していきます。
サイドメニューから「Repository setting」 → 「Repository variables」にアクセスすると登録画面に移ります。
![Group6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/73b2901b-d7c0-d62c-b012-6bb37720332d.png)
![設定１１.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/dbd1d3c4-cd91-78b1-24d8-cd5afead629d.jpeg)
各項目を入力してAddを押せば変数追加の完了です。

:::note info
メモ
- Nameは変数名なので任意の名前をつける
- Valueにサーバー情報を入れる
- 隠したい情報は『Secured』にチェックを入れる
:::

## 4.デプロイ設定をする
1. サイドメニューの**Developments**を選択すると**Pipeline**のテンプレート選択画面に移ります。
![Group 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/a354e1a3-4f74-b897-5dd5-3861d9274f39.png)

2. **Starter pipeline**のテンプレートを選択するとpipelineの設定ファイルを編集する画面に移ります。
![設定７.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/3e23349c-7514-38fa-429f-19c15102e59f.jpeg)

3. 下記のコードに書き換えてください。
**bitnamiのimageでgit-ftpを使用する**

[1] 全データを反映する
```yaml:bitbucket-pipelines.yml
image: bitnami/git

pipelines:
  branches:
    develop:
      - step:
          script:
          - apt-get update
          - apt-get -qq install git-ftp
          - git ftp init --user $FTP_USER --passwd $FTP_PASSWORD $FTP_HOST$FTP_DIRECTORY
```
[2] アップロードされたファイルを同期化して差分だけ反映する
```yaml:bitbucket-pipelines.yml
### 省略 ###
          - git ftp catchup --user $FTP_USER --passwd $FTP_PASSWORD $FTP_HOST$FTP_DIRECTORY
```
:::note warn
注意
一度デプロイを行ったら「**git ftp init(catchup)**」のところを「**git ftp push**」に変更してください
:::


**Atlassianのftp-deployを使用する**
```yaml:bitbucket-pipelines.yml
image: atlassian/default-image:3

pipelines:
  branches:
    develop:
      - step:
          script:
            - pipe: atlassian/ftp-deploy:0.3.3
              variables:
                USER: $FTP_USER
                PASSWORD: $FTP_PASSWORD
                SERVER: $FTP_HOST
                REMOTE_PATH: $FTP_DIRECTORY
                DELETE_FLAG: 'false' # 既存ファイルを削除せずに上書きする
                EXTRA_ARGS: "--exclude=.bitbucket/ --exclude=.git/ --exclude=README.md"
```
:::note warn
注意
デプロイのたびに全データが反映されます
:::

### 各セクションについて
**images**
使用するDockerイメージ

**pipeline**
ここからはpipelineの処理ですという意味

**default**
全てのブランチで動作する

**branches**
動作させたいブランチを指定することができるようになる

**step**
ビルドの実行単位で最大100まで設定できる
（無料会員は10ステップまで）

**parallel**
並列処理で複数ステップを同時に実行することができる
ビルド時間の短縮に便利です

**script**
連続して実行する処理の一覧

**variable**
pipeline起動時に提供される変数が含まれる

**pipe**
バックグラウンドで処理を実行して複雑なタスクを簡単にしてくれる

### Variablesについて
**USER**
FTPサーバーのユーザー名

**PASSWORD**
FTPサーバーのパスワード

**SERVER**
FTPサーバーのアドレス

**REMOTE_PATH**
FTPサーバーのアドレス

**LOCAL_PATH**
アップロードするローカルディレクトリのパス（任意) 
Default ${BITBUCKET_CLONE_DIR}

**DEBUG**
デバッグ情報の追加をオンにする
Default: false

**EXTRA_ARGS**
lftpコマンドに渡される追加引数(gitignoreのようなもの)

**DELETE_FLAG**
新しいファイルを転送する前に古いファイルを削除するためのオプション
Default: true

:::note info
**--exclude-glob**で「\*.jpg」のようにglobパターンで指定することができます
:::

### parallelについて
並列処理を記述するセクション
ビルド時間を短くしたり最大ビルド時間１２０分を超過したくないときに有効です。

**例**
```yaml:bitbucket-pipelines.yml
pipelines:
  default:
    - step:
        script:
          - ## script ##
    - parallel: # 並列処理
        - step:
            script:
              - ## script ##
        - step:
            script:
              - ## script ##
```

### bitbucket-pipelines.ymlを追加する
必要な設定が完了したら右下の**Commit file**押しましょう。
![Group ８.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/5f10d41d-eb6f-9466-e839-19c87b29528f.jpeg)


masterブランチにファイルが追加されます。
![設定９.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/26541006-3ab6-2def-4751-c7a0f239dc4b.jpeg)
これで設定は完了です！
あとはプッシュするだけ。

## ５.自動デプロイを実行する
1. 指定したブランチにプッシュしてみましょう。
2. プッシュしたら自動デプロイが実行されるのでサイドメニューの「Pipelines」からデプロイ状況を確認します
![Group 9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/e12aceba-6f35-7750-0030-86c0236bc10a.jpeg)

3. Pipelineの項目から詳細画面を確認します
![Group 9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/f335e5ff-a615-1c1d-b1ed-83b4306bd64c.jpeg)

4. ステータスが**Successful**になればデプロイ完了です
![Group 10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249131/4a9ef9ae-edc9-8a39-3135-ae34df4c3cd1.jpeg)
うまくいかない場合は下記のバリデーターでコードをチェックしてみましょう。
[Validator for bitbucket-pipelines.yml](https://bitbucket-pipelines.prod.public.atl-paas.net/validator)

# 注意点
- なれるまでは誤ってサーバーのデータを削除しないように**DELETE_FLAG**を**false**に設定しましょう
- ビルド時間が120分を超えると自動停止します

# おわりに
少し長くなりましたが意外と簡単ではないでしょうか？
これからは確認用のテストサイトにアップするときはpipelineを使うことが増えそうです。
データ納品するときに使うのも便利そうですね。
気が向いたらGulpやnpmを入れた記事をアップするかも。たぶん

# 参考リンク
- [Bitbucket Pipelines を使い始める](https://support.atlassian.com/ja/bitbucket-cloud/docs/get-started-with-bitbucket-pipelines/)
- [並列ステップのセットアップまたは実行](https://support.atlassian.com/ja/bitbucket-cloud/docs/set-up-or-run-parallel-steps/)
- [bitbucket-pipelines.yml を設定する](https://support.atlassian.com/ja/bitbucket-cloud/docs/configure-bitbucket-pipelinesyml/)
- [Pipelines ランナーに関するよくある質問](https://support.atlassian.com/ja/bitbucket-cloud/docs/pipelines-runners-frequently-asked-questions/)
- [ftp-deploy](https://bitbucket.org/atlassian/ftp-deploy/src/master/)
- [Pipelines を使用したビルド、テスト、およびデプロイ](https://support.atlassian.com/ja/bitbucket-cloud/docs/build-test-and-deploy-with-pipelines/)