AWS CodeBuildとBugsnagを活用したバージョン管理とセキュアなエラートラッキング設定

2024-10-28

中野渡卓也

概要

本記事では、BugSnagにAWS CodeBuildのバージョン情報を渡すことで、どのバージョンで発生した不具合かを特定しやすくする方法について解説します。CodeBuildのビルドIDを活用して、エラー発生時のバージョン追跡を簡単にし、効率的なデバッグを実現します。

具体的には、CodeBuildのビルドIDをDocker環境とNext.jsアプリケーションに渡し、Bugsnagと統合する手順を詳しく説明します。また、ソースマップを公開せず、BugsnagにのみアップロードするためのWebpackの設定についても説明します。

CodeBuild IDのDockerコンテナへの引き渡し

AWS CodeBuildで自動的に生成されるビルドIDをDockerコンテナに渡す方法です。このビルドIDは、最終的にBugsnagでエラーレポートを識別する際に使用されます。


docker build --build-arg CODEBUILD_BUILD_ID=$CODEBUILD_BUILD_ID -t $IMAGE_REPO_NAME:latest -f Dockerfile .

次に、ビルド時に渡されたCodeBuild IDをDockerfile内で使えるようにします。


ARG CODEBUILD_BUILD_ID
ENV CODEBUILD_BUILD_ID $CODEBUILD_BUILD_ID

RUN yarn install --production
RUN yarn build

‍

Next.jsでCodeBuild IDを環境変数として使用

次に、CodeBuild IDをNext.jsアプリケーションで環境変数として定義し、ビルドプロセスに組み込みます。この設定により、エラートラッキング時に正確なバージョン情報が伝達されます。


export NEXT_PUBLIC_CODEBUILD_ID=${CODEBUILD_BUILD_ID}

yarn install
yarn next build

WebpackとBugsnagの統合

Bugsnagのソースマップを自動アップロードし、エラー発生時にどのバージョンで問題が発生したかを確認できるようにするため、webpack-bugsnag-pluginsをインストールし、Next.jsの設定に組み込みます。


yarn add webpack-bugsnag-plugins

次に、next.config.jsファイルでBugsnagの設定を行います。ここでCodeBuild IDをバージョンとして設定します。また、rewrites設定を利用して、公開資材には.mapファイルを含めないようにリダイレクトを設定します。


const { BugsnagSourceMapUploaderPlugin } = require("webpack-bugsnag-plugins");
const nextConfig = {
  productionBrowserSourceMaps: true,
  webpack: (config) => {
    config.plugins.push(
      new BugsnagSourceMapUploaderPlugin({
        apiKey: process.env.NEXT_PUBLIC_BUGSNAG_API_KEY,
        appVersion: process.env.NEXT_PUBLIC_CODEBUILD_ID,
        overwrite: true,
        publicPath: "*/",
      })
    );

    return config;
  },
  // .mapファイルを見れなくする
  rewrites() {
    return {
      beforeFiles: [
        {
          source: "/:path*.map",
          destination: "/not-found",
        },
      ],
    };
  },
};

この設定により、Bugsnagにアップロードされたソースマップを使用してエラーの詳細を追跡できる一方で、一般公開されるアプリケーションではソースマップのアクセスに制限があるため、セキュリティを保つことができます。

Bugsnagのエラー追跡設定

Bugsnagのエラーハンドリングを、Next.jsアプリケーション内で実行する際の設定方法です。CodeBuild IDを利用してエラートラッキングのバージョン情報を管理します。

ErrorBoundary.client.tsxに以下のコードを追加してBugsnagを初期化します。


import Bugsnag from "@bugsnag/js";
import BugsnagPluginReact from "@bugsnag/plugin-react";

Bugsnag.start({
  apiKey: process.env.NEXT_PUBLIC_BUGSNAG_API_KEY,
  // next.config.jsで指定したversionと同じversionを指定
  appVersion: process.env.NEXT_PUBLIC_CODEBUILD_ID,
  plugins: [new BugsnagPluginReact()],
  releaseStage: process.env.NEXT_PUBLIC_BUGSNAG_STAGE,
});

これにより、CodeBuildのバージョンがBugsnagのエラーレポートで追跡されるようになります。

おわりに

本記事では、BugSnagにAWS CodeBuildのバージョン情報を渡す方法を紹介しました。この手順により、エラー発生時にどのビルドで問題が起きたかを明確に把握できるため、デバッグ作業が効率化されます。また、rewritesの設定により、セキュリティを維持しつつ、効果的なエラートラッキングが可能となります。

‍

株式会社Grandreamでは、フルリモートであなたのスキルを活かし、活躍できるエンジニアを募集しております。詳しくは採用ページをご確認いただき、お気軽にお問い合わせください。

株式会社グランドリームでは、AWSを駆使した開発からUI/UXデザインまで、Webアプリケーションに関するすべての要望に応えます。
まずは一度お気軽にご相談ください。

お問い合わせはこちら