--- title: HonoアプリをTanzu Application Platformにデプロイするメモ tags: ["Kubernetes", "Tanzu", "TAP", "Hono", "Node.js", "TypeScript"] categories: ["Dev", "CaaS", "Kubernetes", "TAP"] date: 2024-01-23T04:04:44Z updated: 2024-01-23T04:07:01Z --- [Hono](https://hono.dev)アプリを[Tanzu Application Platform](https://tanzu.vmware.com/application-platform)にデプロイしてみます。 TAP環境としては無償で使える[Developer Sandbox](https://tanzu.academy/guides/developer-sandbox)を使用しました。 Buildpackでコンテナイメージを作成したいので、RuntimeとしてはNode.jsを使用します。 ``` npm create hono@latest hello-hono ``` templateにnodejsを選択します。 ``` create-hono version 0.3.2 ✔ Using target directory … hello-hono ✔ Which template do you want to use? › nodejs cloned honojs/starter#main to /Users/tmaki/git/hello-hono ✔ Copied project files ``` まずは開発モードで起動します。 ``` cd hello-hono npm install npm run dev ``` アプリにアクセスします。 ``` $ curl localhost:3000 Hello Hono! ``` serverがlistenするポートを環境変数`PORT`を使って変えられるように`src/index.ts`を以下のように変更します。 ```js const port = process.env.PORT ? Number(process.env.PORT) : 3000 ``` templateの`package.json`にはあまり設定がないので、少し追記します。 ``` $ cat package.json { "scripts": { "dev": "tsx watch src/index.ts" }, "dependencies": { "@hono/node-server": "^1.4.1", "hono": "^3.12.6" }, "devDependencies": { "tsx": "^3.12.2" } } ``` ``` npm install typescript @types/node --save-dev ``` `scripts`に以下を追加します。 ``` "scripts": { "dev": "tsx watch src/index.ts", "build": "tsc", "start": "node dist/index.js" }, ``` 以下、`tsconfig.json`に`target`、`module`、`outDir`を設定します。 ``` { "compilerOptions": { "strict": true, "jsx": "react-jsx", "jsxImportSource": "hono/jsx", "target": "es2015", "module": "commonjs", "outDir": "./dist" } } ``` `.gitignore`に`dist`を追加します。 ``` echo dist >> .gitignore ``` これで次のコマンドでビルドとアプリの起動を行います。 ``` npm run build PORT=8080 npm run start ``` 次のログが流れます。 ``` > build > tsc > start > node dist/index.js Server is running on port 8080 ``` アプリにアクセスします。 ``` $ curl localhost:8080 Hello Hono! ``` ここまでできればTAP readyです。TAPにデプロイします。 Local Source Proxyを使用して、ローカルのソースコードからアプリをデプロイします。 TAPにアップロードするファイルから除外するリストを`.tanzuignore`に作成できます。`.gitignore`をコピーします。 ``` cp .gitignore .tanzuignore ``` 次のコマンドでデプロイします。 ``` tanzu apps workload apply hello-hono \ -n apps \ --app hello-hono \ --local-path . \ --type web \ --yes ``` 次のコマンドでログを確認します。 ``` tanzu apps workload tail hello-hono --namespace apps --timestamp --since 1h ``` 次のコマンドで状態を確認できます。`Knative Services`のURLが表示され、`Ready`になればURLにアクセス可能です。 ``` $ tanzu apps workload get hello-hono --namespace apps 📡 Overview name: hello-hono type: web namespace: apps 💾 Source type: source image image: us-central1-docker.pkg.dev/tap-sandbox-dev/tapv-willing-ladybird/lsp:apps-hello-hono@sha256:14557ab9cfa5a6990b0ab25f88210c74693a5c26fe30476f591f73a3cb4d7214 📦 Supply Chain name: source-to-url NAME READY HEALTHY UPDATED RESOURCE source-provider True True 7m19s imagerepositories.source.apps.tanzu.vmware.com/hello-hono image-provider True True 5m51s images.kpack.io/hello-hono config-provider True True 5m47s podintents.conventions.carto.run/hello-hono app-config True True 5m47s configmaps/hello-hono service-bindings True True 5m47s configmaps/hello-hono-with-claims api-descriptors True True 5m47s configmaps/hello-hono-with-api-descriptors config-writer True True 5m39s taskruns.tekton.dev/hello-hono-config-writer-hrhsc 🚚 Delivery name: delivery-basic NAME READY HEALTHY UPDATED RESOURCE source-provider True True 5m14s imagerepositories.source.apps.tanzu.vmware.com/hello-hono-delivery deployer True True 5m7s apps.kappctrl.k14s.io/hello-hono 💬 Messages No messages found. 🛶 Pods NAME READY STATUS RESTARTS AGE hello-hono-00001-deployment-8556dcd768-k2n8n 2/2 Running 0 26s hello-hono-build-1-build-pod 0/1 Completed 0 7m19s hello-hono-config-writer-hrhsc-pod 0/1 Completed 0 5m47s 🚢 Knative Services NAME READY URL hello-hono Ready https://hello-hono-apps.tapv-willing-ladybird.tapsandbox.com To see logs: "tanzu apps workload tail hello-hono --namespace apps --timestamp --since 1h" ``` ``` $ curl https://hello-hono-apps.tapv-willing-ladybird.tapsandbox.com Hello Hono! ``` ここまでのソースコードを https://github.com/making/hello-hono に置きました。 Gitからソースコードをデプロイする場合は、次のコマンドでできます。 ``` tanzu apps workload apply hello-hono \ -n apps \ --app hello-hono \ --git-repo https://github.com/making/hello-hono \ --git-branch main \ --type web ```