如往常一样，如果你只是来复制粘贴的，这里是最终的 Dockerfile，它将为你生成一个 4.21MB 的 Vite 应用镜像：
FROM node:21-alpine3.20 AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
FROM busybox:1.30 AS runner
WORKDIR /app
COPY --from=builder /app/dist .
CMD ["busybox", "httpd", "-f", "-v", "-p", "8080"]
进入全屏模式 退出全屏模式
以及 .dockerignore 文件：
node_modules
dist进入全屏模式 退出全屏模式
以及构建并运行镜像的命令：
docker build -t vite-app .
docker run -p 8080:8080 vite-app进入全屏模式 退出全屏模式
不只是来复制粘贴的吧？让我们来看看 Dockerfile 中发生了什么！
设置对于本教程，假设你已经设置了一个 Vite 项目。我基于这个 starter template 编写了 Dockerfile。这是一个相当简单的基于 npm 的项目，有一个构建命令，将文件输出到 dist 文件夹。如果你的设置不同，你可能需要相应地调整 Dockerfile。
通常，你只需运行 npm install 然后运行 npm run dev 来本地开发。如果你真的想将应用部署到某个地方，你通常不会使用开发服务器，而是构建你的应用并将文件从静态文件服务器提供服务。因此，你应该运行 npm run build 来生成文件，然后用不同的服务器提供服务。
让我们来详细看看 Dockerfile。
Dockerfile FROM node:21-alpine3.20 AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
FROM busybox:1.30 AS runner
WORKDIR /app
COPY --from=builder /app/dist .
CMD ["busybox", "httpd", "-f", "-v", "-p", "8080"]
进入全屏模式 退出全屏模式
所以这里发生了什么？
- 构建阶段：
-
使用 Alpine 3.20 上的 Node.js 21，始终标记你正在使用的具体版本以避免意外错误！
-
安装依赖项，然后复制并构建应用。
- 利用 Docker 的层缓存以加快构建速度，首先缓存 node_modules，然后是应用的其余部分。
- 运行阶段：
-
使用 Busybox 1.30 作为最小运行时环境。同样，始终标记你正在使用的具体版本以避免意外错误！
-
从构建阶段复制生成的文件。
- 在 8080 端口上运行一个简单的 HTTP 服务器。你可以选择任何端口，我只是在这个例子中选择了 8080。
这种方法通过放弃构建工具并仅使用 busybox（一个包含常用 Unix 工具的集合）来保持最终镜像的大小很小（4.21MB）。
确保你也添加一个 .dockerignore 文件来忽略 node_modules 和 dist 文件夹。这将加快构建过程并减少镜像大小。
部署我运营一个云托管平台，它使得部署 Docker 容器变得非常简单，这就是我在这里要展示的内容。Docker 的一大优点是你可以轻松地将其部署到任何地方，所以不要认为Sliplane是唯一的选择。你可以使用任何支持 Docker 容器的云提供商。
无论如何，如果你已经将更改提交并推送到 git 仓库，你可以通过注册并创建一个新的服务来将它们部署到 Sliplane：
你无需做任何更改，所以只需点击“部署”，Sliplane 将会处理其余的所有事情。
大约2分钟后，一切应该都能正常运行，你可以通过提供的链接访问你的应用。你可以在日志中查看进度：
就这样！你现在已经成功地将一个 Vite 应用部署到了云端。太棒了吧？
下一步步骤还有其他问题吗？你需要帮助将 Vite 应用程序容器化吗？你需要帮助将其部署到 Sliplane 吗？随时可以联系我！
你可以在 X 上找到我 @JonasScholz19 ，或者直接在这篇博客下面留言。
干杯，
Jonas
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
