0
0

Bitbucket Pipelinesで環境ごとの設定

Last updated at Posted at 2023-12-23

この記事について

この記事はBitbucket pipelineのymlの設定の中で、環境ごとに自動デプロイする仕組みを解説しています。
今回はReactアプリを使用してs3にアップロードします。

前提条件

  • 前提条件としてS3にバケットが存在すること
  • Bitbucketにリポジトリーが存在すること

Bitbucketのリポジトリの設定

パイプラインの有効化

まずはデプロイ対象のリポジトリの「Repository Setting」 → 「設定」の中にチェックがあるので押して有効にします。
有効にすると「このリポジトリはパイプラインを利用する」という設定が完了します。

スクリーンショット 2023-12-21 11.38.13.png

クレデンシャルの設定

次に環境ごとのクレデンシャルの設定を行います。
下記3つの環境に分けてs3のクレデンシャル情報を設定しています。
※環境ごとのs3のバケットが必要です。

  • 今回設定した環境
    Test : テスト環境
    Stagings:ステージング環境
    Production:本番環境

スクリーンショット 2023-12-21 11.52.12.png

  • Test環境のクレデンシャルの例
    環境ごとのクレデンシャル情報を設定しておく。
    スクリーンショット 2023-12-23 11.45.01.png

bitbucket-pipelines.ymlの設定

ルートディレクトリ直下にbitbucket-pipelines.ymlを作成。
以下はnode.jsを使用した設定例です。

image: node:16.15.1

pipelines: 
  branches: 
    develop:
      - step:
          deployment: staging
          name: "Deploy to staging"
          script:
            - yarn install
            - yarn run build
            - aws s3 sync build/ s3://$S3_BUCKET --delete

    master:
      - step:
          deployment: production
          name: "Deploy to Production"
          script:
            - yarn install
            - yarn run build
            - aws s3 sync build/ s3://$S3_BUCKET --delete
  custom:
    feature/*:
      - step:
          deployment: Test
          name: "Deploy to Test"
          script:
            - yarn install
            - yarn run build
            - aws s3 sync build/ s3://$S3_BUCKET --delete

順に解説していきます。

  • 「branches」の中でブランチ(デプロイしたい環境)ごとにstepを分けていきます。
    ここでは「develop」「master」「feature/*」で分けていて、対象ブランチをpushまたはマージのタイミングでstepの処理が走ります。
  • 「deployment: staging」 ← は先ほどBitbucketに設定した環境名を書いてあげれば(この例ではstaging)クレデンシャル情報を参照します。環境名を書くだけで値を参照してくれるので処理が簡潔になります。
  • 「script:」 ← ビルドコマンドとs3にビルドファイルをアップロードするコマンドを書いて終了です。

まとめ

node.jsでのymlの設定をメインに書きましたが、他の言語でも同じように設定することができるのでCI/CDについて触れてみたい方は参考にしてください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0