背景：

接上篇文章如何快速的撸出一个官网（包含git操作脚本），制作出来的网站的结构和内容都是用js生成，对seo不友好；该篇文章，会告知如何 服务端预编译页面内容，开启ssr；并提供部署脚本；

开始

代码修改

  1. export default {
  2.   ssr: {
  3.     disableExternal: true,
  4.   },
  5.   plugins: [
  6.     [
  7.       'umi-plugin-react', {
  8.         antd: true,
  9.       }
  10.     ],
  11.     ['@umijs/plugin-prerender', {
  12.         include: '/',
  13.         htmlSuffix: true,
  14.     }],
  15.   ],
  16.   exportStatic: {
  17.     htmlSuffix: true,
  18.     dynamicRoot: true,
  19.   },
  20. }
  • server.js 设置为底下内容
  1. // bar.js
  2. const server = require('umi-server');
  3. const http = require('http');
  4. const { createReadStream } = require('fs');
  5. const { join, extname } = require('path');
  7. const root = join(__dirname, 'dist');
  8. const render = server({
  9.   root,
  10. })
  11. const headerMap = {
  12.   '.js': 'text/javascript',
  13.   '.css': 'text/css',
  14.   '.jpg': 'image/jpeg',
  15.   '.png': 'image/jpeg',
  16. }
  18. http.createServer(async (req, res) => {
  19.   const ext = extname(req.url);
  20.   const header = {
  21.     'Content-Type': headerMap[ext] || 'text/html'
  22.   }
  23.   res.writeHead(200, header);
  25.   if (!ext) {
  26.     // url render
  27.     const ctx = {
  28.       req,
  29.       res,
  30.     }
  31.     const { ssrHtml } = await render(ctx);
  32.     res.write(ssrHtml);
  33.     res.end()
  34.   } else {
  35.     // static file url
  36.     const path = join(root, req.url);
  37.     const stream = createReadStream(path);
  38.     stream.on('error', (error) => {
  39.       res.writeHead(404, 'Not Found');
  40.       res.end();
  41.     });
  42.     stream.pipe(res);
  43.   }
  45. }).listen(8080)
  47. console.log('http://localhost:8080');
  • 本地调试： umi dev
  • 打包： yarn build ；（为了避免线上访问到旧的内容；建议手动修改 dist/底下的js、css的版本号）
  • 用 serve 来验证下打包后的文件的可用性：
  1. npm i -g serve
  2. serve ./dist

线上服务器的配置

  • 环境配置
  1. //安装nodejs
  2. curl --silent --location https://rpm.nodesource.com/setup_10.x | bash -
  3. yum -y install nodejs
  5. //安装serve
  6. npm  install  -g   cnpm --registry=https://registry.npm.taobao.org
  7. cnpm install -g yarn
  8. yarn global add serve
  9. //启动
  10. serve ./dist
  • 配置nginx转发，对外可以访问；
  1. server {
  2.     listen 80;
  3.     server_name www.xxx.com;
  4.     location / {
  5.         proxy_pass http://localhost:5000;
  6.     }
  7. }