2.3.0 • Published 2 years ago

blueprint-ssr v2.3.0

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

Window 避雷

jnpm i 最好在git bash里

 首先要npm i cross-env,
 然后在package->script中的所有配置前加上cross-env,
 最后在devDependencies下加上   "cross-env": "^7.0.2",

 ssr-cli也需要手动下载安装
 @jdthfe/ssr-cli

 配置好以上两项之后就可以啦
    npm run build（只需要最开始的一次）
    npm run dev

启动项目之后，访问地址：http://localhost:3000/nps

目录结构

tsconfig/server.json - server 的配置文件 tsconfig/browser.json - client 的配置文件 tsconfig/tool.json - 这里是 webpack 配置文件 browser - 客户端入口 server - 服务端入口 shared - 客户端与服务端共有部分，ssr 用到的组件 scripts - 所有自动化的命令 config - webpack 配置文件

node 版本 10.. 以上

目录介绍

  • ssr 这个目录就是 ssr 项目的 demo
    • ssr/src 这个目录是项目的源代码
      • ssr/src/server :服务端代码目录
        • ssr/src/server/config 所有的配置写到这里，注意 config.ts 这个文件名字是不能改的
        • ssr/src/server/schedule 定时任务写到这里
        • ssr/src/server/service 数据请求
        • ssr/src/server/middleware 中间件，需要在调用使用哪些中件间，可以在 config 中配置
        • ssr/src/server/controller 业务操作与 ssr 都在这里面
      • ssr/src/browser :客户端代码目录
    • ssr/config 这个目录是 webpack 配置的位置，其中 defaultSettings.js 是默认配置
    • ssr/tsconfig/serverTsConfig.json 这个文件是 server 执行 ts 编译的配置文件
  • ssr-cli 这个目录是执行 ts 编译与 webpack 编译的命令行功能

安装依赖

  1. ssr 文件夹目录下面执行 sudo jnpm i

  2. ssr-cli 目录下面执行 yarn

  3. 注意：ssr 的依赖安装一定要用 jnpm，因为依赖中@jdthfe/chicken 这个模块是发布在京东内网的

开发

  1. 在 ssr-cli 目录里面安装好依赖之后执行 npm run build，（只需要执行一次就可以了，执行 npm run build 是为了生成 ssr-cli 生成的 js 文件）
  2. 在 ssr 目录里面 npm run build:dev(执行一次就可以)然后 npm run watch
  3. npm run dev
  4. 访问 http://localhost:3000

日志打印

this.app.logger.log() process.stdout 打印日志，namespace 默认为 pista this.app.logger.debug() process.stdout 打印日志，namespace 默认为项目名 this.app.logger.error() process.stderr 打印日志，namespace 默认为项目名 this.app.logger.logbook process.stdout 打印日志，并且记入 logbook 日志，namespace 默认为 logbook this.app.logger.logbook.system process.stdout 系统日志，文件名以 system.log 结尾，即*.system.log this.app.logger.logbook.error 错误日志，文件名以 error.log 结尾，即*.error.log this.app.logger.logbook.schedule 定时任务日志，文件名以 schedule.log 结尾，即*.schedule.log this.app.logger.ump process.stdout 打印日志，并且记入 ump 日志，namespace 默认为 ump

this.app.logger.ump.tp 方法性能监控，文件名以 tp.log 结尾，即*.tp.log this.app.logger.ump.alive 系统存活监控及方法心跳，文件名以 alive.log 结尾，即.alive. log this.app.logger.ump.business 自定义报警，文件名以 business.log 结尾，即.business.log this.app.logger.ump.biz 业务监控及流程监控，文件名以 biz.log 结尾，即*.biz.log

监控文档: https://cf.jd.com/pages/viewpage.action?pageId=73256284

如何配合现有的 vendor 使用

symlink 里面增加配置 {from : string, to: string} from 需要被引用的绝对地址 to 需要创建的地址，相对于开发库的根目录，即 process.cwd `

{
        from: '/Users/liujianchuan/JD/static.intl/src/main/webapp/static',
        to: './myapp/browser/static',
},

`

prd https://app.zeplin.io/project/5afa85e27a93faab67426db2

vendor 默认不会被部署，现在使用通用的 vendor

关于修改静态资源版本号

代码内修改

DUCC 配置中心修改

Chrome 无痕模式进入，http://th.ducc.jd.com/

key：staticVersionNPS

配置项进入路径-生产环境：命名空间 > thjoypay > thjoypay > prod 配置项进入路径-预发环境：命名空间 > thjoypay > thjoypay > prod

目录结构

tsconfig/server.json - server 的配置文件 tsconfig/browser.json - client 的配置文件 tsconfig/tool.json - 这里是 webpack 配置文件 browser - 客户端入口 server - 服务端入口 shared - 客户端与服务端共有部分，ssr 用到的组件 scripts - 所有自动化的命令 config - webpack 配置文件

node 版本 10.. 以上

目录介绍

  • ssr 这个目录就是 ssr 项目的 demo
    • ssr/src 这个目录是项目的源代码
      • ssr/src/server :服务端代码目录
        • ssr/src/server/config 所有的配置写到这里，注意 config.ts 这个文件名字是不能改的
        • ssr/src/server/schedule 定时任务写到这里
        • ssr/src/server/service 数据请求
        • ssr/src/server/middleware 中间件，需要在调用使用哪些中件间，可以在 config 中配置
        • ssr/src/server/controller 业务操作与 ssr 都在这里面
      • ssr/src/browser :客户端代码目录
    • ssr/config 这个目录是 webpack 配置的位置，其中 defaultSettings.js 是默认配置
    • ssr/tsconfig/serverTsConfig.json 这个文件是 server 执行 ts 编译的配置文件
  • ssr-cli 这个目录是执行 ts 编译与 webpack 编译的命令行功能

安装依赖

  1. ssr 文件夹目录下面执行 sudo jnpm i

  2. ssr-cli 目录下面执行 yarn

  3. 注意：ssr 的依赖安装一定要用 jnpm，因为依赖中@jdthfe/chicken 这个模块是发布在京东内网的

开发

  1. 在 ssr-cli 目录里面安装好依赖之后执行 npm run build，（只需要执行一次就可以了，执行 npm run build 是为了生成 ssr-cli 生成的 js 文件）
  2. 在 ssr 目录里面 npm run build:dev(执行一次就可以)然后 npm run watch
  3. npm run dev
  4. 访问 http://localhost:3000

日志打印

this.app.logger.log() process.stdout 打印日志，namespace 默认为 pista this.app.logger.debug() process.stdout 打印日志，namespace 默认为项目名 this.app.logger.error() process.stderr 打印日志，namespace 默认为项目名 this.app.logger.logbook process.stdout 打印日志，并且记入 logbook 日志，namespace 默认为 logbook this.app.logger.logbook.system process.stdout 系统日志，文件名以 system.log 结尾，即*.system.log this.app.logger.logbook.error 错误日志，文件名以 error.log 结尾，即*.error.log this.app.logger.logbook.schedule 定时任务日志，文件名以 schedule.log 结尾，即*.schedule.log this.app.logger.ump process.stdout 打印日志，并且记入 ump 日志，namespace 默认为 ump

this.app.logger.ump.tp 方法性能监控，文件名以 tp.log 结尾，即*.tp.log this.app.logger.ump.alive 系统存活监控及方法心跳，文件名以 alive.log 结尾，即.alive. log this.app.logger.ump.business 自定义报警，文件名以 business.log 结尾，即.business.log this.app.logger.ump.biz 业务监控及流程监控，文件名以 biz.log 结尾，即*.biz.log

监控文档: https://cf.jd.com/pages/viewpage.action?pageId=73256284

如何配合现有的 vendor 使用

symlink 里面增加配置 {from : string, to: string} from 需要被引用的绝对地址 to 需要创建的地址，相对于开发库的根目录，即 process.cwd `

{
        from: '/Users/liujianchuan/JD/static.intl/src/main/webapp/static',
        to: './myapp/browser/static',
},

`

prd https://app.zeplin.io/project/5afa85e27a93faab67426db2

vendor 默认不会被部署，现在使用通用的 vendor

关于修改静态资源版本号

代码内修改

DUCC 配置中心修改

Chrome 无痕模式进入，http://th.ducc.jd.com/

key：staticVersionNPS

配置项进入路径-生产环境：命名空间 > thjoypay > thjoypay > prod 配置项进入路径-预发环境：命名空间 > thjoypay > thjoypay > prod

目录结构

tsconfig/server.json - server 的配置文件 tsconfig/browser.json - client 的配置文件 tsconfig/tool.json - 这里是 webpack 配置文件 browser - 客户端入口 server - 服务端入口 shared - 客户端与服务端共有部分，ssr 用到的组件 scripts - 所有自动化的命令 config - webpack 配置文件

node 版本 10.. 以上

目录介绍

  • ssr 这个目录就是 ssr 项目的 demo
    • ssr/src 这个目录是项目的源代码
      • ssr/src/server :服务端代码目录
        • ssr/src/server/config 所有的配置写到这里，注意 config.ts 这个文件名字是不能改的
        • ssr/src/server/schedule 定时任务写到这里
        • ssr/src/server/service 数据请求
        • ssr/src/server/middleware 中间件，需要在调用使用哪些中件间，可以在 config 中配置
        • ssr/src/server/controller 业务操作与 ssr 都在这里面
      • ssr/src/browser :客户端代码目录
    • ssr/config 这个目录是 webpack 配置的位置，其中 defaultSettings.js 是默认配置
    • ssr/tsconfig/serverTsConfig.json 这个文件是 server 执行 ts 编译的配置文件
  • ssr-cli 这个目录是执行 ts 编译与 webpack 编译的命令行功能

安装依赖

  1. ssr 文件夹目录下面执行 sudo jnpm i

  2. ssr-cli 目录下面执行 yarn

  3. 注意：ssr 的依赖安装一定要用 jnpm，因为依赖中@jdthfe/chicken 这个模块是发布在京东内网的

开发

  1. 在 ssr-cli 目录里面安装好依赖之后执行 npm run build，（只需要执行一次就可以了，执行 npm run build 是为了生成 ssr-cli 生成的 js 文件）
  2. 在 ssr 目录里面 npm run build:dev(执行一次就可以)然后 npm run watch
  3. npm run dev
  4. 访问 http://localhost:3000

日志打印

this.app.logger.log() process.stdout 打印日志，namespace 默认为 pista this.app.logger.debug() process.stdout 打印日志，namespace 默认为项目名 this.app.logger.error() process.stderr 打印日志，namespace 默认为项目名 this.app.logger.logbook process.stdout 打印日志，并且记入 logbook 日志，namespace 默认为 logbook this.app.logger.logbook.system process.stdout 系统日志，文件名以 system.log 结尾，即*.system.log this.app.logger.logbook.error 错误日志，文件名以 error.log 结尾，即*.error.log this.app.logger.logbook.schedule 定时任务日志，文件名以 schedule.log 结尾，即*.schedule.log this.app.logger.ump process.stdout 打印日志，并且记入 ump 日志，namespace 默认为 ump

this.app.logger.ump.tp 方法性能监控，文件名以 tp.log 结尾，即*.tp.log this.app.logger.ump.alive 系统存活监控及方法心跳，文件名以 alive.log 结尾，即.alive. log this.app.logger.ump.business 自定义报警，文件名以 business.log 结尾，即.business.log this.app.logger.ump.biz 业务监控及流程监控，文件名以 biz.log 结尾，即*.biz.log

监控文档: https://cf.jd.com/pages/viewpage.action?pageId=73256284

如何配合现有的 vendor 使用

symlink 里面增加配置 {from : string, to: string} from 需要被引用的绝对地址 to 需要创建的地址，相对于开发库的根目录，即 process.cwd `

{
        from: '/Users/liujianchuan/JD/static.intl/src/main/webapp/static',
        to: './myapp/browser/static',
},

`

prd https://app.zeplin.io/project/5afa85e27a93faab67426db2

vendor 默认不会被部署，现在使用通用的 vendor

关于修改静态资源版本号

代码内修改

1）./config/config.js

key: staticVersion

这个 key 控制的是执行打包命令（cnpm run deploy）后，目录的带版本号的路径。

  1. ./src/server/app/config/ 下存在 production.ts, development.ts, local,ts 三个文件，分别控制生产，测试，本地。

DUCC 配置中心修改

Chrome 无痕模式进入，http://th.ducc.jd.com/

key：staticVersionNPS

配置项进入路径-生产环境：命名空间 > thjoypay > thjoypay > prod

配置项进入路径-预发环境：命名空间 > thjoypay > thjoypay > beta

配置项进入路径-开发环境：命名空间 > thjoypay > thjoypay > local

本地开发

cnpm run build && cnpm run dev

部署

cnpm run deploy

http://th.jdos.jd.com/#/thnps/thnps/group/

预发

考虑到资源最大化利用，通用头的配置参数部署在 NPS

通用头配置参数

本地

http://localhost:3000/mhdr4sharebuy

网关接口

https://beta-api.jd.co.th/client.action?body=%7B%22noResponse%22%3Atrue%7D&functionId=mhdr4sharebuy&client=pc&clientVersion=2.0.0&lang=en_US

Redis

1、注册地址http://jimdb.th.jd.com/login.html（用户名一般为erp）

2、访问http://jimdb.th.jd.com/#/dashboard/

安装 cnpm install redis -S

JD Redis 管理 http://jimdb.jd.com/overview#/dashboard/

常见问题

chicken initing...
/Users/xujinglong/git/nps/node_modules/@jdthfe/chicken/lib/core/bootstrap/mixin/controller.js:71
        throw error;
        ^

TypeError: Cannot convert undefined or null to object
    at Function.getOwnPropertyNames (<anonymous>)
    at wrapClass (/Users/xujinglong/git/nps/node_modules/@jdthfe/chicken/lib/core/bootstrap/mixin/controller.js:13:29)
    at throughDirs (/Users/xujinglong/git/nps/node_modules/@jdthfe/chicken/lib/core/bootstrap/mixin/controller.js:60:42)
    at Booter.initController (/Users/xujinglong/git/nps/node_modules/@jdthfe/chicken/lib/core/bootstrap/mixin/controller.js:68:9)
    at Application.init (/Users/xujinglong/git/nps/node_modules/@jdthfe/chicken/index.js:49:24)
    at new Application (/Users/xujinglong/git/nps/node_modules/@jdthfe/chicken/index.js:13:14)
    at Object.<anonymous> (/Users/xujinglong/git/nps/temp/server/index.js:29:13)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)

解决办法：把项目根目录下的 temp 删除即可

blueprintssr
@jdthfe/chicken@jdthfe/euiaxiosbabel-plugin-importcore-jscross-envfacebook-nodejs-business-sdkhttp-proxy-middlewareintlkoa-bodyparserkoa-staticmoment-timezonenanoidreactreact-cookiesreact-domreact-hooks-testing-libraryreact-intlreact-loadablereact-router-configreact-router-domredis
@everything-registry/sub-chunk-1247
2.3.0

2 years ago