今回のゴール
独自ドメインでhttpsアクセスするとSupabase Studioが表示される。
例:https://aaa.etolog.jp みたいな(適当なので、アクセスしても何も出ません)
はじめに
最近バックエンドの勉強をしたいなーと思っていた
過去にRenderを使ってバックエンドを構築したが、結局複数プロジェクトを作るとなると無料枠を超えそうだし
何より15分くらいしたら、サーバがアイドル状態になるのが嫌だった(無料だから文句をいう筋合いはないが…)
調べてみるとなんとXserver Vpsが2025年の7月から、無料で使えるお試しプランができているではないか!
元々このブログと、別ブログがXserverで構築していたので
Xserver VPSにブログも移行してしまえば、ブログ運営+バックエンド開発できるじゃん！ということに気づいたので
試しに契約して使ってみた。
手始めとして、バックエンドを自分で実装するよりはBassで構築されたものを試したいなと思った。
その時Supabaseはセルフホスティングできると知ったので、すでに持っている独自ドメインのサブドメインを使って構築することにした。
システム概要
今回は独自ドメイン(サブドメイン)をSSL化して、そのURLにアクセスするとNginxがVPSサーバ内のDockerで構築している
Supabaseにアクセスするという構築にした。
こうすることで、今後Dockerコンテナを増やしてNginxでホスティングすることで他のサービス(WordPressやオリジナルバックエンド等)も使える
拡張性を持っているからだ。
XserverVPN の用意
今回はお試しなので無料プランを利用する
以下から、4GBの無料プランを契約する。
OSは今回はUbuntu 25.04で構築している
ちなみに、今回はSSHで作業をするので設定を忘れないこと
また、今回はSSHとWebからのアクセスを行う必要があるのでパケットフィルター設定から
WebとSSHの設定を有効化しておく必要がある。
構築が終わったら、VPS管理画面からサーバのIPアドレスがどうなっているか確認する
独自ドメインの準備
この設定はDNSの反映に最大72時間かかるので、とりあえずこの項目だけは先にやっておくことを進める
自分は元々お名前ドットコムで、独自ドメインを取得していたので
DNSレコードにサブドメインの追加をするだけだった。
もし、独自ドメインを取得するところから目指すなら以下を参考にすれば問題ないと思う。
地味に引っかかったのは、DNSサーバをXserverにしていたのでお名前ドットコムで設定するのではなく
XServerのサーバ管理->DNSレコード設定 を選ぶことだった
ちなみに、XserverVPSの管理パネルではなくXserverのサーバ管理から行う必要があるのが要注意だ。
DNSレコードはType Aとして値はXServer VPSのIPアドレスを指定すればOK
設定が反映されるまでには最大72時間程度掛かる可能性があるため、気長に待つべし
パッケージ類の用意
前章で設定したsshでVPSにまずはログインする。
ログイン後は、今回必要なパッケージ類をインストールする。
# パッケージ更新
sudo apt update && sudo apt upgrade -y
# 必要なツールのインストール
sudo apt install -y git curl certbot python3-certbot-nginx
Dockerの構築
Dockerで環境するため、環境を作る。
# Docker公式のインストールスクリプトを使用
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
# Docker Compose の確認
docker compose version
Supabaseの設定
さてここからが本題、Supabaseの環境を導入していく
基本的には以下を参考に作っていく
リポジトリのインストール
# リポジトリのクローン
git clone --depth 1 https://github.com/supabase/supabase
設定
Supabaseの環境周りを修正する
まずは、以下の手順で環境ファイルのテンプレをコピーする
cd supabase/docker
# 設定ファイルのコピー
cp .env.example .env
.envファイルの項目を修正していく。
DASHBOARD_USERNAME
DASHBOARD_USERNAME はWebからSupabase Studioの管理画面にアクセスするときに必要になるユーザID
DASHBOARD_USERNAME: username for Studio / dashboard
Studio authentication
DASHBOARD_PASSWORD
DASHBOARD_PASSWORD はWebからSupabaseStudioの管理画面にアクセスするときに必要になるパスワード
DASHBOARD_PASSWORD: password for Studio / dashboard
Studio authentication
JWT_SECRET
JWT_SECRETはJWT（署名付きトークン）に「本物の署名」をするための秘密鍵らしい。
そのため、外部には絶対に漏らさないように注意
JWT_SECRET: Used by PostgREST and GoTrue to sign and verify JWTs.
code.
Generate and configure API keys
以下コマンドで作成したkeyを貼り付ければOK
openssl rand -base64 32
ANON_KEY
ANON_KEYはクライアント側から認証をするときに使用する鍵になる。
ANON_KEY: Client-side API key with limited permissions (anon role). Use this in your frontend applications.
Generate and configure API keys
JWT_SECRETを使って鍵を生成する今回は以下のjwt.ioと使って作成する
サイトへ飛んだら JWT Encoder を選択する、選択後は必要な情報を入力する必要があるので下記に例を乗せる
Headerは以下
{
"alg": "HS256",
"typ": "JWT"
}
Payloadは以下
{
"role": "anon_key",
"iss": "supabase",
"iat": 1700000000,
"exp": 1890000000
}
SignはJWT_SECRETを入力する。
上記を記入するとJSON Web Tokenが生成されるので、コピーしてANON_KEYにコピーする
SERVICE_ROLE_KEY
SERVICE_ROLE_KEYはバックエンドから認証をするときに使用する鍵になる。
SERVICE_ROLE_KEY: Server-side API key with full database access (service_role role). Never expose this in client code.
Generate and configure API keys
どういうことなんだ?と思っていたが、これが正しくないとSupabaseStudioから認証ユーザ作れなかったりしたから
鍵が違うとサーバ側での処理に不都合が出るようだ
JWT_SECRETを使って鍵を生成する今回は以下のjwt.ioと使って作成する
サイトへ飛んだら JWT Encoder を選択する、選択後は必要な情報を入力する必要があるので下記に例を乗せる
Headerは以下
{
"alg": "HS256",
"typ": "JWT"
}
Payloadは以下
{
"role": "service_role",
"iss": "supabase",
"iat": 1700000000,
"exp": 1890000000
}
SignはJWT_SECRETを入力する。
上記を記入するとJSON Web Tokenが生成されるので、コピーしてSERVICE_ROLE_KEYにコピーする
SITE_URL
SITE_URLはSupabaseを紐づける独自ドメインを指定する(今回だとhttps://aaa.etolog.jp)
POSTGRES_PASSWORD
POSTGRES_PASSWORD は今後Supabase内で管理するDBのパスワードを設定する。
POSTGRES_PASSWORD: the password for the postgres and supabase_admin database roles
Configure database password
Nginxの設定
今回は、Supabaseはhttp://localhost:8080で動作をさせる。
そのため、ユーザは直接Supabase StudioにアクセスするわけではなくWebサーバを経由してアクセスするようにする。
今回はNginxを使用する
Supabaseは標準で 8000番ポートを使用するたね、443番 (HTTPS) で受けられるように設定も行う必要がある。
インストール
まずはNginxをインストールする
sudo apt install -y nginx
設定
インストール完了後は /etc/nginx/sites-available/supabase を作成して
以下の内容を貼り付けて保存する。(aaa.etolog.jpは各自のドメインに置き換えること)
server {
listen 80;
server_name aaa.etolog.jp;
location / {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}有効化
以下コマンドで、設定を有効化してNginxを起動する
sudo ln -s /etc/nginx/sites-available/supabase /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginxSSL証明書の取得 (Certbot)
アクセス先をhttpではなくhttpsにするためにSSL証明を取得する。
以下コマンドで、SSL証明の取得をおこなう。
sudo certbot --nginx -d etolog.spabase.com
対話形式でメールアドレスなどを入力し、SSL化を完了させる。
これで Nginx の設定が自動的に HTTPS 対応に書き換えられる。
動作確認
ここまでの環境構築でいよいよSupabaseが起動できるはず!
準備が整ったので、Dockerコンテナを起動します。
cd ~/supabase/docker
sudo docker compose up -dすべてのコンテナが running になったら完了
ブラウザで 設定したドメインにアクセスする(例:https://aaa.etolog.jp)
アクセス時にID、Passwordを聞かれるのでDASHBOARD_USERNAME,DASHBOARD_PASSWORD で設定した値を入力する
アクセスできたら成功!
最後に
ここまでで、Supabaseが使えるようになったはず。
自分はDNSの設定を間違えて、苦戦したので気をつけてほしい。
次回は、webアプリで実際にログインとDBの操作を行えるようなものを作成して
動作確認を行う方法を掲載予定
コメント