Static website hosting

This solution is applicable to hosting pure front-end projects (React, vue, etc.) to Serverless platforms (Aliyun, Tencent, etc.).

Common scenes include hosting company official website, personal homepage, blog, etc.

Usage

Add the following F. yml to any static project:

service: my-static-demo

provider:
  name: aliyun ## cloud platform, aliyun,tencent, etc

deployType:
  type: static
  version: 3.0.0

package:
  include:
    -build ## Directory to Copy
  exclude:
    -package-lock.json ## Ignore package-lock.json files

custom:
  customDomain:
    domainName: auto ## automatically generates domain name

info

Sometimes package-lock.json files will cause the deployment package to be too large (enter dev dependencies).

Add dev dependency @midwayjs/cli.

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

Run npm run deploy.

Or use a different npm package to accelerate.

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

info

The --skipBuild parameter is used here to skip the build of the function. npm run build connects to the front-end build command.

By default, the build directory is used as the managed root directory. When you access the/route, the /index.html is automatically searched.

For example:

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

Optional configuration

In addition to the default configuration, we can do some additional configuration for static websites.

Modify managed directory

service: my-static-demo

provider:
  name: aliyun ## cloud platform, aliyun,tencent, etc

deployType:
  type: static
  version: 3.0.0
  config:
    rootDir: public          ## hosting directory becomes public

package:
  include: the directory to be copied by public ## changes with the configured managed Directory

Modify managed prefix

Sometimes a unified route prefix is required for deployment, such as /api/*.

service: my-static-demo

provider:
  name: aliyun ## cloud platform, aliyun,tencent, etc

deployType:
  type: static
  version: 3.0.0
  config:
    prefix: /api

package:
  include: build

In this way, all/will become/api/.

Configuration 404 page

Ordinary routes are based on managed directory structures and files. If a file that does not exist is accessed, a 404 is returned. We can specify a 404 page.

service: my-static-demo

provider:
  name: aliyun ## cloud platform, aliyun,tencent, etc

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

package:
  include: build

rewrite routing

Sometimes, we want to access some specific routes to a specific file. For example, we want to transfer all route requests to /index.html, and then let the front-end route process.

service: my-static-demo

provider:
  name: aliyun ## cloud platform, aliyun,tencent, etc

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

package:
  include: build

You can write multiple rewrite, and the rules are the same as koa-rewrite.

To exclude certain directories, you can use the @not syntax.

For example, exclude static directories.

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

Modify the name of the deployed function

You can use the name field.

service: my-static-demo

provider:
  name: aliyun ## cloud platform, aliyun,tencent, etc

deployType:
    type: static
  version: 3.0.0
  Name: app_idx ## function name

package:
  include: the directory to be copied by public ## changes with the configured managed Directory