テーブルの作成

SQL Editorなどを利用

参考

https://supabase.com/docs/guides/getting-started/quickstarts/nextjs

• ↑の1

APIキーの準備

• Project Settings -> API の 「Project URL」と「Project API keys（anon public）」を利用
• アプリケーションのルートディレクトリへ .env.local を作成して、環境変数に↑を設定

Packageの追加

• 以下のパッケージを追加

1
2

"@supabase/auth-helpers-nextjs"
"@supabase/supabase-js"

データ参照コードの実装

• https://supabase.com/docs/guides/getting-started/quickstarts/nextjs
• ↑の4

その他

• RLS（Row Level Security）が有効だと参照できない（空配列が返戻される）
• 一旦、Read権限のみのポリシーを作成してテーブルへ設定

前提

• WSL2でUbuntu使ってる
• Ubuntu上に開発環境がある

問題事象

• あるときからターミナルを起動すると以下のメッセージが出るようになった（原因は分からなかった）

1
2
3
4

Cannot open Local
Failed to start [\\wsl$\Ubuntu\usr\bin\bash, --rcfile, ・・・・・

See IDE log (Help | Show Log in Explorer) for the details.

これまでは・・・

• どうもwslのデフォルトシェル（/bin/bash）が起動していたっぽい
• この時、ログインユーザの.bashrcは適用されていない

さらにその前

• /bin/bashが起動していたと思う
• ログインユーザの.bashrcが適用されていた

なにか変えた？

• Windows Updateしたり、PhpStorm を Update したりはしてた
• 直接、PhpStormのSettingを変更した記憶はございません

修正前の設定値

• SettingsのTools->Terminalを開くと・・・

Shell Pathの設定値

1

\\wsl$\Ubuntu\usr\bin\bash

Start Directoryの設定値

\\wsl$\Ubuntu\home\　配下のディレクトリ

直し方

• SettingsのTools->Terminalを開く

Shell Pathの設定値

• 以下に変更する

1

wsl.exe -d ubuntu bash

補足

• 以下だと.bashrcが適用されない

1

wsl.exe -d ubuntu

参考

• https://www.jetbrains.com/help/idea/how-to-use-wsl-development-environment-in-product.html#wsl-terminal
• wslコマンドのヘルプ（コマンドプロンプトやPower Shellでwsl.exe --help）

自分の中での結論

• ローカル環境ではsupabase.auth.signUpメソッドでユーザ登録できない？
  • ローカル環境ではSupabaseのWebコンソールからユーザ追加すれば良いってこと？
• 本番環境へデプロイしたらユーザ登録できた（メールアドレスの確認メールも送付された）

やってたこと

• この辺を見ながらメール認証コード機能を作成していた
• ローカルのSupabaseコンソールから直接、ユーザを追加してSign Inするのはできたけど、Sign Upができなかった
• Auth API（supabase.auth.signUpメソッドで呼ばれるSupabaseのAPI）の返戻（エラーメッセージ）は以下

Auth APIの返戻

1

PKCE flow is not supported on signups with autoconfirm enabled

調べてみたこと

そもそもPKCE flow？

• クライアントシークレットを安全に保管することが難しいアプリケーション（ネイティブアプリケーションやSPAなど）で使用される認証フロー
• コードをコピペしてただけなのでPKCE flowなのかも良く分からない

autoconfirm？

• 本番環境用のSupabaseではAuth Providersの設定ページで「Confirm email」のOn/Offができる
• ローカル環境のSupabaseにはAuth Providersの設定ページがそもそもない

ローカル環境だからじゃ？

• 本番環境へデプロイしたらユーザ登録できた（メールアドレスの確認メールも送付された）

ブラウザのコンソールに出てたエラーメッセージ

1

ERR_NAME_NOT_RESOLVED

1

failed to fetch

何が間違ってたか？

• SupabaseのProject URLとProject Keyが間違ってました

ローカル環境構築は？

• ローカルDockerのNodeコンテナでサンプルアプリを動かす

ホスト側ディレクトリ構成

• ServiceName
  • docker
    • docker-compose.yml
  • next
    • app
    • public
    • package.json

docker-compose.yml

1
2
3
4
5
6
7
8
9
10
11
12

services:
  node:
    image: node:18
    container_name: node
    volumes:
      - ../next:/home/node/app
    working_dir: /home/node/app
    user:
      node
    ports:
      - 3000:3000
    entrypoint: tail -f /dev/null

git clone してくる

• ServiceNameディレクトリ直下へnextという名前でアプリケーションリポジトリをcloneしてくる

コンテナ起動

1

docker compose up -d

コンテナログイン

1

docker compose exec --user node node bash

パッケージインストール

ホスト側からの場合

1

docker compose exec --user node node yarn install

コンテナログイン後の場合

1

yarn install

Nextアプリ起動

ホスト側からの場合

1

docker compose exec --user node node yarn dev

コンテナログイン後の場合

1

yarn dev

PKCE flow？

• クライアントシークレットを安全に保管することが難しいアプリケーション（ネイティブアプリケーションやSPAなど）で使用される認証フロー
• PKCE flowを使用するとクライアントアプリケーションの正当性を示すことができる（認可サーバ側からすると正当性を確認することができる）
• PK（Proof key）の一部であるcode verifierとcode challengeを使用する
• code challengeはcode verifierのハッシュ値
• クライアントアプリケーションで生成したcode verifierとcode challengeを元に認可サーバでリクエストの正当性を検証する
• PKCEフローの前半で認可サーバから受け取る「認可コード」が最終的に「アクセストークン」に交換される（Code Exchange）
• Code ExchangeのためにProof keyを使用するのでPKCE（Proof Key for Code Exchange）

手順

1. https://vercel.com/docs/frameworks/nextjs#getting-started の「Getting started」から「Deploy」する
2. 遷移したページの「Create Git Repository」にてリポジトリ名（サービス名やアプリケーション名など）を入力して「Create」ボタンを押す

（補足）

GitHubなどのGit ProviderへのログインやVercelのアカウント作成を事前に済ませておくと↑だけで済む

何が起きているか？

1. Next.jsサンプルアプリのソースコードが自分のリポジトリへCloneされる
2. Cloneされたソースコードを元にアプリケーションがビルドされる
3. ビルドされたアプリケーションがVercelへデプロイされる

次にやることは？

あとはサンプルアプリのTOPページに書いてある通り、app/page.jsを編集すれば良いだけ

brewインストール

https://docs.brew.sh/Homebrew-on-Linux

Supabase CLIインストール

1
2

brew install supabase/tap/supabase
brew upgrade supabase

Supabaseの起動

https://supabase.com/docs/guides/getting-started/local-development

Githubでリポジトリ作成

ローカルでのgit init

ローカルの対象ディレクトリへ遷移して以下を実行

1

git init -b main

（↑でエラーになるならgitのバージョンが古いので以下）

1

git init && git symbolic-ref HEAD refs/heads/main

リモートリポジトリの追加

1

git remote add origin <REMOTE_URL>

リモートリポジトリへPush

1

git push -u origin main

例

• 以下のようなコミット履歴
• e5d9f7a4b3c2a1e9f8d7c6b5a4e3d2f1e0d9c8b7a6 で2ファイル修正
• file1.txtだけ元に戻したい

1
2
3
4
5
6
7

HEAD
|
a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c
|
e5d9f7a4b3c2a1e9f8d7c6b5a4e3d2f1e0d9c8b7a6
    change file1.txt
    change file2.txt

方法

1

git checkout e5d9f7a4b3c2a1e9f8d7c6b5a4e3d2f1e0d9c8b7a6^ file1.txt

解説

ハッシュ値の後にキャレット（^）をつけているのは、1つ前のコミット（変更前のコミット）のファイルをチェックアウトするため