跳转到主文档

静态 Web 服务器托管网站

大多数情况下,直接在服务器中使用 start 命令启动已经构建完的 Modern.js 应用即可。

有时,开发者希望使用自己已有的服务器,或者直接使用 CDN 来托管 Modern.js 应用的产物。默认情况下,构建产物不支持直接在这类静态 Web 服务器中使用。

Modern.js 为这类场景提供了独立的插件来支持。

使用静态 Web 服务器会导致原有的 Modern.js 功能的损失,例如 SSR、SSG,自动的 MAP/SPA 路由等。

启用功能

在项目目录中执行 pnpm new 启用部署功能,在是否调整 Web 服务器一问中选择【是】:

? 请选择你想要的操作:启用可选功能
? 启用可选功能:启用「部署」功能
? 默认使用框架自带的专业 Web 服务器,是否调整:是
? 请选择 CDN 平台:不使用 CDN

可以发现 package.json 中已经新增了以下依赖:

{
+ "@modern-js/plugin-static-hosting": "^1"
}

启用该功能后,重新执行 pnpm run build 命令,可以看到产物 dist/ 目录下,HTML 文件已经被平铺到外层,同时 main.html 也被重命名为了 index.html

.
├── static/
│ ├── css/
│ │ ├── main.6a8baa57.css
│ │ └── main.6a8baa57.css.map
│ └── js/
│ ├── runtime-main.edcde8c9.js
│ └── runtime-main.edcde8c9.js.map
├── asset-manifest.json
├── home.html
├── index.html
└── route.json

使用 CDN 托管

Modern.js 支持直接使用 CDN 来托管使用上述插件后的构建产物。此时需要先开启 CDN 上传

接着需要配置额外的环境变量,将整个产物目录上传到 CDN 中。可以在 .env 文件中设置以下环境变量,修改默认上传的资源目录:

.env
CLOUD_STATIC_FILES="."

默认情况下,Modern.js 的 CDN 插件会上传构建产物中 static 文件夹下的内容,修改为 . 后,将会上传整个产物目录。

现在,执行 pnpm run deploy 命令后,网站就已经被托管在 CDN 上了。

默认情况下,如果没有设置 output.assetPrefix,HTML 中的静态资源将通过绝对路径访问,例如:

<script src="/static/js/*.js"></script>

在 CDN 托管方式下,如果已经为 CDN 设置了 CLOUD_BUCKET_PATH,指定了 CDN 的上传目录,则还需要将 assetPrefix 修改为相对路径,保证 HTML 中的静态资源文件能够被正常访问:

module.config.js
export default defineConfig({
output: {
assetPrefix: './'
}
}

使用已有的静态 Web 服务器托管

构建产物也可以直接被应用在任意的静态 Web 服务器中,例如云平台的静态网站托管

这里使用最简单的方式来做演示,先在全局安装 http-server ,接着进入 dist/ 目录,执行以下命令。

http-server

控制台打印以下信息,说明 http 服务已经正常启动。

Available on:
http://127.0.0.1:8080

访问 http://127.0.0.1:8080,可以看到页面已经正常渲染。