2024年09月17日

Content HubとGitHubを連携して効率化

HubSpot, システム開発, GitHub

はじめに

こんにちは！デジタルエンジニアリング部の老田です。

この記事では、Content Hub、コードエディタ、GitHubの連携について解説します。コードエディタでコードを編集し、GitHubでマージすることで、GitHub Actionsを活用してHubSpotのデザインマネージャーに自動で反映される設定方法を紹介します。

アジアクエストではContent Hubを利用してコーポレートサイトやTechBlogなどのウェブサイトを運営しています。 HubSpotにはデザインマネージャーがあり、HubSpot上でコード管理ができるという利点があります。しかし、コードの修正時に変更前と変更後の差分が表示されないため、レビューが難しいという課題がありました。

そこで今回は、Content Hubのデザインマネージャーとコードエディタ、GitHubを連携させることで、コードエディタでのコード編集、GitHubでのコード管理、そしてHubSpotでのコンテンツ反映を一つのワークフローとして実現する方法を紹介します。

Content Hubについて

Content Hubは、HubSpot社が提供するマーケティング、セールス、サービスを統合したオールインワンプラットフォームのCMS機能の名称です。CMS（Content Management System、コンテンツ管理システム）とは、ウェブサイトのすべてのコンテンツを一元管理できるシステムのことを指します。

HubSpot CLIについて

HubSpot CLI（Command Line Interface）は、HubSpotのAPIを利用してローカル開発環境とHubSpotを接続するためのツールです。主に以下の3つのコマンドを使用します。

upload- ローカルのファイルやディレクトリを手動でHubSpotアカウントにアップロード
```
hs upload <ローカルディレクトリのパス> <HubSpotデザインツールのパス>
```

watch- ローカルディレクトリを監視し、変更があるたびに自動的にHubSpotアカウントにアップロード
```
hs watch <ローカルディレクトリのパス> <HubSpotデザインツールのパス>
```

fetch- HubSpotアカウントからファイルやディレクトリをローカルにダウンロードする
```
hs fetch <HubSpotデザインツールのパス> <ローカルディレクトリのパス>
```

HubSpotとコードエディタの連携

前提条件

開発者サンドボックスアカウントの作成
node.js がインストールされていること
```
node.js
・node v10 以上がサポート対象
```

HubSpot CLIインストールと初期設定

HubSpot CLIをインストール
作業用ディレクトリを作成し、HubSpot CLIをダウンロードします。
```
npm install -g @hubspot/cli
```
任意のディレクトリにのみインストールする場合
```
npm install @hubspot/cli 
```
すでにHubSpot CLIがインストールされていて、最新版にアップグレードする場合
```
npm install -g @hubspot/cli@latest
```
HubSpot CLIをダウンロード後、シェルを再起動します。
```
exec $SHELL -l
```
HubSpotアカウントに接続
```
hs init
```
アカウント認証
1. 「」というメッセージが表示されたら「y」を入力し、Enterキーを押下します。
  HubSpotの「パーソナルアクセスキー | HubSpot」のページに遷移します。
2. 「パーソナルアクセスキーを生成」を押下し、パーソナルアクセスキーを生成します。
  ※ アカウント選択画面が表示された場合は、作成したサンドボックスアカウントを選択し、「このアカウントで続行」を押下すると、「パーソナルアクセスキー | HubSpot」に遷移します。
3. パーソナルアクセスキーを生成後、「表示」「コピー」を押してキーをコピーし、ターミナルに貼り付けます。
  またアカウントに識別用の名前をつけEnterを押すと、アカウント情報がhubspot.config.ymlに追加されます。
```
hs accounts list
```
  を実行すれば認証済みのアカウントを確認できます。
4. HubSpotのデザインマネージャーからコードエディタにフォルダーを取り込む場合は以下のコマンドを実行します。
```
hs fetch <HubSpotデザインツールのパス> <ローカルディレクトリのパス>
```

これでContent Hubとコードエディタの初期設定は完了です。

ローカル環境の構築とGitHubとHubSpotの連携

前提条件

GitHubでリポジトリが作成されていること

コードエディタとGitHubの連携

リポジトリをクローンする
```
git clone <リポジトリ名>
```
リポジトリ下に移動
```
cd <リポジトリ名>
```
ローカルのフォルダーをGitHubリポジトリに移動
パターン1:　ファイルエクスプローラーを使用
フォルダ内の全てのファイル/サブファイルをカットまたはコピーし、クローンしたリポジトリフォルダ内に貼り付けます。
パターン2:　コマンドラインを使用
cp -R <ローカルディレクトリのパス>/* <クローンしたリポジトリのパス>
GitHubリポジトリでシークレットを作成
GitHub Actionsを利用してHubSpotにデプロイする際には、HubSpotのアカウント情報や個人アクセスキーなどの機密情報をセキュアに扱う必要があります。この機密情報を直接コードに含めるのはセキュリティ上のリスクがあるため、GitHubではシークレットとして設定することで、これらの情報を安全に管理し、ワークフロー内で必要なときにのみ使用できるようにします。
1. リポジトリ名の下にある「Settings」をクリック
2. サイドバーの「Security」セクションで「Secrets and variables」を選び、「Actions」をクリック
3. 「Secrets」タブで「New repository secrets」をクリック
4. "Name" フィールドにコンテナの名前を、"Secret" フィールドにシークレットの値を入力
  今回は以下の2つのシークレットを作成します。
  HUBSPOT_PORTAL_ID
  HUBSPOT_PERSONAL_ACCESS_KEY
  HubSpot CLIインストール時に作成されたhubspot.config.ymlファイルから確認可能
5. 「Add secret」をクリックし、シークレットを作成
ローカルに .github/workflows フォルダーを作り、main.ymlファイルを作成

補足

.github/workflows フォルダー　- GitHub Actionsのワークフロー設定ファイルを格納する場所です。

main.yml ファイル- GitHubでのコードのプッシュやマージに応じて実行されるアクションを定義するファイルです。これにより、GitHubリポジトリ内のコード変更が自動的にHubSpotにデプロイされます。

管理するファイルが1つの場合は以下のように記述します。

// github/workflows/main.yaml

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v4

    - name: Remove .github directory  # HubSpotにアップロードする際に.githubフォルダーを削除
      run: rm -rf ./.github/

    - name: Setup Node.js
      uses: actions/setup-node@v4

    - name: HubSpot-Deploy-Action
      uses: HubSpot/hubspot-cms-deploy-action@v1.7
      with:
        src_dir: <ローカルディレクトリのパス>
        dest_dir: <HubSpotデザインツールのパス>
        portal_id: $
        personal_access_key: $

管理するファイルが2つ以上の場合は以下のように記述します。

// github/workflows/main.yaml

on:
  push:
    branches:
      - main

jobs:
  changes:
    runs-on: ubuntu-latest
    outputs:
      folder1: $
      folder2: $
 
    steps:
      - uses: actions/checkout@v4
      - id: filter
        uses: dorny/paths-filter@v2
        with:
          list-files: shell
          filters: |
            <ローカルディレクトリのパス>:
              - '<ローカルディレクトリのパス>/**'
            <ローカルディレクトリのパス>:
              - '<ローカルディレクトリのパス>/**'

  deploy_folder1:
    needs: changes
    if: $false
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: HubSpot Deploy Action for Folder1
        uses: HubSpot/hubspot-cms-deploy-action@v1.7
        with:
          src_dir: '<ローカルディレクトリのパス>'
          dest_dir: '<HubSpotデザインツールのパス>'
          portal_id: $
          personal_access_key: $

  deploy_folder2:
    needs: changes
    if: $false
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: HubSpot Deploy Action for Folder2
        uses: HubSpot/hubspot-cms-deploy-action@v1.7
        with: 
          src_dir: '<ローカルディレクトリのパス>'
          dest_dir: '<HubSpotデザインツールのパス>'
          portal_id: $
          personal_access_key: $