utquidem
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
102 lines (73 loc) • 3.36 kB
Markdown
---
sidebar_position: 3
---
# 静态 Web 服务器托管网站
大多数情况下，直接在服务器中使用 `start` 命令启动已经构建完的 Modern.js 应用即可。
有时，开发者希望使用自己已有的服务器，或者直接使用 CDN 来托管 Modern.js 应用的产物。默认情况下，构建产物不支持直接在这类静态 Web 服务器中使用。
Modern.js 为这类场景提供了独立的插件来支持。
:::info 注
使用静态 Web 服务器会导致原有的 Modern.js 功能的损失，例如 SSR、SSG，自动的 MAP/SPA 路由等。
:::
## 启用功能
在项目目录中执行 `pnpm new` 启用部署功能，在**是否调整 Web 服务器**一问中选择【是】：
```bash
? 请选择你想要的操作：启用可选功能
? 启用可选功能：启用「部署」功能
? 默认使用框架自带的专业 Web 服务器，是否调整：是
? 请选择 CDN 平台：不使用 CDN
```
可以发现 `package.json` 中已经新增了以下依赖：
```json
{
+ "@modern-js/plugin-static-hosting": "^1"
}
```
启用该功能后，重新执行 `pnpm run build` 命令，可以看到产物 `dist/` 目录下，HTML 文件已经被平铺到外层，同时 `main.html` 也被重命名为了 `index.html`。
```bash
.
├── 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 上传](/docs/guides/features/server-side/deploy/upload-cdn/oss)。
接着需要配置额外的环境变量，将整个产物目录上传到 CDN 中。可以在 `.env` 文件中设置以下环境变量，修改默认上传的资源目录：
```bash title=".env"
CLOUD_STATIC_FILES="."
```
:::info 注
默认情况下，Modern.js 的 CDN 插件会上传构建产物中 `static` 文件夹下的内容，修改为 `.` 后，将会上传整个产物目录。
:::
现在，执行 `pnpm run deploy` 命令后，网站就已经被托管在 CDN 上了。
默认情况下，如果没有设置 `output.assetPrefix`，HTML 中的静态资源将通过绝对路径访问，例如：
```html
<script src="/static/js/*.js"></script>
```
在 CDN 托管方式下，如果已经为 CDN 设置了 `CLOUD_BUCKET_PATH`，指定了 CDN 的上传目录，则还需要将 `assetPrefix` 修改为相对路径，保证 HTML 中的静态资源文件能够被正常访问：
```js title="module.config.js"
export default defineConfig({
output: {
assetPrefix: './'
}
}
```
## 使用已有的静态 Web 服务器托管
构建产物也可以直接被应用在任意的静态 Web 服务器中，例如[云平台的静态网站托管](https://cloud.tencent.com/product/wh)。
这里使用最简单的方式来做演示，先在全局安装 `http-server` ，接着进入 `dist/` 目录，执行以下命令。
```bash
http-server
```
控制台打印以下信息，说明 http 服务已经正常启动。
```bash
Available on:
http://127.0.0.1:8080
```
访问 `http://127.0.0.1:8080`，可以看到页面已经正常渲染。