IK.AM

@making's tech note


HonoアプリをTanzu Application Platformにデプロイするメモ

🗃 {Dev/CaaS/Kubernetes/TAP}
🏷 Kubernetes 🏷 Tanzu 🏷 TAP 🏷 Hono 🏷 Node.js 🏷 TypeScript 
🗓 Updated at 2024-01-23T04:07:01Z  🗓 Created at 2024-01-23T04:04:44Z   🌎 English Page

⚠️ 本記事の内容はVMwareによってサポートされていません。 記事の内容で生じた問題については自己責任で対応し、 VMwareサポート窓口には問い合わせないでください

HonoアプリをTanzu Application Platformにデプロイしてみます。

TAP環境としては無償で使える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を以下のように変更します。

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.jsontargetmoduleoutDirを設定します。

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
    "target": "es2015",
    "module": "commonjs",
    "outDir": "./dist"
  }
}

.gitignoredistを追加します。

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

✒️️ Edit  ⏰ History  🗑 Delete