从零开始搭建 Egg React SSR 服务端渲染项目

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

从零开始搭建 Egg React SSR 服务端渲染项目

1. 初始化环境

安装 Node LST (>=8) 环境: https://nodejs.org/zh-cn

2. 初始化 egg 项目

https://github.com/eggjs/egg-init/blob/master/README.zh-CN.md

npm i egg-init -g egg-init

<!DOCTYPE html> <html lang="en"> <head> <title>Egg + React + Webpack</title> <meta name="keywords"> <meta name="description"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <link rel="shortcut icon" href="https://segmentfault.com/favicon.ico" type="image/x-icon" /> </head> <body> <div id="app"></div> </body> </html>

3. 安装依赖

react 没有内置在 egg-view-react-ssr 里面, 项目需要显示安装依赖。

npm i react react-dom axios egg-view-react-ssr egg-scripts --save

npm i egg-bin cross-env easywebpack-cli easywebpack-react egg-webpack egg-webpack-react --save-dev

npm install

4. 添加配置

exports.webpack = { enable: true, package: 'egg-webpack' }; exports.webpackreact = { enable: true, package: 'egg-webpack-react' };

exports.reactssr = { enable: true, package: 'egg-view-react-ssr' };

'use strict'; const path = require('path'); module.exports = app => { const config = exports = {}; config.keys = '123456'; // 保证构建的静态资源文件能够被访问到 config.static = { prefix: '/public/', dir: path.join(app.baseDir, 'public') }; config.reactssr = { layout: path.join(app.baseDir, 'app/view/layout.html') }; return config; }

关于 entry 配置,请务必先看这篇文档:https://www.yuque.com/easy-team/egg-react/config

module.exports = { entry: { 'home/index': 'app/web/page/home/index.jsx' } };

{ "presets": [ "react", ["env", { "modules": false }] ], "plugins": [ "transform-object-assign", "syntax-dynamic-import", "transform-object-rest-spread", ["import", { "libraryName": "antd", "style": "css" }] ], "env": { "development": { "plugins": [ "react-hot-loader/babel" ] } }, "comments": false }

安装 babel 相关依赖

npm i babel-core babel-loader@7 --save-dev

npm i babel-preset-env babel-plugin-syntax-dynamic-import babel-plugin-transform-object-assign babel-plugin-transform-object-rest-spread --save-dev

module.exports = { plugins: [ require('autoprefixer') ] };

安装 autoprefixer 依赖

npm i autoprefixer --save-dev

.DS_Store .happypack/ node_modules/ npm-debug.log .idea/ dist static public private run *.iml *tmp _site logs .vscode config/manifest.json app/view/* !app/view/layout.html !app/view/.gitkeep package-lock.json

5. 写代码

编写前端 react 代码

import React, { Component } from 'react'; import Layout from 'component/layout.jsx'; import List from './componets/list'; import './index.css'; export default class HomeIndex extends Component { componentDidMount() { console.log('----componentDidMount-----'); } render() { return <Layout> <div className="main"> <div className="page-container page-component"> <List list={this.props.message}></List> </div> </div> </Layout>; } }

编写 Node 端代码

通过 egg-view-react-ssr 插件 render 方法实现, 请看服务端渲染前端渲染模式

module.exports = app => { return class HomeController extends app.Controller { async server() { const { ctx } = this; // home/index.js 对应 app/web/page/home/index.jsx webpack 构建后 JSBundle 文件 await ctx.render('home/index.js', { message: 'egg react server side render' }); } async client() { const { ctx } = this; // renderClient 前端渲染,Node层只做 layout.html和资源依赖组装,渲染交给前端渲染。与服务端渲染的差别你可以通过查看运行后页面源代码即可明白两者之间的差异 await ctx.renderClient('home/index.js', { message: 'egg react client render' }); } }; };

app.get('/', app.controller.home.server); app.get('/client', app.controller.home.client);

6. 本地运行

npm run dev

npm run dev 做了如下三件事情

7. 发布模式

{ "scripts": { "dev": "egg-bin dev", "start": "egg-scripts start", "debug": "egg-bin debug", "clean": "easy clean all", "build": "easy build", }, }

npm run build 或 easy build prod

  1. 启动 Webpack 构建,文件落地磁盘
  2. 服务端构建的文件放到 app/view 目录
  3. 客户端构建的文件放到 public 目录
  4. 生成的 manifest.json 放到 config 目录
  5. 构建的文件都是gitignore的,部署时请注意把这些文件打包进去

启动应用前, 如果是非 egg-scripts  方式启动, 请设置 EGG_SERVER_ENV 环境变量,本地local, 测试环境设置 test, 正式环境设置 prod

npm start

8. 项目和插件

9. 建议

以上详细步骤只是告诉大家 Egg + React + easywebpack 搭建项目整个流程,帮助搭建理清流程和细节。实际使用使用时建议使用 easywebpack-cli 初始化项目或者 clone egg-react-webpack-boilerplate 代码初始化项目。

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看