Skip to main content

管理パネルのデプロイ

AI Marketerのフロントエンド部分は「管理パネル」と呼ばれます。管理パネルはグラフィカルユーザーインターフェイスを提供し、アプリケーションのフロントエンドでAI MarketerのContent APIを通じてアクセスできるコンテンツを構築・管理するのに役立ちます。

管理パネルはReactベースのシングルページアプリケーションで、AI Marketerアプリケーションのすべての機能とインストールされたプラグインをカプセル化しています。

AI MarketerのバックエンドサーバーはContent APIを提供し、コンテンツにアクセスするためのエンドポイントを提供します。

デフォルトでは、バックエンドサーバーと管理パネルサーバーは同じサーバー上にデプロイされます。しかし、管理パネルとバックエンドサーバーは独立しており、異なるサーバーにデプロイすることも可能です。このため、次のような異なるシナリオが考えられます。

  • プロジェクト全体を同じサーバーにデプロイする。
  • 管理パネルをAPIサーバーとは異なるサーバー（AWS S3、Azureなど）にデプロイする。

ケースごとにビルド設定が異なります。

デプロイ前に、プロジェクトのルートディレクトリで次のコマンドを実行して管理パネルをビルドする必要があります。

yarn build

これにより、./buildフォルダの内容が置き換えられます。http://localhost:1337/adminにアクセスして、カスタマイズが反映されているか確認してください。

同じサーバー​

管理パネルとAI Marketerのバックエンド(API)を同じサーバーにデプロイすることはデフォルトの動作です。ビルド設定は自動的に行われます。サーバーは指定されたポートで起動し、管理パネルはhttp://yourdomain.com:1337/adminでアクセス可能になります。

💡 Tip

管理パネルへのアクセスパスを変更することも可能です。

異なるサーバー​

管理パネルとAI Marketerのバックエンド(API)を異なるサーバーにデプロイするには、次の設定を使用します。

./config/server.js
module.exports = ({ env }) => ({
  host: env("HOST", "0.0.0.0"),
  port: env.int("PORT", 1337),
  url: "http://yourbackend.com",
});
./config/admin.js
module.exports = ({ env }) => ({
  /**
   * 注意: 管理パネルはドメインのルートからアクセス可能です 
   * (例: http://yourfrontend.com/)
   */ 
  url: "/",
  serveAdminPanel: false, // http://yourbackend.com は管理パネルの静的ファイルを提供しません
});

この設定でyarn buildを実行すると、buildフォルダが作成または上書きされます。このフォルダを使用して、別のサーバーから任意のドメイン（例: http://yourfrontend.com）で提供します。

管理パネルのURLはhttp://yourfrontend.comとなり、パネルからのすべてのリクエストはhttp://yourbackend.comのバックエンドに送信されます。

✏️ Note

urlオプションにパスを追加しても、アプリケーションのプレフィックスにはなりません。これを実現するには、Nginxなどのプロキシサーバーを使用します（オプションのソフトウェアデプロイガイドを参照してください）。