SupabaseとSveletKitによる認証(第1報)—開発環境設定

プロジェクトプリアンブル

私は貿易によってウェブ開発者ではありません、私の日の仕事は私のオープンソースのテレコムプロジェクトで離れてハッキングから成ります.しかし、私は常にreddit、lobsteのような私自身のリンクアグリゲーターサイトを構築したかった.RSとHackernewsしかし、それをするために、私はプロジェクトを何度もあらゆるウェブフレームワークで数年おきに開始するサイクルに巻き込まれました.それは主に悪い習慣であり、おそらく怠惰でもある.時々、自己sabatogeの一種のような感じがします.
しかし、それにもかかわらず、私はすべて私の後ろに置く.私はそれがすべてのプロジェクトで私にそんなに多くのレバレッジを与えるツールであるので、私はPostgreSQLについて私ができるすべてを学ぶしようとしてキックを得た.そしてそれは私にPostgrestを見つけることにつながった.男、クールな製品.それはあなたがあなたのためにすべてをやっているように感じることがない場所に十分な最小限ですが、それは難しいことをはるかに簡単になります.私たちが見るように、認証である1つの例.
SupabaseはWebフレームワークではありません.それは非常にうまく一緒に結ばsupabaseです.下記を参照
collection of great open source projects
私は、異なる時間で反応、Vue、およびsvelteでまわりで混乱しました.ちょうど彼らと一緒に遊んで.何も深刻な.そして、Sababaseのように、Sababaseはタフなものをより簡単にするためにちょうど十分な魔法を持っているようでした、しかし、私が私が「プロジェクトLockin」を得ていなかったように感じたほど最小限でした.

TLドクター

ウェブ開発者ではない.何を使用するツールを知らなかった. とsupabase両方とも好きだった.それらを選択します.
私は、sveltekitとsupabaseに関して徹底的に行っていません.あなたは両方の自分とダイビングを見ることができます.私は、私がこれらのツールで働くことをできるだけはっきりと文書化しようとしているだけです.

スベテキット キャディサーバに関する注意

このチュートリアルでは、ローカル開発環境をより簡単にするために を使用します.そして、私は、構成が生産配備のために働くと思います.

キャディーサーバ 始める

始めるには、以下のツールが必要になります.

のDocker

ノード.JPM/NPM(または 、それをチェックアウトします.それはかなりクールです)

キャディーサーバ

私はあなたの環境のためにツールをインストールするままにします.私はあなたが十分に精通しているか、十分に経験したと仮定しています(または十分に決定されます)あなた自身で働くツールを得るために.あなたが助けをしたい場合は、私にメールすることができます.私は最善を尽くして反応します.

京大理 Sveltekitプロジェクトのビルド

新しいSveletKitプロジェクトを構築する

npm init svelte@next supabase-auth-example
cd supabase-auth-example
npm install

デフォルトポートの変更

Supabkit Studioのアプリは、SveletKitのデフォルトのようにポート3000で動作します.すべてが動くことができるように変えましょう.
パッケージに移動します.JSONと--port 3333とdevスクリプトの終わりにpreviewを加えます.
Note :利用可能なポートは何でも使用できますが、CADYサーバの設定については後で注意してください.
これを変更

  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },

これを:

  "scripts": {
    "dev": "svelte-kit dev --port 3333",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview --port 3333",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },

3 .セットアップsupabase Dockerネットワーク

Supabaseは、Supabaseのインスタンスとすべてのコンポーネントを回転させるための簡単なDockerセットアップを使用しています.
完全な文書は です.
以下はそこからの指示です(おそらく、これのために異なるディレクトリに移動したいです).

git clone --depth 1 https://github.com/supabase/supabase

cd supabase/docker

cp .env.example .env

docker-compose up

今、あなたはSupabaseスタジオアプリケーションにアクセスするためにhereに行くことができます.我々は、たった今それをあまり使いません.しかし、我々がそれを必要とするとき、そのためにそこにあります.
つのrepoですべてを一緒にしたいならば、あなたはSveletKitプロジェクト・ディレクトリ/Repoのサブモジュールとしてsupabaseを加えることができました.

git submodule add https://github.com/supabase/supabase supabase

http://localhost:3000 セットアップキャディサーバ

実行可能ファイルをダウンロードしてインストールするには、 以上のヘッドです.
SveletKitプロジェクトのルートで、CaddyFileという新しいファイルを作成し、そこに置きます.

# To get debug logging on caddy, uncommet below
#{
#   debug
#}

localho.st:8888 {

  @supabase {
      path_regexp supabase ^/(auth|rest|realtime|storage|pg)/.*$
  }

  # reverse proxy requests to supabase paths to the supabase kong http endpoint
  reverse_proxy @supabase http://localho.st:8000 

  # all other request should go to the sveltekit server
    reverse_proxy localho.st:3333
  tls internal
}

ウェブサイト Localhoについての楽しい事実。stとキャディー

LocalhoとしてCaddyFileでドメインを定義する方法に注目してください.ST?ロカルー.STは自動的にlocalhostへのルートです、そして、Codyは自動的にあなたのためにTLS certをセットアップします.私は、それがかなりきちんとしていると思いました.
したがって、上記の簡単な構成で、あなたはクライアントからlocalhost APIに到達しようとするとき、ブラウザでどんな 問題にも走らずに走っているローカルHTTPSウェブサイトを得ます.
このセットアップでは、生産セットアップがどのように見えるかに非常に近い何かを与えます.

コア devモードでのsvelteの実行の最終的な注意

sveltekitのデベロッパモード(あるいはそれがViteであるのかもしれません)は、ファイルシステム上で何かを変更すると、ローカルのWebSocketリスナーを使ってリフレッシュをトリガーします.あなたがunse npm run devを走らせるならば、あなたはこの繰り返しのようにエラーを我々のブラウザコンソールで見ます:

私は、これを理解するために、時間をとりませんでした.代わりに、私はbuildですし、previewの下にアプリを実行します.

pnpm run build
pnpm run preview

すべて一緒に置く

この設定では、3つの端末を走らせる必要があります(そして、curlでテストする4番目).

終末

supabase/dockerディレクトリに変更します.次に実行します.

docker-compose up

終値

SveletKitプロジェクトディレクトリに変更します.次に実行します.

caddy run

端角3

SveletKitプロジェクトディレクトリに変更します.次に実行します.

pnpm run build
pnpm run preview

-終度

この端末では、キャディーサーバがsupabase APIパスに正しくマッチすることを確認します.
以下のコマンドを実行します.

curl -X POST https://localho.st:8888/auth/v1/signup

を返します.

{
  "message":"No API key found in request"
}

に戻ることができれば、以下のような出力を出力してください.

supabase-kong      | 172.18.0.1 - - [16/Dec/2021:15:36:37 +0000] "POST /auth/v1/signup HTTP/1.1" 401 45 "-" "curl/7.64.1"

あなたのカールリクエストでAPIキーを持っていないことを心配しないでください.我々は、ウェブサイトでそれを扱います.

第1ターミナル 最後に、ブラウザでサイトを開きます

今242479152に頭をしかり、メインのSveletkitスターターページを参照してください.

全員集合！

次に、基本的な電子メール/パスワードのサインアップ、ログイン、およびログアウト作業を取得します.ステイ!