Zenn
🔗

たんLink..短縮リンクサービスを作ってみた!!

2023/12/02に公開
Deno
Hono
denokv
短縮
tech

あいさつ

前回の記事はお騒がせしました...とりあえずサービス削除、リポジトリ非公開処置をしときました..
と、そんな話は置いといて 置いとくな
今回もサービス作ってきました。
とある方の記事を見てDeno KVも使ってみたかったので...
こちら↓
https://tanlink.deno.dev/
独自ドメインじゃないから言うほど短くならなかった...

技術スタック

  • Deno-便利
  • Hono-早い、JSXも使える
  • Deno KV-Deno公式のKVストア(?)
    そんな感じです

使い方!!

ttps://tanlink.deno.dev/?url=ここにリンク
これで短縮
ttps://tanlink.deno.dev/ここにkey
これで解凍(リダイレクト)がされます

コードの解説

前回はまともに解説できなかったので今度こそ...

メインコード
app.get("/", async (c) => {
  const url: string = c.req.query('url');
  if (!url) return c.html(
    <Layout title="たんLink">
      <h1>たんLink</h1>
      <p>URLを短縮できるサービスです</p>
      <p>https://tanlink.deno.dev/?url=短縮したいURL</p>
      <p>https://tanlink.deno.dev/短縮後のキー</p>
    </Layout>,
  );
  if (!urlcheck(url)) return c.text("URLじゃないよ");
  const { key } = await shorten(url);
  return c.html(
    <Layout title="たんLink">
      <h1>たんLink</h1>
      <p>短縮URL</p>
      <a href={`https://tanlink.deno.dev/${key}`} id="a">{`https://tanlink.deno.dev/${key}`}</a>
      <button onclick="copyToClipboard()">Copy text</button>
      <script src="./onclick.js"></script>
    </Layout>
  );
});

もし、URLがなかったらメインページを表示
その後URLチェックをしURLだったら
Link表示とクリップボードにコピー(なんかコピーされなかった)

リダイレクト
app.get("/:id", async (c) => {
  const id = c.req.param("id");
  const aredayo = await kv.get([id])
  return c.redirect(aredayo.value);
  // return c.text(aredayo.value);
});

LocalのDenoではDeno KVが動かないのって僕の環境だけ...?
idからDenoKVのURLを取得してリダイレクトするだけです

最後に

たまってたサービスはこれで大体終了です。
HonoとDenoは簡単なものを作るにはすぐ出来て便利だなって思いました(小並感)
zennのフォロー、Githubのスターもよろしく!!

Discussion