静态网站托管

此方案适用于纯前端项目（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                    ## 自动生成域名

信息

有时候 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",
    ...
  }
}

信息

这里使用 --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                           ## 需要拷贝的目录，随着配置的托管目录为变