mw2-antd
基于 antd 的 midwayjs V2 静态项目 函数计算发布案例
如何使用
clone 项目
git clone https://github.com/mowatermelon/mw2-antd.git
安装依赖
npm i
启动本地项目
npm run dev
修改 publicPath 配置
修改 config/config.ts
文件,注意将 /mw2-antd/
修改为发布域名的子域名,如果是根域名发布,则删除 publicPath
的配置,使用默认值 /
// https://umijs.org/config/
export default defineConfig({
...
publicPath: process.env.NODE_ENV === 'production' ? '/mw2-antd/' : '/',
...
})
配置项目秘钥
npm run rconfig
第一次发布的时候 会需要配置 阿里云信息
$ npm run deploy
? Aliyun Account ID ***********
# https://fc.console.aliyun.com/fc/overview/cn-shanghai
? Aliyun Access Key ID *****************
? Aliyun Access Key Secret ***************
# https://fc.console.aliyun.com/fc/service/
? Default region name cn-shanghai
? The timeout in seconds for each SDK client invoking
100
? The maximum number of retries for each SDK client 10
0
? Allow to anonymously report usage statistics to impr
ove the tool over time? Yes
? Use custom endpoint? Yes
构建 && 发布 midway 项目
npm run deploy
官方文档
https://www.yuque.com/midwayjs/midway_v2/migrate_static
主要就是 配置 f.yml 再加上 @midwayjs/cli
依赖,再配置指令 "deploy": "npm run build && midway-bin deploy --skipBuild"
就可以了,但是实际跑起来根本不是这样。
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 ## 自动生成域名
背景
项目是使用了 antd
TS
umi
技术栈,但是midway-bin deploy
在 ts 项目中根本不可以。
主要遇见编译问题
- error TS5055 Cannot write file '{0}' because it would overwrite input file. 无法写入文件“{0}”,因为它会覆盖输入文件。
- error TS6059 File '{0}' is not under 'rootDir' '{1}'. 'rootDir' is expected to contain all source files. 文件“{0}”不在 "rootDir"“{1}”下。"rootDir" 应包含所有源文件。
- error TS2724
- 构建包过大,需要通过 fun 发布,添加 fun 配置项
完全没有读取项目的 tsconfig.json
配置,还有的说模块未输出,没有修改的思路,有的竟然还读取了 node_modules
中的包 exports 问题,弄了一下午,发现需要改的包越来越多这样也不利于之后升级。
解决思路
ts 编译问题
修改 config/config.ts
修改 outputPath 配置
// https://umijs.org/config/
export default defineConfig({
...
outputPath: 'build/build',
...
})
修改 tsconfig.json
修改 outputPath 配置
{
"compilerOptions": {
"outDir": "build/dist",
...
},
...
}
修改 package.json
修改 deploy 指令逻辑,将构建之后的产物全部放在 build 文件夹中,build 文件夹中主要包含两个文件夹 build
和 dist
还有 f.yml 文件,将编译之后文件直接 发布到函数中,最大化减少发布的包大小。
{
...
"scripts": {
"build": "umi build",
"deploy": "npm run build && cp -R f.yml ./build/f.yml && cd ./build && ../node_modules/.bin/midway-bin deploy --skipBuild",
},
...
}
发布之后 mock server 未被正常映射
这个暂时没有考虑解决,直接去除了项目中调用 mock 的逻辑,因为这边都是有对应后台服务的,不需要 mock
配置 web 服务域名
配置服务自定义域名
https://fc.console.aliyun.com/fc/cname/${region}
需要请设置自定义域名的 CNAME 配置, 自定义域名需要解析到服务所在的 Endpoint,
注意设置匹配路径是 /*
函数名称就是 app_index
如果购买了 SSL 证书,也可以配置一下