Bitbucket Piplineで、環境変数を利用しているReactプロジェクトをS3へデプロイする
ある程度Bitbucket触ったことがあって、bitbucket-piplines.ymlがなんとなく分かる人向け。
参考
0.事前準備
以下は事前に用意しておく。
デプロイ先のS3バケット
デプロイ用IAMユーザーおよび、アクセスキーとシークレットキー
S3へのアクセス権限を付与しておくこと
1.BitBucketにDeployステップ以外で参照する環境変数を定義する
左ペインの「Repository settings」> 「Repository variables」を選択。
ここではdeployステップ（単にデプロイ処理を定義したステップのこと）以外で使用する環境変数を定義する。
→ どちらかというと「deployステップにおいて、deploy先によって値が異なる環境変数」以外になる。
例えばReact側でバックエンドのURIを REACT_APP_SERVER_URLという環境変数で参照している場合、
DEVELOP_REACT_APP_SERVER_URL：develop環境用
STAGING_REACT_APP_SERVER_URL：staging環境用
PRODUCTION_REACT_APP_SERVER_URL：production環境用
という感じでdeploy先の環境別に環境変数を追加していく。
（環境変数が多くなってくると辛いので、.envの導入を検討したほうがいい気はする）
なお、機密情報の場合は「Secured」にチェックを入れると、文字列がマスクされ、かつパイプラインのログに値が出力されない。
2.Bitbucketにデプロイ環境別の環境変数を設定する
左ペインの「Repository settings」> 「Deployments」を選択。
デフォルトの場合、上から
Test
Staging
Production
が定義されており、それぞれで環境変数を定義することができる。
今回で言うと、デプロイ先のリージョンやバケット名が異なるので、それぞれに定義していく。
定義は手順１と同じで、必要な環境変数を key - value 形式で追加していくだけ。
S3へデプロイするために最低限必要な環境変数は以下の通り。
AWS_DEFAULT_REGION
リージョン（例：ap-northeast-1）
AWS_ACCESS_KEY_ID
アクセスキー
AWS_SECRET_ACCESS_KEY
シークレットキー
S3_BUCKET
デプロイ先のS3バケット名（例：react-s3-bucket）
LOCAL_PATH
ビルドステップで artifacts に指定したディレクトリのパス（例：build）
S3_BUCKET以外は手順1で設定しても問題ない。
もし環境別にIAMユーザーを分けているなどであれば、そのままでもOK。
3.bitbucket-piplines.yml を作成・編集する
とりあえず master ブランチにアクションがあった時（コミットが変動した時）にS3へデプロイされる定義。（切り出すのは面倒なので、検証した時のymlファイルを丸っと貼り付け）
developブランチなどの他ブランチでも基本的には同じ。
definitionsでは開発環境向けの設定を定義しており、masterブランチに変更が発生した場合は既存の定義をオーバーライドする形にしている。
code:bitbucket-pipelines.yml
# This is a sample build configuration for JavaScript.
# Only use spaces to indent your .yml configuration.
# -----
# You can specify a custom docker image from Docker Hub as your build environment.
image: node:12.14.0
definitions:
caches:
yarn: /usr/local/share/.cache/yarn
steps:
- step: &install
name: Install Dependencies
caches:
- node
- yarn
script:
- yarn
- step: &build
name: Create Build
deployment: test
caches:
- node
- yarn
script:
- yarn
- yarn build
artifacts:
- build/**
- step: &deploy-s3
name: Deploy to S3
deployment: test
script:
- pipe: atlassian/aws-s3-deploy:0.4.3
variables:
AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
LOCAL_PATH: $LOCAL_PATH
S3_BUCKET: $S3_BUCKET
# CONTENT_ENCODING: '<string>' # Optional.
# ACL: '<string>' # Optional.
# STORAGE_CLASS: '<string>' # Optional.
# CACHE_CONTROL: '<string>' # Optional.
# EXPIRES: '<timestamp>' # Optional.
# DELETE_FLAG: '<boolean>' # Optional.
# EXTRA_ARGS: '<string>' # Optional.
# DEBUG: '<boolean>' # Optional.
pipelines:
default:
- step: *build
branches:
master:
- step: *install
- step:
<<: *build
name: Build Production
script:
- yarn
- REACT_APP_SERVER_URL=$PRODUCTION_REACT_APP_SERVER_URL yarn build
- step:
<<: *deploy-s3
name: Deploy to S3 production
deployment: production
&deploy-s3に定義している各変数は手順２で設定した環境別の環境変数が使用される。
ビルドステップに関しては REACT_APP_SERVER_URL に本番環境用のURLを突っ込む必要があるため、このような定義にしている。（超ダサいので、なんとかしたい）
なお、Bitbucket側「Production」の環境変数に本番環境用の「REACT_APP_SERVER_URL」を追加して、それを参照できないかと思ったが無理だった。
code:yml
# これはダメ
- step:
<<: *build
name: Build Production
deployment: production
どうやら deploymentの指定は、1つのパイプライン中に1回しか登場させてはいけないっぽい。
今回の場合、deployステップで deployment: productionを指定しているため、定義エラーとなる。
deployment - Deployments ダッシュボードで使用される、デプロイメント ステップの環境タイプを設定します。 有効な値: test、staging、または production。
確かに「デプロイメントステップの環境タイプ」とは書かれているが、制約があるならちゃんと書いて欲しい。
あと、こういう「同じ環境変数名で値だけ切り替えたい」ユースケースってかなり需要あると思うんだけど。。。
Atlassian製品って、なんかこう痒いところに手が届かないことが非常に多い。
4.パイプラインを実行させてデプロイされるか確認する
手動でパイプラインを実行して、S3にデプロイされればOK。
所感
もう少し使い勝手を良くして欲しい、Atlassian。。。