使用 Docker 部署 Elysia 和 HTMX 应用是一个很好的选择, 可以确保应用在不同环境中的一致性和可移植性。以下是使用 Docker 部署 Elysia 和 HTMX 应用的步骤和示例:
- 创建 Dockerfile
在项目根目录创建一个 Dockerfile:
FROM oven/bun:latest
WORKDIR /app
COPY package.json bun.lockb ./
RUN bun install
COPY . .
EXPOSE 3000
CMD ["bun", "run", "start"]- 创建 .dockerignore 文件
创建 .dockerignore 文件以排除不必要的文件:
node_modules
npm-debug.log
- 创建 docker-compose. Yml 文件
创建 docker-compose.yml 文件以定义服务:
version: '3'
services:
app:
build: .
ports:
- "3000:3000"
environment:
- NODE_ENV=production- 构建和运行 Docker 容器
在项目根目录运行以下命令:
docker-compose up --build- 项目结构
确保你的项目结构类似于以下:
project/
├── src/
│ ├── index.ts
│ └── ...
├── public/
│ ├── index.html
│ └── ...
├── package.json
├── Dockerfile
├── docker-compose.yml
└── .dockerignore
- Elysia 服务器配置
在 src/index.ts 中配置 Elysia 服务器:
import { Elysia } from 'elysia';
import { staticPlugin } from '@elysiajs/static';
const app = new Elysia()
.use(staticPlugin())
.get('/api/hello', () => 'Hello from Elysia!')
.listen(3000);
console.log(`🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`);- HTMX 前端
在 public/index.html 中使用 HTMX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elysia with HTMX</title>
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
</head>
<body>
<h1>Elysia with HTMX</h1>
<button hx-get="/api/hello" hx-trigger="click" hx-target="#result">
Say Hello
</button>
<div id="result"></div>
</body>
</html>- 部署
将项目推送到 Git 仓库, 然后在支持 Docker 的平台上部署, 如 Railway 或 DigitalOcean。这些平台通常可以自动检测 Dockerfile 并构建应用。
使用这种方法, 你可以轻松地将 Elysia 和 HTMX 应用部署到任何支持 Docker 的环境中。Docker 确保了应用的一致性, 而 Elysia 的高性能和 HTMX 的简洁交互为你的应用提供了良好的用户体验[2][3]。
记得根据你的具体需求调整配置, 例如添加环境变量、配置数据库连接等。这个基本设置为你提供了一个坚实的起点, 可以根据项目需求进行扩展。
Citations: [1] https://cloud.tencent.com/developer/article/2374549 [2] https://github.com/syhner/elysia-kickstart [3] https://www.infoworld.com/article/3714603/full-stack-web-development-with-htmx-and-bun-part-1-elysia-and-mongodb.html [4] https://www.51cto.com/article/790641.html [5] https://www.youtube.com/watch?v=_TnOSgSPV6M