SveltekitでURL短縮を行う

URL短縮、それらを使用するときに簡単にリンクを覚えて共有するために使用します.あなたはbitlyまたはtinyurlまたは他のもののいずれかのようなサービスを既に使用することができますか、またはあなたはそれを使用したいと思うし、自分自身を作ることによってそれに接続のビットを持っている何かを作ることができる!
過去に、私はNetlifyで個人のURL短縮剤を作りました_redirects ファイルと小包でvercel.json ファイル.この投稿では、SveletKitでURL短縮を行います.
私は、SveletKitエンドポイントを使用して、それに要求された要求をリダイレクトします.これはsource 対象となるURLdestination URL.
例はこのプロジェクトに与えられたURLであるかもしれませんhttps://svort.li . TLDの後の何でも.li ) はsource so https://svort.li/me は、destination そのソースのURLhttps://scottspence.com .
前の2つのプロジェクトでは、フロントエンドフレームワークの方法では何もしませんでした.
これはまだ、サーバー上の着信要求(sveltekitエンドポイントで)を受け取り、それをリダイレクトするのと全く同じです.

プロジェクトのセットアップ

次のコマンドでスケルトンSveltekitを足場にします.

npm init svelte@next svort-urls

私はプロンプトに従います、私はそこのすべてのプロンプトにyesとなります.どれです.

? Which Svelte app template? › - Use arrow-keys. Return to submit.
    SvelteKit demo app
❯   Skeleton project

✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? … Yes
✔ Add ESLint for code linting? … Yes
✔ Add Prettier for code formatting? … Yes
✔ Add Playwright for browser testing? … Yes

私はこのポストでブラウザーテストをカバーするつもりでありません、しかし、あなたがそれを必要とするならば、それは設定をそこで持つのが良いです.😊

エンドポイントの作成

にroutes フォルダを作成する[slug].ts ファイル.

touch src/routes/'[slug]'.ts

The [slug].ts ファイルは、エンドポイントで、HTTPメソッドを使用することができますsveltekitのHTTPエンドポイントです.だから、もしGET ルートIのいくつかのデータは、これらの特別なsveltekitファイルを通してそれにアクセスすることができます.
この場合、私はGET メソッドソーsource はdestination .

export const get = async () => {
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

これはルートパスの後に何かを受け付けます/ ) そしてすぐにホームページに戻る/ .
だから行くlocalhost:3000/me はlocalhost:3000/ .
それはかなりです!
リンクの一覧については、ローカルの設定ファイルを使用しますが、これを制御するためにCMSやデータベースのようなものを使用できます.

ソースと目的地URLを加えてください

ソースと目的地のURLを設定ファイルに追加します.SveletKitでは、この場所はlib フォルダ.

# create the lib folder
mkdir src/lib
# create a file for the urls
touch src/lib/urls-list.ts

にurls-list.ts ファイルをソースと目的地URLを追加します.

export const urls = [
  {
    source: '/me',
    destination: 'https://scottspence.com',
  },
  {
    source: '/twitter',
    destination: 'https://twitter.com/spences10',
  },
  {
    source: '/git',
    destination: 'https://github.com/spences10',
  },
]

宛先URLにリダイレクトする

短いリンクの私のリストを使用して、私は[slug].ts エンドポイント.だから行くlocalhost:3000/me 私は今リダイレクトしたいhttps://scottspence.com .
ソースURLがエンドポイントにあるものを知る方法が必要です.
我々が何を得るかについて簡単に見ましょうcontext (or ctx ) オブジェクト.

export const get = async ctx => {
  console.log(ctx)
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

だから今私はlocalhost:3000/something 端末に次の出力を見ます.

{
  request: Request {
    size: 0,
    follow: 20,
    compress: true,
    counter: 0,
    agent: undefined,
    highWaterMark: 16384,
    insecureHTTPParser: false,
    [Symbol(Body internals)]: {
      body: null,
      stream: null,
      boundary: null,
      disturbed: false,
      error: null
    },
    [Symbol(Request internals)]: {
      method: 'GET',
      redirect: 'follow',
      headers: [Object],
      parsedURL: [URL],
      signal: null,
      referrer: undefined,
      referrerPolicy: ''
    }
  },
  url: URL {
    href: 'http://localhost:3000/something',
    origin: 'http://localhost:3000',
    protocol: 'http:',
    username: '',
    password: '',
    host: 'localhost:3000',
    hostname: 'localhost',
    port: '3000',
    pathname: '/something',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  },
  params: { slug: 'something' },
  locals: {},
  platform: undefined
}

だから私はここに興味があるurl オブジェクト、より具体的にはurl.pathname . これは、私が私が要求をどこにリダイレクトするかについて特定するのを助けるつもりです.

url: URL {
  href: 'http://localhost:3000/something',
  origin: 'http://localhost:3000',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'localhost:3000',
  hostname: 'localhost',
  port: '3000',
  pathname: '/something',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}

私も使えるparams.slug このオブジェクトも同様です.

params: { slug: 'something' },

この例では、url オブジェクト.だから私はurl コンテキストオブジェクトからオブジェクトをインポートし、urls-list ファイル.

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  return {
    headers: { Location: '/' },
    status: 301,
  }
}

それから、私はからのリダイレクトを得ることができますurls 配列.これをaと宣言します[redirect] 変数.
だから、私が何を得るかを見るでしょう[redirect] 今、私はマッチする何かのためにフィルターをかけたいurl.pathname からurls-list ファイルは、今のため私はconsole.log 結果を:

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  const [redirect] = urls.filter(item => {
    console.log(item)
  })

  return {
    headers: { Location: '/' },
    status: 301,
  }
}

今、私はlocalhost:3000/something 端末に次のように表示します.

{ source: '/me', destination: 'https://scottspence.com' }
{ source: '/twitter', destination: 'https://twitter.com/spences10' }
{ source: '/git', destination: 'https://github.com/spences10' }

甘い!だから今、私はいくつかのロジックを使用してurl.pathname にマッチするurls 配列.
だから、とitem 私はフィルタに使用しているurl.pathname . 有効なマッチがあればdestination からurls 配列.

import { urls } from '$lib/urls-list'

export const get = async ({ url }) => {
  const [redirect] = urls.filter(item => item.source === url.pathname)

  if (redirect) {
    return {
      headers: { Location: redirect.destination },
      status: 301,
    }
  } else if (!redirect && url.pathname.length > 1) {
    return {
      headers: { Location: '/' },
      status: 301,
    }
  } else return {}
}

私はif 妥当な一致をチェックする.有効なマッチがあれば、headers.Location にdestination からurls 配列.
マッチしなければホームページにリダイレクトします/ ) そして、空のオブジェクトを返す最終的なキャッチを持ってください.

結論

それだ!私は、挿入URLを取って、目的地URLにリダイレクトするsveltekitで単純なリダイレクトを作成しました.
私は現在、私の短いURLのための着陸ページとしてホームページを使うことができます.

更なる探査

これは私のために少しの目を開いていたので、私はバックエンドの方法で何かを使用して実験するつもりだと思います.まだ決定していないが、私はユーザーのためだけではなく、個人的なプロジェクトのために何かをすることができます.これは、ユーザデータ、すなわちCMS(または、可能性が高いGraphms以上)または何らかの種類のデータベースを格納するために、認証と何かを含みます.

謝辞

の使用を示唆するためのsvelte不和の上でRainlifeのおかげでHEAD (リクエストのヘッダにのみ興味があります).また、私にこの便利なMDNリンクを与えるために、ヨルダン(Svelte Discordの上で)のおかげでRedirections in HTTP .
また、SveletKit終点でリダイレクトを使用するために.使っていたredirect ヘッダを設定する代わりに.