边缘安全加速平台 EO Vite

Vite 是一款现代化的前端构建工具,旨在显著提升开发体验与构建效率。其核心架构如下1. 开发服务器:基于原生 ES 模块,提供功能丰富的开发支持,包含速度极快的模块热替换(HMR)。

相关产品
边缘安全加速平台 EO 产品页,含版本规格、价格与购买入口。

2. 构建指令:基于 Rollup 进行打包,支持客户端与服务端双端构建,可输出高度优化的生产资源。

3. SSR 支持:内置服务端渲染原语,提供 ssrLoadModule、transformIndexHtml 等 API,支持构建全栈应用。

下面将介绍如何使用 Vite 框架将静态站点和全栈应用部署到 EdgeOne Makers。

一、Git 部署

1. 将你的代码推送到远程仓库(GitHub、Gitee、Coding 仓库)。

2. 将项目导入 到 EdgeOne Makers。如果你没有 Vite 项目,可以使用 Vite React 模板。

3. EdgeOne Makers 会检测到你正在使用 Vite,并会为你的部署开启相应的正确配置。

4. 你的应用被部署好了。(示例:vite-react.edgeone.app)

在你的项目被导入和部署后,对指定生产分支(默认为“main”)的所有提交都会自动触发新的部署。查看 导入 Git 仓库 了解更多。

二、CLI 部署

1. 安装 EdgeOne CLI 并初始化。

2. 运行 edgeone makers deploy -n <project name> 来部署。

3. 你的应用被部署好了。(示例:vite-react.edgeone.app)

npm install -g edgeoneedgeone loginedgeone makers deploy -n vite-react-demo

部署成功后点击 Console 的链接可以访问具体构建信息和部署后的 URL。

三、原生 Vite SSR 部署

@edgeone/vite 是 Makers 提供的 Vite 适配器,基于 Universal Deploy 架构,用于生成 Makers 部署产物。配合 Makers 脚手架工具,可快速将 Vite 全栈项目部署到 Makers 平台。适配器源代码已开源,欢迎访问 vite-universal-adapter 仓库查看源码、提交 Issue 或参与贡献。

四、1. 安装适配器

npm install @edgeone/vite

五、2. 配置 Vite

在 vite.config.ts 中引入并启用适配器:

import { defineConfig } from "vite";import react from "@vitejs/plugin-react";import { edgeoneAdapter } from "@edgeone/vite";export default defineConfig({ plugins: [ react(), …edgeoneAdapter({ ssrEntry: "src/entry-server.jsx" }), ],});

注意:原生 Vite SSR 方案需要开发者自行实现服务端渲染逻辑。使用 @edgeone/vite-adapter 时,SSR 入口文件(如 src/entry-server.jsx)必须默认导出一个符合 Fetchable 约定({ fetch(request: Request): Response | Promise<Response> })的对象。

六、Git 连接部署

集成好适配器后,你可以将项目提交到 GitHub,GitLab 等平台,然后使用我们的 导入 Git 仓库。

七、CLI 部署

也可以使用 Makers 的脚手架工具部署本地项目,详细安装和使用方法请参考 EdgeOne CLI。适配器配置完成后,运行下面的命令即可快速部署:

edgeone makers deploy

在部署过程中,CLI 会先自动构建项目,然后将构建产物上传并发布。

八、更多资源

·Vite 产品文档

·vite-universal-adapter 代码仓库

赞 (0)
上一篇 4天前
下一篇 4天前