MacBook Airでn8n環境を作ってみた（Docker + Supabase連携）

こっしー

2026年1月15日 05:41

M4 MacBook Airでn8n環境を作ってみた（Docker + Supabase連携）

こんにちは、こっしーです。ご訪問ありがとうございます。

先日から、n8nを使った画像生成の自動化に取り組んでいるんですが、その第一歩として、ローカル環境にn8nをセットアップしてみました。

今回は、Docker DesktopとSupabaseを使って、M4 MacBook Air上にn8n環境を構築した話をしていこうと思います。多少つまずきながらも、なんとか形になったので、その過程を共有できればと思います。

そもそもなぜこの構成にしたのか

n8nは「簡単にセルフホストできますよ」とあちこちのYouTubeで見かけますが、実際に始めてみると「んん？」とつまずく部分がちらほら出てきます。

まずは、n8n単体では動かないということ。ワークフローの定義や実行履歴を保存するために、別途データベースが必要なんです。

n8nはいわゆるフロントエンド（＝ユーザーが操作する画面）で、バックエンド（≒データベース）が無いとデータは保存できませんよっていうことなんですね。

n8nをサブスクで利用している方はサービスの中にデータベースも含まれているので意識する必要はありませんが、セルフホストとは見えない部分の仕組みも自分で構築する事なんだと勉強になりました。

エンジニアの方なら当たり前かもしれませんが、エンジニアじゃない僕にとってはそういう当たり前の知識がないので、普段、利用者が意識しない部分の知識をもっと学ぶ必要があると感じました。

本題に戻りまして、n8n公式ドキュメントを見るとPostgreSQLを推奨していて、じゃあどこで動かそう？と考えたときに、Supabaseが候補に上がりました。

Supabaseというのは、PostgreSQLをベースにしたオープンソースのバックエンドサービスで、よく「Firebase代替」として紹介されています。データベースだけでなく、認証機能やストレージ、リアルタイム機能なども提供していて、開発者にとっては使い勝手がいいんです。何より、無料プランでも十分使えるし、PostgreSQLベースなので信頼性も高い。それに、Supabase自体を触ってみたかったという興味もありました。

そして、n8n本体はDockerを使って動かすらしいです。

そんな感じで、Docker + Supabase という構成で進めてみることにしました。

まずはDocker Desktopをインストール

実は、Dockerを使うのは今回が初めてでした。「コンテナ技術って難しそう」というイメージがあったんですが、いざやってみると思ったよりハードルは低かったです。

Docker公式サイトから、「Download for Mac - Apple Silicon」版をダウンロード。M4 MacBook AirはApple Siliconなので、Intel版ではなくこちらを選びます。

ダウンロードしたDocker.dmgを開いて、DockerアイコンをApplicationsフォルダにドラッグ＆ドロップするだけ。インストール自体は拍子抜けするほど簡単でした。

ApplicationsフォルダからDockerを起動すると、macOSのセキュリティ確認が出るので「開く」をクリック。利用規約に同意して、推奨設定のまま「Finish」を押します。

メニューバーにDockerアイコン（クジラのマーク）が表示されたので、ちゃんと起動しているみたいです。

念のため、ターミナルでdocker --versionとdocker run hello-worldを実行してみたら、Hello from Docker!というメッセージが表示されました。よし、動いてる。

リソース設定については、Docker Desktop > Settings > Resourcesで調整できるんですが、デフォルトのままで十分動いたので、特にいじりませんでした。

次にSupabaseでデータベースを準備

n8nは、ワークフローの定義や実行履歴をデータベースに保存します。

Supabaseにアクセスして、無料プランでサインアップ。新しいプロジェクトを作成します。

プロジェクト名はn8n-data-storeにしました（もちろん任意の名前でOKです）。Database Passwordは、後で使うので必ずメモ。RegionはNortheast Asia (Tokyo)を選びました。日本から使うなら、東京リージョンが一番速いですよね。

で、ここでもポイントが。

Supabaseダッシュボードで、Project Settings > Databaseを開くと、接続情報が表示されるんですが、実は接続モードが2種類あるんです。「Transaction mode」と「Session mode」。

最初、何も考えずに「Transaction mode」の接続情報を使ったら、n8nから接続できませんでした。エラーログを見ても「connect ETIMEDOUT」とだけ表示されて、何が悪いのかよく分からない。

調べてみると、n8nでは「Session mode」の接続情報を使う必要があるとのこと。URLにpooler.supabase.comという文字列が含まれているほうです。

接続情報は以下のような形式で表示されます：

postgres://postgres.[PROJECT_REF]:[YOUR_PASSWORD]@aws-1-ap-northeast-1.pooler.supabase.com:5432/postgres

ここから以下をメモしておきます：

Host: aws-1-ap-northeast-1.pooler.supabase.com
User: postgres.[PROJECT_REF]
Password: プロジェクト作成時に設定したパスワード

プロジェクトディレクトリを作る

ここからが本題です。n8nを動かすための設定ファイルを作っていきます。

まず、作業用のディレクトリを作成しました。

n8nでCanvaへの自動アップロードのワークフローを作りたいので、ディレクトリ名は「n8n-canva-automation」にしています。

mkdir n8n-canva-automation
cd n8n-canva-automation

docker-compose.ymlを作成

Dockerでn8nを起動するには、docker-compose.ymlという設定ファイルが必要です。これがちょっと長いんですが、一つずつ見ていけば難しくはありません。

エディタでdocker-compose.ymlを作成して、以下のように書きました。

services:
  n8n:
    image: n8nio/n8n:latest
    container_name: n8n
    ports:
      - "5678:5678"
    environment:
      # Supabase Database Connection
      - DB_TYPE=postgresdb
      - DB_POSTGRESDB_HOST=${DB_POSTGRESDB_HOST}
      - DB_POSTGRESDB_PORT=${DB_POSTGRESDB_PORT}
      - DB_POSTGRESDB_DATABASE=${DB_POSTGRESDB_DATABASE}
      - DB_POSTGRESDB_USER=${DB_POSTGRESDB_USER}
      - DB_POSTGRESDB_PASSWORD=${DB_POSTGRESDB_PASSWORD}
      - DB_POSTGRESDB_SCHEMA=public

      # SSL Configuration (Required for Supabase)
      - DB_POSTGRESDB_SSL_ENABLED=true
      - DB_POSTGRESDB_SSL_REJECT_UNAUTHORIZED=false

      # Force IPv4 (disable IPv6)
      - NODE_OPTIONS=--dns-result-order=ipv4first

      # n8n Basic Configuration
      - N8N_HOST=localhost
      - N8N_PORT=5678
      - N8N_PROTOCOL=http

      # Basic Authentication
      - N8N_BASIC_AUTH_ACTIVE=true
      - N8N_BASIC_AUTH_USER=${N8N_BASIC_AUTH_USER}
      - N8N_BASIC_AUTH_PASSWORD=${N8N_BASIC_AUTH_PASSWORD}

      # Security Settings (Safari対応)
      - N8N_SECURE_COOKIE=${N8N_SECURE_COOKIE}

      # Allow environment variable access in nodes
      - N8N_BLOCK_ENV_ACCESS_IN_NODE=false

      # Timezone
      - GENERIC_TIMEZONE=Asia/Tokyo
      - TZ=Asia/Tokyo

    volumes:
      - n8n_data:/home/node/.n8n
      - ./shared-images:/shared-images

    restart: unless-stopped

volumes:
  n8n_data:

.envファイルで環境変数を設定

docker-compose.ymlには環境変数がたくさん出てくるので、それらを.envファイルにまとめておきます。こうすることで、パスワードなどの機密情報をコードから分離できます。

エディタで.envを作成して、先ほどメモしたSupabaseの接続情報を記述しました。

# Supabase Database Configuration (Supavisor Session Mode)
DB_POSTGRESDB_HOST=aws-1-ap-northeast-1.pooler.supabase.com
DB_POSTGRESDB_PORT=5432
DB_POSTGRESDB_DATABASE=postgres
DB_POSTGRESDB_USER=postgres.ecimxpfzjqbbibgmtejn
DB_POSTGRESDB_PASSWORD=YOUR_ACTUAL_SUPABASE_PASSWORD  # ← 実際のパスワードに置き換える

# n8n Basic Auth Configuration
N8N_BASIC_AUTH_USER=admin
N8N_BASIC_AUTH_PASSWORD=YOUR_N8N_PASSWORD  # ← n8nログイン用のパスワードを設定

# Safari対応: Secure Cookie無効化(ローカル開発環境用)
N8N_SECURE_COOKIE=false

DB_POSTGRESDB_PASSWORDには、Supabaseプロジェクト作成時に設定したパスワードを入れます。N8N_BASIC_AUTH_PASSWORDは、n8nにログインするときのパスワードなので、好きなものを設定してOKです。

ちなみに、N8N_SECURE_COOKIE=falseという設定は、後で説明しますが、Safariでログインするときに必要でした。

画像用のディレクトリも作成

n8nワークフローで画像ファイルを扱う予定なので、shared-imagesというディレクトリも作っておきました。

mkdir shared-images

いよいよn8nを起動

準備が整ったので、n8nコンテナを起動してみます。

docker compose up -d

-dオプションを付けると、バックグラウンドで実行されます。

ログを確認してみると、

docker compose logs -f n8n

しばらく待つと、こんなメッセージが表示されました。

n8n  | Editor is now accessible via:
n8n  | http://localhost:5678/

よし、起動した！と思ったんですが、ここでまた問題発生。

初回起動時は、Supabaseへの接続と、n8nが使うテーブルの自動作成が行われるんですが、これが数十秒かかります。焦って何度もブラウザをリロードしたら、逆に接続が不安定になってしまいました。気長に待つのが正解でした。

ブラウザでアクセスしてみる

ブラウザでhttp://localhost:5678を開くと、n8nのログイン画面が表示されました。

.envで設定した以下の情報でログインします。

Username: admin
Password: .envのN8N_BASIC_AUTH_PASSWORDで設定した値

ここで、また問題が。

Safariでログインが出来ません。僕が普段使っているBraveブラウザだとログイン出来ます。何で？

調べてみると、SafariのCookie設定が原因でした。ローカル環境（http://localhost）では、デフォルトの設定だとCookieがうまく保存されないらしい。

そこで、.envファイルにN8N_SECURE_COOKIE=falseを追加して、コンテナを再起動。

docker compose down
docker compose up -d

これで、無事にログインできました。Safariユーザーの方は大事なポイントなので覚えておいてください。

Supabaseを見てみる

SupabaseダッシュボードのTable Editorを開くと、n8nが使うテーブルが自動で作成されていました。

execution_entity: ワークフロー実行履歴
workflow_entity: ワークフロー定義
credentials_entity: 認証情報
tag_entity: タグ情報

など、いくつかのテーブルができています。これらにn8nのデータが保存されるんですね。自動でテーブルが作られるのは便利です。

動作確認：簡単なワークフローを作ってみる

n8nにログインしたら、まずは簡単なワークフローを作ってみます。

「Create new workflow」をクリックして、左側のノードパネルから「Manual」トリガーを選択。「Execute Workflow」をクリックしてテスト実行してみました。

動きました。シンプルですが、ちゃんと動いていることが確認できました。

ワークフローを保存（名前はTest Workflowにしました)して、SupabaseダッシュボードのTable Editor > workflow_entityを開いてみると、Test Workflowのレコードが作成されていました。

ちゃんとSupabaseにデータが保存されています。これで、環境構築は完了です。

ハマったポイント（トラブルシューティング）

構築中にいくつかエラーに遭遇したので、同じところでハマる人のために記録しておきます。

データベース接続エラー

最初に遭遇したのがこれ。

Error: connect ETIMEDOUT

こんなエラーが出たら、Supabaseのパスワードが間違っているか、ホスト名が間違っている可能性があります。

私の場合は、「Transaction mode」の接続情報を使っていたのが原因でした。「Session mode」の接続情報（pooler.supabase.comが含まれているもの）に切り替えたら、すんなり接続できました。

.envファイルを修正したら、コンテナを再起動します。

docker compose down
docker compose up -d

Safariでログインできない

先ほども書きましたが、Safariでログイン出来ない現象が起きました。

これは、SafariのCookie設定が原因でした。.envファイルにN8N_SECURE_COOKIE=falseを追加することで解決しました。ローカル環境でのみ発生する問題なので、本番環境では設定を変える必要があります。

まとめ

多少つまずきながらも、なんとかn8nのローカル環境が構築できました。

特に、Supabaseの接続モード（Session mode vs Transaction mode）やSafariのCookie問題は、ドキュメントにも詳しく書かれていなかったので、解決に時間がかかりました。でも、逆に言えば、これらのポイントさえ押さえておけば、スムーズに構築できるはずです。

Docker + Supabase という構成にしたことで、データベースの管理を気にせずに済んだのが良かったです。Supabaseの無料プランでも十分使えますし、n8nのワークフローデータをクラウドに保存できるので、安心感があります。

次は、このn8n環境を使って、Canva APIやGoogle Gemini APIを組み合わせた画像生成の自動化ワークフローを作っていきます。

また別の記事で詳しく書きますね。

ここまでお読みいただきありがとうございました。
また次の記事でお会いしましょう。
それじゃまたね、ばいばいっ！