Merge remote-tracking branch 'upstream/main'
This commit is contained in:
commit
bc49ca7482
35
examples/serverless-faas/README.md
Normal file
35
examples/serverless-faas/README.md
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
Serverless 云函数支持示例
|
||||||
|
===
|
||||||
|
|
||||||
|
演示了示例项目中的留言板,同时支持阿里云函数计算(FC),腾讯云云函数(SCF),和原生 NodeJS 部署的支持。
|
||||||
|
|
||||||
|
主要方式是在后端项目中区分为 3 个不同的入口点:
|
||||||
|
|
||||||
|
- `index.ts`:NodeJS 原生部署入口点
|
||||||
|
- `aliyun-fc.ts`:阿里云函数计算 FC 入口点
|
||||||
|
|
||||||
|
- `txcloud-scf.ts`:腾讯云云函数 SCF 入口点
|
||||||
|
|
||||||
|
## 部署方式
|
||||||
|
|
||||||
|
### 阿里云
|
||||||
|
|
||||||
|
1. 创建 HTTP 函数,`npm run build` 然后将 `dist` 目录下的代码上传到阿里云根目录
|
||||||
|
1. 在 Web IDE 终端执行命令:
|
||||||
|
```shell
|
||||||
|
npm i
|
||||||
|
```
|
||||||
|
1. 配置 **函数入口** 为 `aliyun-fc.handler`
|
||||||
|
1. 配置 **初始化函数** 为 `aliyun-fc.initializer`
|
||||||
|
1. 修改前端项目下 `client.ts` 中的后端地址,测试运行
|
||||||
|
|
||||||
|
### 腾讯云
|
||||||
|
|
||||||
|
1. 创建 Event 函数,`npm run build` 然后将 `dist` 目录上传到腾讯云,并更名为 `src` 目录
|
||||||
|
1. 在 Web IDE 终端执行命令:
|
||||||
|
```shell
|
||||||
|
cd src
|
||||||
|
npm i
|
||||||
|
```
|
||||||
|
1. 配置 **执行函数** 为 `txcloud-scf.handler`
|
||||||
|
1. 修改前端项目下 `client.ts` 中的后端地址,测试运行
|
3
examples/serverless-faas/backend/.gitignore
vendored
Normal file
3
examples/serverless-faas/backend/.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.DS_STORE
|
11
examples/serverless-faas/backend/.mocharc.js
Normal file
11
examples/serverless-faas/backend/.mocharc.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
module.exports = {
|
||||||
|
require: [
|
||||||
|
'ts-node/register',
|
||||||
|
],
|
||||||
|
timeout: 999999,
|
||||||
|
exit: true,
|
||||||
|
spec: [
|
||||||
|
'./test/**/*.test.ts'
|
||||||
|
],
|
||||||
|
'preserve-symlinks': true
|
||||||
|
}
|
30
examples/serverless-faas/backend/.vscode/launch.json
vendored
Normal file
30
examples/serverless-faas/backend/.vscode/launch.json
vendored
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "mocha current file",
|
||||||
|
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
|
||||||
|
"args": [
|
||||||
|
"${file}"
|
||||||
|
],
|
||||||
|
"internalConsoleOptions": "openOnSessionStart",
|
||||||
|
"cwd": "${workspaceFolder}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "ts-node current file",
|
||||||
|
"protocol": "inspector",
|
||||||
|
"args": [
|
||||||
|
"${relativeFile}"
|
||||||
|
],
|
||||||
|
"cwd": "${workspaceRoot}",
|
||||||
|
"runtimeArgs": [
|
||||||
|
"-r",
|
||||||
|
"ts-node/register"
|
||||||
|
],
|
||||||
|
"internalConsoleOptions": "openOnSessionStart"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
3
examples/serverless-faas/backend/.vscode/settings.json
vendored
Normal file
3
examples/serverless-faas/backend/.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"typescript.tsdk": "node_modules\\typescript\\lib"
|
||||||
|
}
|
30
examples/serverless-faas/backend/Dockerfile
Normal file
30
examples/serverless-faas/backend/Dockerfile
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
FROM node
|
||||||
|
|
||||||
|
# 使用淘宝 NPM 镜像(国内机器构建推荐启用)
|
||||||
|
# RUN npm config set registry https://registry.npm.taobao.org/
|
||||||
|
|
||||||
|
# npm install
|
||||||
|
ADD package*.json /src/
|
||||||
|
WORKDIR /src
|
||||||
|
RUN npm i
|
||||||
|
|
||||||
|
# build
|
||||||
|
ADD . /src
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# clean
|
||||||
|
RUN npm prune --production
|
||||||
|
|
||||||
|
# move
|
||||||
|
RUN rm -rf /app \
|
||||||
|
&& mv dist /app \
|
||||||
|
&& mv node_modules /app/ \
|
||||||
|
&& rm -rf /src
|
||||||
|
|
||||||
|
# ENV
|
||||||
|
ENV NODE_ENV production
|
||||||
|
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
CMD node index.js
|
31
examples/serverless-faas/backend/README.md
Normal file
31
examples/serverless-faas/backend/README.md
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
# TSRPC Server
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
### Local dev server
|
||||||
|
|
||||||
|
Dev server would restart automatically when code changed.
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Generate API document
|
||||||
|
|
||||||
|
Generate API document in swagger/openapi and markdown format.
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm run doc
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run unit Test
|
||||||
|
Execute `npm run dev` first, then execute:
|
||||||
|
```
|
||||||
|
npm run test
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
24
examples/serverless-faas/backend/package.json
Normal file
24
examples/serverless-faas/backend/package.json
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "serverless-faas-backend",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"main": "index.js",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "tsrpc-cli dev",
|
||||||
|
"build": "tsrpc-cli build",
|
||||||
|
"doc": "tsrpc-cli doc",
|
||||||
|
"test": "mocha test/**/*.test.ts"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/mocha": "^8.2.3",
|
||||||
|
"@types/node": "^15.14.9",
|
||||||
|
"mocha": "^9.1.3",
|
||||||
|
"onchange": "^7.1.0",
|
||||||
|
"ts-node": "^10.4.0",
|
||||||
|
"tsrpc-cli": "^2.3.0",
|
||||||
|
"typescript": "^4.5.4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"tsrpc": "^3.1.4"
|
||||||
|
}
|
||||||
|
}
|
26
examples/serverless-faas/backend/src/aliyun-fc.ts
Normal file
26
examples/serverless-faas/backend/src/aliyun-fc.ts
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
// 阿里云 - 函数计算:FC
|
||||||
|
// https://cloud.tencent.com/product/scf
|
||||||
|
|
||||||
|
import { init, server } from "./models/server";
|
||||||
|
|
||||||
|
// 阿里云函数计算 - HTTP函数
|
||||||
|
export async function handler(req: any, res: any, context: any) {
|
||||||
|
// JSON 请求
|
||||||
|
if (req.headers['content-type']?.includes('application/json')) {
|
||||||
|
let apiName = req.path.slice(1); // 去除开头的 "/"
|
||||||
|
let ret = await server.inputJSON(apiName, JSON.parse(req.body));
|
||||||
|
res.setStatusCode(ret.isSucc ? 200 : 500);
|
||||||
|
res.send(JSON.stringify(ret));
|
||||||
|
}
|
||||||
|
// 二进制请求
|
||||||
|
else {
|
||||||
|
let output = await server.inputBuffer(req.body);
|
||||||
|
res.send(Buffer.from(output));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 阿里云函数计算 - 初始化
|
||||||
|
export async function initializer(context: unknown, callback: Function) {
|
||||||
|
await init();
|
||||||
|
callback();
|
||||||
|
}
|
26
examples/serverless-faas/backend/src/api/ApiAddData.ts
Normal file
26
examples/serverless-faas/backend/src/api/ApiAddData.ts
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { ApiCall } from "tsrpc";
|
||||||
|
import { ReqAddData, ResAddData } from "../shared/protocols/PtlAddData";
|
||||||
|
import { AllData } from "./ApiGetData";
|
||||||
|
|
||||||
|
// This is a demo code file
|
||||||
|
// Feel free to delete it
|
||||||
|
|
||||||
|
export async function ApiAddData(call: ApiCall<ReqAddData, ResAddData>) {
|
||||||
|
// Error
|
||||||
|
if (call.req.content === '') {
|
||||||
|
call.error('Content is empty');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let time = new Date();
|
||||||
|
AllData.unshift({
|
||||||
|
content: call.req.content,
|
||||||
|
time: time
|
||||||
|
})
|
||||||
|
console.log('AllData', AllData)
|
||||||
|
|
||||||
|
// Success
|
||||||
|
call.succ({
|
||||||
|
time: time
|
||||||
|
});
|
||||||
|
}
|
13
examples/serverless-faas/backend/src/api/ApiGetData.ts
Normal file
13
examples/serverless-faas/backend/src/api/ApiGetData.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { ApiCall } from "tsrpc";
|
||||||
|
import { ReqGetData, ResGetData } from "../shared/protocols/PtlGetData";
|
||||||
|
|
||||||
|
// This is a demo code file
|
||||||
|
// Feel free to delete it
|
||||||
|
|
||||||
|
export async function ApiGetData(call: ApiCall<ReqGetData, ResGetData>) {
|
||||||
|
call.succ({
|
||||||
|
data: AllData
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AllData: { content: string, time: Date }[] = [];
|
8
examples/serverless-faas/backend/src/index.ts
Normal file
8
examples/serverless-faas/backend/src/index.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { init, server } from "./models/server";
|
||||||
|
|
||||||
|
// 普通 NodeJS 环境入口点
|
||||||
|
async function main() {
|
||||||
|
await init();
|
||||||
|
await server.start();
|
||||||
|
};
|
||||||
|
main();
|
19
examples/serverless-faas/backend/src/models/server.ts
Normal file
19
examples/serverless-faas/backend/src/models/server.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import path from "path";
|
||||||
|
import { HttpServer } from "tsrpc";
|
||||||
|
import { serviceProto } from "../shared/protocols/serviceProto";
|
||||||
|
|
||||||
|
// Create the Server
|
||||||
|
export const server = new HttpServer(serviceProto, {
|
||||||
|
port: 3000,
|
||||||
|
// Remove this to use binary mode (remove from the client too)
|
||||||
|
json: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize before server start
|
||||||
|
export async function init(delay?: boolean) {
|
||||||
|
// Auto implement APIs
|
||||||
|
await server.autoImplementApi(path.resolve(__dirname, '../api/'), delay);
|
||||||
|
|
||||||
|
// TODO
|
||||||
|
// Prepare something... (e.g. connect the db)
|
||||||
|
};
|
@ -0,0 +1,16 @@
|
|||||||
|
// This is a demo code file
|
||||||
|
// Feel free to delete it
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 增加数据
|
||||||
|
* 此处的注释将会自动附带到生成的 API 文档中
|
||||||
|
*/
|
||||||
|
export interface ReqAddData {
|
||||||
|
/** 要增加的消息内容 */
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ResAddData {
|
||||||
|
/** 服务端内容创建时间 */
|
||||||
|
time: Date
|
||||||
|
}
|
@ -0,0 +1,19 @@
|
|||||||
|
// This is a demo code file
|
||||||
|
// Feel free to delete it
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取数据
|
||||||
|
*/
|
||||||
|
export interface ReqGetData {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ResGetData {
|
||||||
|
/** 返回所有数据列表 */
|
||||||
|
data: {
|
||||||
|
/** 消息内容 */
|
||||||
|
content: string,
|
||||||
|
/** 创建时间 */
|
||||||
|
time: Date
|
||||||
|
}[]
|
||||||
|
}
|
@ -0,0 +1,11 @@
|
|||||||
|
export interface BaseRequest {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BaseResponse {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BaseConf {
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,98 @@
|
|||||||
|
import { ServiceProto } from 'tsrpc-proto';
|
||||||
|
import { ReqAddData, ResAddData } from './PtlAddData';
|
||||||
|
import { ReqGetData, ResGetData } from './PtlGetData';
|
||||||
|
|
||||||
|
// This is a demo service proto file (auto generated)
|
||||||
|
// Feel free to delete it
|
||||||
|
|
||||||
|
export interface ServiceType {
|
||||||
|
api: {
|
||||||
|
"AddData": {
|
||||||
|
req: ReqAddData,
|
||||||
|
res: ResAddData
|
||||||
|
},
|
||||||
|
"GetData": {
|
||||||
|
req: ReqGetData,
|
||||||
|
res: ResGetData
|
||||||
|
}
|
||||||
|
},
|
||||||
|
msg: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const serviceProto: ServiceProto<ServiceType> = {
|
||||||
|
"version": 1,
|
||||||
|
"services": [
|
||||||
|
{
|
||||||
|
"id": 0,
|
||||||
|
"name": "AddData",
|
||||||
|
"type": "api"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "GetData",
|
||||||
|
"type": "api"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"types": {
|
||||||
|
"PtlAddData/ReqAddData": {
|
||||||
|
"type": "Interface",
|
||||||
|
"properties": [
|
||||||
|
{
|
||||||
|
"id": 0,
|
||||||
|
"name": "content",
|
||||||
|
"type": {
|
||||||
|
"type": "String"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"PtlAddData/ResAddData": {
|
||||||
|
"type": "Interface",
|
||||||
|
"properties": [
|
||||||
|
{
|
||||||
|
"id": 0,
|
||||||
|
"name": "time",
|
||||||
|
"type": {
|
||||||
|
"type": "Date"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"PtlGetData/ReqGetData": {
|
||||||
|
"type": "Interface"
|
||||||
|
},
|
||||||
|
"PtlGetData/ResGetData": {
|
||||||
|
"type": "Interface",
|
||||||
|
"properties": [
|
||||||
|
{
|
||||||
|
"id": 0,
|
||||||
|
"name": "data",
|
||||||
|
"type": {
|
||||||
|
"type": "Array",
|
||||||
|
"elementType": {
|
||||||
|
"type": "Interface",
|
||||||
|
"properties": [
|
||||||
|
{
|
||||||
|
"id": 0,
|
||||||
|
"name": "content",
|
||||||
|
"type": {
|
||||||
|
"type": "String"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "time",
|
||||||
|
"type": {
|
||||||
|
"type": "Date"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
26
examples/serverless-faas/backend/src/txcloud-scf.ts
Normal file
26
examples/serverless-faas/backend/src/txcloud-scf.ts
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
// 腾讯云 - 云函数:SCF
|
||||||
|
// https://cloud.tencent.com/product/scf
|
||||||
|
|
||||||
|
import { init, server } from "./models/server";
|
||||||
|
|
||||||
|
export async function handler(event: any, context: any) {
|
||||||
|
// init
|
||||||
|
await ensureInit();
|
||||||
|
|
||||||
|
let apiName = event.path.slice(event.requestContext.path.length + 1); // 从 URL 中提取 ApiName
|
||||||
|
let ret = await server.inputJSON(apiName, JSON.parse(event.body));
|
||||||
|
|
||||||
|
return {
|
||||||
|
"statusCode": ret.isSucc ? 200 : 500,
|
||||||
|
"headers": { "Content-Type": "application/json" },
|
||||||
|
"body": JSON.stringify(ret)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let promiseInit: Promise<void> | undefined;
|
||||||
|
async function ensureInit() {
|
||||||
|
if (!promiseInit) {
|
||||||
|
promiseInit = init(true);
|
||||||
|
}
|
||||||
|
return promiseInit;
|
||||||
|
}
|
39
examples/serverless-faas/backend/test/api/data.test.ts
Normal file
39
examples/serverless-faas/backend/test/api/data.test.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import assert from 'assert';
|
||||||
|
import { HttpClient, TsrpcError } from 'tsrpc';
|
||||||
|
import { serviceProto } from '../../src/shared/protocols/serviceProto';
|
||||||
|
|
||||||
|
// 1. EXECUTE `npm run dev` TO START A LOCAL DEV SERVER
|
||||||
|
// 2. EXECUTE `npm test` TO START UNIT TEST
|
||||||
|
|
||||||
|
describe('ApiGetData', function () {
|
||||||
|
let client = new HttpClient(serviceProto, {
|
||||||
|
server: 'http://127.0.0.1:3000',
|
||||||
|
logger: console
|
||||||
|
});
|
||||||
|
|
||||||
|
it('AddData & GetData', async function () {
|
||||||
|
// Get data before add
|
||||||
|
let ret1 = await client.callApi('GetData', {});
|
||||||
|
assert.strictEqual(ret1.isSucc, true);
|
||||||
|
|
||||||
|
// AddData
|
||||||
|
let ret2 = await client.callApi('AddData', { content: 'AABBCC' });
|
||||||
|
assert.strictEqual(ret2.isSucc, true);
|
||||||
|
|
||||||
|
// Get data again, the new data should appear
|
||||||
|
let ret3 = await client.callApi('GetData', {});
|
||||||
|
assert.strictEqual(ret3.isSucc, true);
|
||||||
|
assert.strictEqual(ret3.res!.data.length, ret1.res!.data.length + 1);
|
||||||
|
assert.strictEqual(ret3.res!.data[0].content, 'AABBCC');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('AddData: Check content is empty', async function () {
|
||||||
|
let ret = await client.callApi('AddData', {
|
||||||
|
content: ''
|
||||||
|
});
|
||||||
|
assert.deepStrictEqual(ret, {
|
||||||
|
isSucc: false,
|
||||||
|
err: new TsrpcError('Content is empty')
|
||||||
|
});
|
||||||
|
})
|
||||||
|
})
|
15
examples/serverless-faas/backend/test/tsconfig.json
Normal file
15
examples/serverless-faas/backend/test/tsconfig.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": [
|
||||||
|
"es2018"
|
||||||
|
],
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es2018",
|
||||||
|
"outDir": "dist",
|
||||||
|
"strict": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"moduleResolution": "node"
|
||||||
|
}
|
||||||
|
}
|
18
examples/serverless-faas/backend/tsconfig.json
Normal file
18
examples/serverless-faas/backend/tsconfig.json
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": [
|
||||||
|
"es2018"
|
||||||
|
],
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es2018",
|
||||||
|
"outDir": "dist",
|
||||||
|
"strict": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"moduleResolution": "node"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
]
|
||||||
|
}
|
39
examples/serverless-faas/backend/tsrpc.config.ts
Normal file
39
examples/serverless-faas/backend/tsrpc.config.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { CodeTemplate, TsrpcConfig } from 'tsrpc-cli';
|
||||||
|
|
||||||
|
const tsrpcConf: TsrpcConfig = {
|
||||||
|
// Generate ServiceProto
|
||||||
|
proto: [
|
||||||
|
{
|
||||||
|
ptlDir: 'src/shared/protocols', // Protocol dir
|
||||||
|
output: 'src/shared/protocols/serviceProto.ts', // Path for generated ServiceProto
|
||||||
|
apiDir: 'src/api', // API dir
|
||||||
|
docDir: 'docs', // API documents dir
|
||||||
|
ptlTemplate: CodeTemplate.getExtendedPtl(),
|
||||||
|
// msgTemplate: CodeTemplate.getExtendedMsg(),
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// Sync shared code
|
||||||
|
sync: [
|
||||||
|
{
|
||||||
|
from: 'src/shared',
|
||||||
|
to: '../frontend/src/shared',
|
||||||
|
type: 'symlink' // Change this to 'copy' if your environment not support symlink
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// Dev server
|
||||||
|
dev: {
|
||||||
|
autoProto: true, // Auto regenerate proto
|
||||||
|
autoSync: true, // Auto sync when file changed
|
||||||
|
autoApi: true, // Auto create API when ServiceProto updated
|
||||||
|
watch: 'src', // Restart dev server when these files changed
|
||||||
|
entry: 'src/index.ts', // Dev server command: node -r ts-node/register {entry}
|
||||||
|
},
|
||||||
|
// Build config
|
||||||
|
build: {
|
||||||
|
autoProto: true, // Auto generate proto before build
|
||||||
|
autoSync: true, // Auto sync before build
|
||||||
|
autoApi: true, // Auto generate API before build
|
||||||
|
outDir: 'dist', // Clean this dir before build
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default tsrpcConf;
|
1315
examples/serverless-faas/backend/yarn.lock
Normal file
1315
examples/serverless-faas/backend/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
3
examples/serverless-faas/frontend/.gitignore
vendored
Normal file
3
examples/serverless-faas/frontend/.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.DS_STORE
|
||||||
|
node_modules
|
||||||
|
dist
|
24
examples/serverless-faas/frontend/package.json
Normal file
24
examples/serverless-faas/frontend/package.json
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "serverless-faas-frontend",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "webpack serve --mode=development --open",
|
||||||
|
"build": "webpack --mode=production"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"copy-webpack-plugin": "^9.1.0",
|
||||||
|
"html-webpack-plugin": "^5.5.0",
|
||||||
|
"ts-loader": "^9.2.6",
|
||||||
|
"typescript": "^4.5.4",
|
||||||
|
"webpack": "^5.65.0",
|
||||||
|
"webpack-cli": "^4.9.1",
|
||||||
|
"webpack-dev-server": "^3.11.3"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"tsrpc-browser": "^3.1.4"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"defaults"
|
||||||
|
]
|
||||||
|
}
|
BIN
examples/serverless-faas/frontend/public/favicon.ico
Normal file
BIN
examples/serverless-faas/frontend/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
83
examples/serverless-faas/frontend/public/index.css
Normal file
83
examples/serverless-faas/frontend/public/index.css
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body>* {
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send,
|
||||||
|
.list {
|
||||||
|
width: 370px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send>* {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px auto;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send>textarea {
|
||||||
|
height: 80px;
|
||||||
|
background: #f7f7f7;
|
||||||
|
border: #eeeeee 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send>textarea:focus {
|
||||||
|
background: #fff;
|
||||||
|
border-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send>button {
|
||||||
|
background: #215fa4;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send>button:hover {
|
||||||
|
background: #4b80bb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
list-style: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
background: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list>li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background: #fff;
|
||||||
|
line-height: 1.5em;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list>li>.content {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list>li>.time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4b80bb;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list>li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
29
examples/serverless-faas/frontend/public/index.html
Normal file
29
examples/serverless-faas/frontend/public/index.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="renderer" content="webkit" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>TSRPC Browser</title>
|
||||||
|
<link rel="stylesheet" href="index.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>TSRPC Guestbook</h1>
|
||||||
|
|
||||||
|
<div class="send">
|
||||||
|
<textarea placeholder="Say something..."></textarea>
|
||||||
|
<button>Send</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="list">
|
||||||
|
<!-- <li>
|
||||||
|
<div class="content">Hello, World</div>
|
||||||
|
<div class="time">11:23:23</div>
|
||||||
|
</li> -->
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
10
examples/serverless-faas/frontend/src/client.ts
Normal file
10
examples/serverless-faas/frontend/src/client.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { HttpClient } from "tsrpc-browser";
|
||||||
|
import { serviceProto } from "./shared/protocols/serviceProto";
|
||||||
|
|
||||||
|
// Create Client
|
||||||
|
export const client = new HttpClient(serviceProto, {
|
||||||
|
server: "http://127.0.0.1:3000",
|
||||||
|
// Remove this to use binary mode (remove from the server too)
|
||||||
|
json: true,
|
||||||
|
logger: console,
|
||||||
|
});
|
9
examples/serverless-faas/frontend/src/env.d.ts
vendored
Normal file
9
examples/serverless-faas/frontend/src/env.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// TSRPC would decode ObjectId as string in frontend.
|
||||||
|
declare module 'mongodb' {
|
||||||
|
export type ObjectId = string;
|
||||||
|
export type ObjectID = string;
|
||||||
|
}
|
||||||
|
declare module 'bson' {
|
||||||
|
export type ObjectId = string;
|
||||||
|
export type ObjectID = string;
|
||||||
|
}
|
50
examples/serverless-faas/frontend/src/index.ts
Normal file
50
examples/serverless-faas/frontend/src/index.ts
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import { client } from './client';
|
||||||
|
|
||||||
|
// This is a demo code file
|
||||||
|
// Feel free to modify or clear it
|
||||||
|
|
||||||
|
// Reload message list
|
||||||
|
async function loadList() {
|
||||||
|
let ret = await client.callApi('GetData', {});
|
||||||
|
|
||||||
|
// Error
|
||||||
|
if (!ret.isSucc) {
|
||||||
|
alert(ret.err.message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Success
|
||||||
|
const list = document.querySelector('.list')!;
|
||||||
|
list.innerHTML = '';
|
||||||
|
ret.res.data.forEach(v => {
|
||||||
|
let li = document.createElement('li');
|
||||||
|
li.innerHTML = `<div class="content"></div><div class="time"></div>`;
|
||||||
|
(li.querySelector('.content') as HTMLDivElement).innerText = v.content;
|
||||||
|
(li.querySelector('.time') as HTMLDivElement).innerText = v.time.toLocaleTimeString();
|
||||||
|
list.appendChild(li);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Send Message
|
||||||
|
async function send() {
|
||||||
|
const textarea = document.querySelector('.send>textarea') as HTMLTextAreaElement;
|
||||||
|
let ret = await client.callApi('AddData', {
|
||||||
|
content: textarea.value
|
||||||
|
});
|
||||||
|
|
||||||
|
// Error
|
||||||
|
if (!ret.isSucc) {
|
||||||
|
alert(ret.err.message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Success
|
||||||
|
textarea.value = '';
|
||||||
|
loadList();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bind Events
|
||||||
|
(document.querySelector('.send>button') as HTMLButtonElement).onclick = send;
|
||||||
|
|
||||||
|
// Load list after page load
|
||||||
|
loadList();
|
1
examples/serverless-faas/frontend/src/shared
Symbolic link
1
examples/serverless-faas/frontend/src/shared
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
E:/Projects/tsrpc-examples/examples/serverless-faas/backend/src/shared
|
23
examples/serverless-faas/frontend/tsconfig.json
Normal file
23
examples/serverless-faas/frontend/tsconfig.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"es2015"
|
||||||
|
],
|
||||||
|
"module": "esnext",
|
||||||
|
"target": "es5",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"outDir": "dist",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"sourceMap": true,
|
||||||
|
"isolatedModules": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
]
|
||||||
|
}
|
56
examples/serverless-faas/frontend/webpack.config.js
Normal file
56
examples/serverless-faas/frontend/webpack.config.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
const webpack = require('webpack');
|
||||||
|
const path = require('path');
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||||
|
|
||||||
|
const isProduction = process.argv.indexOf('--mode=production') > -1;
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './src/index.ts',
|
||||||
|
output: {
|
||||||
|
filename: 'bundle.[contenthash].js',
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
clean: true
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.ts', '.tsx', '.js', '.mjs', '.cjs']
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.tsx?$/,
|
||||||
|
use: [{
|
||||||
|
loader: 'ts-loader',
|
||||||
|
options: {
|
||||||
|
// Compile to ES5 in production mode for better compatibility
|
||||||
|
// Compile to ES2018 in development for better debugging (like async/await)
|
||||||
|
compilerOptions: !isProduction ? {
|
||||||
|
"target": "es2018",
|
||||||
|
} : undefined
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
exclude: /node_modules/
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// Copy "public" to "dist"
|
||||||
|
new CopyWebpackPlugin({
|
||||||
|
patterns: [{
|
||||||
|
from: 'public',
|
||||||
|
to: '.',
|
||||||
|
toType: 'dir',
|
||||||
|
globOptions: {
|
||||||
|
gitignore: true,
|
||||||
|
ignore: [path.resolve(__dirname, 'public/index.html').replace(/\\/g, '/')]
|
||||||
|
},
|
||||||
|
noErrorOnMissing: true
|
||||||
|
}]
|
||||||
|
}),
|
||||||
|
// Auto add <script> to "index.html"
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: 'public/index.html'
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
devtool: isProduction ? false : 'inline-source-map'
|
||||||
|
}
|
3624
examples/serverless-faas/frontend/yarn.lock
Normal file
3624
examples/serverless-faas/frontend/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user