Skip to main content
Version: 2.0.0

静态网站托管

此方案适用于纯前端项目(React、vue 等)托管到 Serverless 平台(阿里云,腾讯云等)。

常见的场景有托管公司官网,个人主页,博客等。

使用方法

在任意的静态项目下加入下面的 f.yml ,内容如下:

service: my-static-demo             ## 应用发布到云平台的名字

provider:
name: aliyun ## 发布的云平台,aliyun,tencent 等

deployType: static

package:
include:
- build ## 需要拷贝的目录
exclude:
- package-lock.json ## 忽略 package-lock.json 文件

custom:
customDomain:
domainName: auto ## 自动生成域名
info

有时候 package-lock.json 文件会造成部署包过大(将 dev 依赖打入)。

加入 dev 依赖 @midwayjs/cli 。

{
"devDependencies": {
"@midwayjs/cli": "^1.2.36"
...
},
"scripts": {
"deploy": "npm run build && midway-bin deploy --skipBuild"
}
}

执行 npm run deploy  即可。

或者使用不同的 npm 包加速。

{
"scripts": {
"deploy": "npm run build && midway-bin deploy --skipBuild --npm=cnpm",
...
}
}
info

这里使用 --skipBuild 参数是为了跳过函数的构建。 npm run build  对接前端的构建命令。

默认情况下,会使用 build  目录作为托管根目录,访问 /  路由时,会自动查找 /index.html 。

比如:

  • / => /index.html
  • /api/ => /api/index.html

可选配置

除了默认配置外,我们可以对静态网站做一些额外的配置。

修改托管目录

service: my-static-demo             ## 应用发布到云平台的名字

provider:
name: aliyun ## 发布的云平台,aliyun,tencent 等

deployType:
type: static
config:
rootDir: public ## 托管目录变为 public

package:
include: public ## 需要拷贝的目录,随着配置的托管目录为变

修改托管前缀

有时候部署需要统一的路由前缀,比如 /api/*  这样的形式。

service: my-static-demo             ## 应用发布到云平台的名字

provider:
name: aliyun ## 发布的云平台,aliyun,tencent 等

deployType:
type: static
config:
prefix: /api

package:
include: build

这样所有的 / 都会变成 /api/

配置 404 页面

普通的路由是根据托管的目录结构和文件来的。如果访问到不存在的文件,则会返回 404。我们可以指定一个 404 页面。

service: my-static-demo             ## 应用发布到云平台的名字

provider:
name: aliyun ## 发布的云平台,aliyun,tencent 等

deployType:
type: static
config:
notFoundUrl: /404.html

package:
include: build

rewrite 路由

有时候,我们希望将一些特定的路由,都访问到特定的文件上,比如将所有的路由请求,都转向到 /index.html ,然后让前端路由处理。

service: my-static-demo             ## 应用发布到云平台的名字

provider:
name: aliyun ## 发布的云平台,aliyun,tencent 等

deployType:
type: static
config:
rewrite:
/(.*): /index.html

package:
include: build

此 rewrite 可以写多个,规则同 koa-rewrite

如果要排除某些目录,可以使用 @not 取反语法。

比如,排除 static 目录。

deployType:
type: static
config:
rootDir: build
rewrite:
'@not /static/(.*)': /index.html

修改部署的函数名

可以通过 name 字段。

service: my-static-demo             ## 应用发布到云平台的名字

provider:
name: aliyun ## 发布的云平台,aliyun,tencent 等

deployType:
type: static
name: app_idx ## 函数名

package:
include: public ## 需要拷贝的目录,随着配置的托管目录为变