{"id":13498624,"url":"https://github.com/yugasun/serverless-egg-ssr-template","last_synced_at":"2026-07-18T13:43:37.631Z","repository":{"id":80421614,"uuid":"239989130","full_name":"yugasun/serverless-egg-ssr-template","owner":"yugasun","description":"Serverless + Egg.js + React SSR Boilerplate.","archived":false,"fork":false,"pushed_at":"2020-02-12T11:14:34.000Z","size":1512,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-26T04:33:10.031Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://service-iriwevoq-1251556596.gz.apigw.tencentcs.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yugasun.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-02-12T10:48:16.000Z","updated_at":"2020-05-01T12:44:35.000Z","dependencies_parsed_at":"2023-06-07T18:30:24.452Z","dependency_job_id":null,"html_url":"https://github.com/yugasun/serverless-egg-ssr-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/yugasun/serverless-egg-ssr-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yugasun%2Fserverless-egg-ssr-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yugasun%2Fserverless-egg-ssr-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yugasun%2Fserverless-egg-ssr-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yugasun%2Fserverless-egg-ssr-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yugasun","download_url":"https://codeload.github.com/yugasun/serverless-egg-ssr-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yugasun%2Fserverless-egg-ssr-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35619777,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-18T02:00:07.223Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T21:00:38.589Z","updated_at":"2026-07-18T13:43:37.598Z","avatar_url":"https://github.com/yugasun.png","language":"JavaScript","funding_links":[],"categories":["开发模板"],"sub_categories":[],"readme":"# serverless-egg-ssr-template\n\n基于 Serverless + Egg + React + Webpack 服务端渲染 SSR (Server Side Render) 工程\n骨架项目。**项目克隆自 [egg-react-webpack-boilerplate](https://github.com/easy-team/egg-react-webpack-boilerplate)，并针对 `serverless` 架构做了适配处理。**\n\n- 线上访问: http://service-iriwevoq-1251556596.gz.apigw.tencentcs.com/\n- 文档请见:\n  [Egg + React 工程解决方案](https://www.yuque.com/easy-team/egg-react)\n\n## 特性\n\n\u003e 注意：当前对 `asyncData` 前端获取数据支持不友好，不建议使用。\n\n- 基于 React 多页面/单页面服务端渲染\n\n- 支持服务端渲染失败时, 自动降级为前端渲染模式; 支持 react-loadable 异步组件渲染\n\n- 数据层面进行了简单设计，支持 FileDB，MySQL，Mongo 接口\n\n- 支持 Node 和 前端代码修改 Webpack 时时编译和热更新\n\n- 支持服务端渲染 `render` 和纯前端渲染 `renderClient`\n\n- 支持自动根据 jsx 文件构建 Webpack entry 入口文件\n\n- 支持 css, sass, scss, less, stylus\n\n- 支持 css module , 且同时支持 css 和 css module 共存的情况\n\n- 支持 react-router, react-redux 服务端渲染(SSR)和前端渲染(CSR)\n\n- 支持 Webpack dll 自动化构建, 与多进程编译结合，构建速度减少 2/3\n\n- Node 8 版本的 async 和 await 特性, Controller 采用 class 方式编写\n\n## 依赖\n\n- [easywebpack](https://github.com/easy-team/easywebpack) ^4.x.x\n- [easywebpack-react](https://github.com/easy-team/easywebpack-react) ^4.x.x\n- [egg-view-react-ssr](https://github.com/easy-team/egg-view-react-ssr) ^2.1.0\n- [egg-webpack](https://github.com/easy-team/egg-webpack) ^4.x.x\n- [egg-webpack-react](https://github.com/easy-team/egg-webpack-react) ^2.0.0\n\n![工程化](http://hubcarl.github.io/img/webpack/egg-webpack-react-ssr.png)\n\n## 使用\n\n#### 安装 cli\n\n```bash\nnpm install @easy-team/easywebpack-cli -g\n```\n\n#### 安装依赖\n\n```bash\nnpm install\n```\n\n#### 本地开发\n\n\u003e 启动流程: https://www.yuque.com/easy-team/egg-react/build\n\n```bash\nnpm run dev\n```\n\n应用访问: http://127.0.0.1:7001\n\n- 本地开发启动 Webpack 构建, 默认配置文件为项目根目录 `webpack.config.js` 文件。\n  SSR 需要配置两份 Webpack 配置，所以构建会同时启动两个 Webpack 构建服务。web 表\n  示构建 JSBundle 给前端用，构建后文件目录 `public`, 默认端口 9000; node 表示构\n  建 JSBundle 给前端用，构建后文件目录 `app/view`, 默认端口 9001.\n\n- 本地构建是 Webpack 内存构建，文件不落地磁盘，所以 `app/view` 和 `public` 在本\n  地开发时，是看不到文件的。 只有发布模式(npm run build)才能在这两个目录中看到构\n  建后的内容。\n\n### 配置说明\n\n\u003e https://www.yuque.com/easy-team/egg-react/config\n\n```js\n`config/config.local.js`;\nconst easywebpack = require('@easy-team/easywebpack-react');\nexports.webpack = {\n  webpackConfigList: easywebpack.getWebpackConfig(),\n};\n```\n\n#### 项目构建\n\n```bash\n// 直接运行(编译文件全部在内存里面,本地开发使用)\nnpm start\n\n// 编译文件到磁盘打包使用(发布正式环境)\nnpm run build 或者 easy build\n```\n\n## 项目结构和基本规范\n\n    ├── app\n    │   ├── controller\n    │   │   ├── test\n    │   │   │   └── test.js\n    │   ├── extend\n    │   ├── lib\n    │   ├── middleware\n    │   ├── mocks\n    │   ├── proxy\n    │   ├── router.js\n    │   ├── view\n    │   │   ├── about                         // 服务器编译的jsbundle文件\n    │   │   │   └── about.js\n    │   │   ├── home\n    │   │   │     └── home.js                 // 服务器编译的jsbundle文件\n    │   │   └── layout.js                     // 编译的layout文件\n    │   └── web                               // 前端工程目录\n    │       ├── asset                         // 存放公共js,css资源\n    │       ├── framework                     // 前端公共库和第三方库\n    │       │   └── entry\n    │       │       ├── loader.js              // 根据jsx文件自动生成entry入口文件loader\n    │       ├── page                              // 前端页面和webpack构建目录, 也就是webpack打包配置entryDir\n    │       │   ├── home                          // 每个页面遵循目录名, js文件名, scss文件名, jsx文件名相同\n    │       │   │   ├── home.scss\n    │       │   │   ├── home.jsx\n    │       │   └── hello                          // 每个页面遵循目录名, js文件名, scss文件名, jsx文件名相同\n    │       │       ├── test.css                   // 服务器render渲染时, 传入 render('test/test.js', data)\n    │       │       └── test.jsx\n    │       ├── store\n    │       │   ├── app\n    │       │   │   ├── actions.js\n    │       │   │   ├── getters.js\n    │       │   │   ├── index.js\n    │       │   │   ├── mutation-type.js\n    │       │   │   └── mutations.js\n    │       │   └── store.js\n    │       └── component                         // 公共业务组件, 比如loading, toast等, 遵循目录名, js文件名, scss文件名, jsx文件名相同\n    │           ├── loading\n    │           │   ├── loading.scss\n    │           │   └── loading.jsx\n    │           ├── test\n    │           │   ├── test.jsx\n    │           │   └── test.scss\n    │           └── toast\n    │               ├── toast.scss\n    │               └── toast.jsx\n    ├── config\n    │   ├── config.default.js\n    │   ├── config.local.js\n    │   ├── config.prod.js\n    │   ├── config.test.js\n    │   └── plugin.js\n    ├── doc\n    ├── index.js\n    ├── webpack.config.js                      // easywebpack-cli 构建配置\n    ├── public                                 // webpack编译目录结构, render文件查找目录\n    │   ├── static\n    │   │   ├── css\n    │   │   │   ├── home\n    │   │   │   │   ├── home.07012d33.css\n    │   │   │   └── test\n    │   │   │       ├── test.4bbb32ce.css\n    │   │   ├── img\n    │   │   │   ├── change_top.4735c57.png\n    │   │   │   └── intro.0e66266.png\n    │   ├── test\n    │   │   └── test.js\n    │   └── vendor.js                         // 生成的公共打包库\n\n## 功能实现\n\n### 一.多页面服务器渲染同构实现\n\n#### 1.编写 jsx 页面\n\n在 app/web/page 目录下面创建 home 目录, home.jsx, home.css 文件.\n\n- home.jsx 编写界面逻辑\n\n```js\nimport React, { Component } from 'react';\nimport Header from 'component/layout/standard/header/header.jsx';\nimport List from 'component/home/list.jsx';\nimport './home.css';\nexport default class Home extends Component {\n  componentDidMount() {\n    console.log('----componentDidMount-----');\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cHeader\u003e\u003c/Header\u003e\n        \u003cdiv className='main'\u003e\n          \u003cdiv className='page-container page-component'\u003e\n            \u003cList list={this.props.list}\u003e\u003c/List\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n#### 2.多页面后端实现\n\n- 创建 controller 文件 home.js\n\n```javascript\nexports.index = function*(ctx) {\n  yield ctx.render('home/home.js', Model.getPage(1, 10));\n};\n```\n\n- 添加路由配置\n\n```javascript\napp.get('/home', app.controller.home.home.index);\n```\n\n### 3.前端渲染\n\n- 创建 controller 的 home.js 添加如下代码\n\n```javascript\nexports.client = function*(ctx) {\n  yield ctx.renderClient('home/home.js', Model.getPage(1, 10));\n};\n```\n\n- 添加路由配置\n\n```javascript\napp.get('/client', app.controller.home.home.client);\n```\n\n## 部署到云函数\n\n全局安装 `serverless`:\n\n```bash\n$ npm i serverless -g\n```\n\n### 新建 .env\n\n```bash\n$ cp .env.example .env\n```\n\n然后将 `.env` 中的配置参数修改为你自己的。\n\n### 配置 yml\n\n根据需求修改 `serverless.yml` 文件，具体参考\n[tencent-egg](https://github.com/serverless-components/tencent-egg)\n\n### 执行部署\n\n```bash\n$ npm run build\n$ serverless --debug\n```\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyugasun%2Fserverless-egg-ssr-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyugasun%2Fserverless-egg-ssr-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyugasun%2Fserverless-egg-ssr-template/lists"}