Slide 1

Slide 1 text

あの短縮URLアプリが ⼤幅アップデート 2025/05/10 Global Azure 2025 LT⼤会 NTTテクノクロス 中島進也(なかしょ)

Slide 2

Slide 2 text

⾃⼰紹介 • なかしょ(中島進也) @nakasho_dev • 所属:NTTテクノクロス株式会社 デジタルトランスフォーメーション事業部 • 業務:MaaS関連のスマートフォンアプリ開発担当 • 趣味: Ø妻とモンハンデート ØIT関連の勉強会(主にモバイル系 or アジャイル系 or Microsoft系) Ø技術コミュニティの運営スタッフ üeXtreme Programming Japan User Group(XPJUG) 2019〜 üTDD BootCamp Online (TDDBC) 2020〜 ※本資料は私個⼈の意⾒であり、所属企業・部⾨⾒解を代表するものではありません。

Slide 3

Slide 3 text

https://confengine.com/conferences/scrummatsuri XP祭り2025 10/4(⼟)開催

Slide 4

Slide 4 text

とあるショッピングセンターで... 4 お店に誘導するためのQRコード をSC内の各所に掲⽰したいんだ けど作ってくれない? OK。ちなみにどんなURL?

Slide 5

Slide 5 text

⻑いURLからQRコードを⽣成 5 https://sugokunagaisubdomaindakedo.orematananikayacchaimashita.ex ample.com/kisetuno.oryouriwo.magokorokomete.teikyouitashimasu.do?s enimoto=iriguchinoyokoniaruuekibachinikazattearu.tanzaku&campaignc ode=koredeuriagebaizou.bokunokyuuyomobaizou&deeplink=omisenoyoy akujoukyou ※有効なURLではありません なげーよ!

Slide 6

Slide 6 text

6 QRコードが細かすぎて印刷物から読み込 めないってクレームたくさん来ているんで すけど!!!!! 情報詰めすぎたらQRコードも細か くなるよね。 紙媒体だと印刷の品質も影響ある。

Slide 7

Slide 7 text

※有効なURLではありません 短いURLだとQRコードも読みやすい ※有効なURLではありません 例:https://example.com/nakasho.doc 前述のQRコード

Slide 8

Slide 8 text

8 そこで短縮URL ですよ! (ようやく本題かよ...)

Slide 9

Slide 9 text

9 Azureの⾃社のテナントで 短縮URLが⼿軽に実現できる⽅法あ るかなぁ...

Slide 10

Slide 10 text

10 そこで Azure Url Shortener ですよ!

Slide 11

Slide 11 text

Azure Url Shortener 11 • 特徴 Ø100%OSSの短縮URLサービス ØAzure Developer CLIから簡単デプロイ Øスケジュールに基づいてさまざまな宛先をリダイレクト Øクリックの統計を保存 ØAPI経由で短縮URLを追加可能 ØTiny Blazor Adminで管理画⾯を提供 Ø独⾃ドメインにも対応 • Frank Boucher⽒が開発 Ø個⼈のGithubリポジトリで開発していた Ø現在はMicrosoftの公式リポジトリに移⾏している ØAzure Communication ServicesのDocでも活⽤⽅法を紹介している https://github.com/microsoft/AzUrlShortener

Slide 12

Slide 12 text

2年半ぶりに⼤幅アップデート 12 https://github.com/microsoft/AzUrlShortener

Slide 13

Slide 13 text

Previous Architecture 13 • Azure Function (API) • Azure Storage (Function Code) • Azure Static Web App (Blazor WebAssembly) • Azure Storage Table (Data) • Application Insights https://github.com/microsoft/AzUrlShortener

Slide 14

Slide 14 text

New Architecture 14 https://github.com/microsoft/AzUrlShortener • Container registry (Docker images) • Container Apps Environment • Container App/ Function: FunctionsLight Public redirect-only API • Container App: Internal API Protected management interface • Container App: TinyBlazorAdmin Secured Blazor website • Azure Storage Table (Data) • Managed Identity • Log Analytics

Slide 15

Slide 15 text

導⼊はAzure Developer CLI 15 > azd init Initializing an app to run on Azure (azd init) ? Enter a new environment name: [? for help] azshort ? Enter a new environment name: azshort > azd config set alpha.aca.persistDomains on > azd up ? Select an Azure Subscription to use: 1. nakasho.xxxxx (xxxxxxxx-142a-46b0-xxxx-b84dc30axxxx) ? Enter a value for the 'CustomDomain' infrastructure parameter: https://s.ukky.org/ ? Enter a value for the 'DefaultRedirectUrl' infrastructure parameter: https://github.com/nakasho-dev ? Enter a value for the 'location' infrastructure parameter: 10. (Asia Pacific) Japan East (japaneast) Packaging services (azd package) Provisioning Azure resources (azd provision) Provisioning Azure resources can take some time. https://github.com/nakasho-dev/AzUrlShortener/blob/main/doc/how-to-deploy.md

Slide 16

Slide 16 text

導⼊はとても楽 16 (✓) Done: Resource group: rg-azshort (1.751s) (✓) Done: Container Registry: acrcnsmin6ohkujw (9.177s) (✓) Done: Log Analytics workspace: law-cnsmin6ohkujw (16.675s) (✓) Done: Container Apps Environment: cae-cnsmin6ohkujw (2m8.033s) (✓) Done: Storage account: urldatacnsmin6ohkujw (25.394s) (✓) Done: Storage account: funcstoragea17cacnsmin6o (29.697s) Deploying services (azd deploy) (✓) Done: Deploying service admin - Endpoint: https://admin.niceflower-a6936d9c.japaneast.azurecontainerapps.io/ (✓) Done: Deploying service api - Endpoint: https://api.internal.niceflower-a6936d9c.japaneast.azurecontainerapps.io/ (✓) Done: Deploying service azfunc-light - Endpoint: https://azfunc-light.niceflower-a6936d9c.japaneast.azurecontainerapps.io/ Aspire Dashboard: https://aspire-dashboard.ext.niceflower-a6936d9c.japaneast.azurecontainerapps.io SUCCESS: Your up workflow to provision and deploy to Azure completed in 4 minutes 52 seconds. https://github.com/microsoft/AzUrlShortener

Slide 17

Slide 17 text

構築完了 17

Slide 18

Slide 18 text

管理画⾯の認証設定 18

Slide 19

Slide 19 text

短縮URLのカスタムドメイン設定 19

Slide 20

Slide 20 text

Tiny Blazor AdminのTOPページ 20

Slide 21

Slide 21 text

URL ManagerでURLを登録 21

Slide 22

Slide 22 text

URL ManagerでURLを登録 22

Slide 23

Slide 23 text

実際に短縮URLを叩いてみる 23 リダイレクト された!

Slide 24

Slide 24 text

みんな⼤好き?Aspire Dashboard 24

Slide 25

Slide 25 text

まとめ 25 • QRコードはデータ量が少ないほど読み取りやすい • ⻑いURLは短縮URLにしよう Øカスタムドメイン、カスタムVanityでブランディング戦略 • Azure で運⽤するならAzure URL Shortenerを使おう • Azure Developer CLIを使いこなして効率よく環境構築しよう

Slide 26

Slide 26 text

ご清聴ありがとうございました。 26 @nakasho_dev