AWS Amplify Gen2向けのVSCode拡張を作って公開してみた話/lts-techday-2024

1. AWS Amplify Gen2向けの VSCode拡張を作って公開し てみた話 LTS TechDay 2024 2024-08-31 株式会社永和システムマネジメント　村上雅彦 (a.k.a @fossamagna)
2. 村上 雅彦 株式会社永和システムマネジメント Amplify Japan User Group 運営メンバー AWS Community Builder (Front-End Web & Mobile since 2022) GitHub: https://github.com/fossamagna X(旧Twitter): https://x.com/fossamagna 自己紹介
3. • AWS Amplify Gen2の概要の紹介 • なぜVSCode拡張を作ったか • VSCode拡張の作り方 • VSCode拡張の公開とその後 アジェンダ
4. • AWS CDKをベースとする次世代のAmplifyのバックエン ド構築ツール • TypeScriptによるバックエンド定義を提供 • CoC（設定より規約を優先する） • GitのブランチとAWS環境を1:1でマッピング • 開発者毎の独立したsandbox環境を提供 AWS Amplify Gen2
5. • AWS CDKをベースとする次世代のAmplifyのバックエン ド構築ツール • TypeScriptによるバックエンド定義を提供 • 開発者毎の独立したsandbox環境を提供 • GitのブランチとAWS環境を1:1でマッピング AWS Amplify Gen2の機能
6. • AWS CDKをベースとする次世代のAmplifyのバックエン ド構築ツール • TypeScriptによるバックエンド定義を提供 • 開発者毎の独立した sandbox環境を提供 • GitのブランチとAWS環境を1:1でマッピング AWS Amplify Gen2の機能
7. • 開発者毎の独立した sandbox環境を提供 • npx ampx sandboxコマン ド一発で環境構築完了 • hot swapデプロイ対応で 迅速にデプロイ可能 Amplify Gen2 sandbox environments https://docs.amplify.aws/react/how-amplify-works/concepts/#faster-local-development
8. • sandbox環境はとっても便利 • でも、実際に利用して困った点も あった • 困った時にどう対応したかを紹 介 Amplify Gen2 sandbox environments
9. デプロイされたAWSリソース探すの大変問題 Amplify Gen2 sandbox environmentsで困ったこと https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/setup/#manage-sandbox-environments • Amplifyの管理コンソールではsandbox環境は1行で表示されるだけで、sandbox内 のAWSリソースは確認できない。
10. デプロイされたAWSリソース探すの大変問題 Amplify Gen2 sandbox environmentsで困ったこと • 例えば、AppSyncのAPIも名前が同じで探しづらい。ランダム値を含むエンドポイント URLを手掛かりにして探すしかない。
11. 対応：sandboxのAWSリソースを確認できるVSCode拡張を作成！ Amplify Gen2 sandbox environmentsで困ったこと • 自分のsandbox環境のAWSリソー スにだけをツリー表示 • リソースを選択してブラウザでAWS マネージメントコンソール可能 • https://marketplace.visualstu dio.com/items?itemName=fo ssamagna.amplify-backend-v scode&ssr=false#overview
12. • いつも開発で使うエディタがVSCodeだった • VSCode拡張を一度作ってみたかった • 兎に角、動いて使えるものが早く欲しかった ◦ 多くのAWSリソースを表示する必要があるのでGUIは欲しいがUIをど う見せるか、実装するかで悩みたくはなかった ◦ VSCodeが提供している拡張向けのAPIを利用するだけならUIに関 する実装が最小限で済む • 受けそうな登壇ネタが欲しかった なぜVSCode拡張として作ったか？
13. • VSCode拡張を作り始めるための 公式ドキュメントがある • Yeoman Generatorでプロジェク トの雛形が作れる VSCode拡張を作り始めるには？
14. • コントリビューションポイントを探す ◦ VSCodeの機能を拡張できるポイントがコントリビューションポイント ◦ views、commandsなど31個のコントリビューションポイントがある ◦ 実装したい機能と似た機能や他の拡張機能を探す • ドキュメントのコントリビューションポイント一覧や他の拡張機能のソース コードが参考になる • 公式のサンプルリポジトリ https://github.com/microsoft/vscode-extension-samples に実 装サンプルが豊富にある VSCode拡張で機能を実装するには？
15. • Visual Studio Code Marketplaceで公開するには ◦ Azure DevOpsが必要(拡張機能をAzure DevOpsで管理する) ◦ Publisher登録が必要 ◦ vsceコマンドでパッケージ作成＆公開 • Marketplaceでの見栄えをよくする（任意） ◦ package.jsonにメタ情報（アイコン画像、拡張機能の説明など）を書 く ◦ README.mdを充実させる。 ◦ CHANGELOG.mdを提供する。 VSCode拡張を公開するには？
16. Marketplaceに公開した結果
17. CHANGELOG.mdの作成 • Changesetsを採用することでgitのリリースタグとCHANGELOG.mdの 生成がコマンド1つでできるようになった
18. GitHub Actionsでリリースの自動化 … jobs: release: name: Release runs-on: ubuntu-latest steps: … - name: Create Release Pull Request or Publish to the VS Code Extension Marketplace uses: changesets/action@v1 with: publish: npm run release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} VSCE_PAT: ${{ secrets.VSCE_PAT }} { "name": "amplify-backend-vscode", "publisher": "fossamagna", "scripts": { "vscode:prepublish": "npm run package", "package": "npm run check-types && npm run lint && node esbuild.js --production", "release": "npx @vscode/vsce package && npx @vscode/vsce publish --skip-duplicate && changeset tag" }, "devDependencies": { … } .github/workflows/release.yaml package.json
19. • 自分が欲しいものが普段の開発で使えて開発体験が 向上！ • VSCode拡張を作って公開するまでの知見を得られた • CI/CDとChangesetの組み合わせを用意したことでリ リースの手間がかからず、カジュアルに新バージョン をリリースできる。 • AWS Amplifyの開発チームのメンバーから褒められ た！ VSCode拡張を作って公開してみてどうだった？