关于ssr:React-ssr框架Nextjs-的生产实践

46次阅读

共计 2219 个字符,预计需要花费 6 分钟才能阅读完成。

首先感叹一句,next 真是一个版本狂人啊,一周就一个下版本

1. 依照官网的形式初始化一个 Next.js 我的项目遇到的一些问题

  • 默认初始化的框架款式反对 sass,组件级别的[name].module.css,但默认不反对 less,官网提供了配置 less 的办法

    `yarn add @zeit/next-less less`
    // next.config.js
    const withLess = require('@zeit/next-less')
    module.exports = withLess({webpack(config, options) {
          config.resolve = {
              alias: {
                ...config.resolve.alias,
                // 配置 alias 同时要在 tsconfig.json 配置 baseUrl,paths
                "@": path.resolve(__dirname, ".") 
              },
              extensions: [".ts", ".tsx", ".js", ".jsx", ".less", ".css"]
        };
        return config
      }
    })

    重新启动后会报 Error: Cannot find module 'webpack' 于是就装置 webpack 但默认装置的是 webpack@5.x,依照这个 issue,要替换成 webpack@4.x 才能够

  • Next.js 打包后动态资源门路中的 _next 目录哪来的?
    参考此文
    打包配置 配置assetPrefix,相当于 webpack 外面的publicPath(将动态资源放在 cdn)
    但打包后 html 引入的动态资源地址会多一层_next 目录,解决方案:
    本人代码里创立 _next 目录太过繁琐,且耗费性能,故让运维在拷贝动态资源时,在 oss 目录上多加一层 _next 目录
  • ssr 框架 ajax 申请库的抉择 node-fetchwindow, document 的应用注意事项
  • getInitialProps getStaticProps getStaticPaths getServerSideProps 的区别
  • clint Link 跳转时子页面款式文件获取不到(如同只有开发阶段有次问题,临时未解决)
  • 当进行重构我的项目时,如果不想扭转老我的项目的 url(可能因为 url 曾经被百度 seo 收录),能够利用自定义 node 服务器,将老 url 转发到新的 url,参考文档,然而有个问题这种被转发的 url 为什么浏览器申请会是 404,但页面还是会失常显示,不晓得是为什么???

2. 生产部署

  • 接入公司 cicd 标准,部署没有应用传统的 pm2,而是把服务放在一个容器内,服务重启靠 node 提供一个健康检查接口,容器来保障服务稳固,当该接口没有失常返回 docker 容器就会重启利用
  • 因为公司标准启动 node 服务都是在容器内用 node app.js,但 next 默认启动是靠 next start 启动生产服务的。解决方案是:next 提供了自定义服务器,我这里采纳了 koa,将 next 作为一个中间件来解决参考

    // https://www.nextjs.cn/docs/advanced-features/custom-server
    const Koa = require('koa') // 引入 koa
    const next = require('next') // nextjs 作为中间件
    const routesMap = require('./route') // 新老 url 抵触时,将老 url 转发
    
    const dev = process.env.NODE_ENV === 'development' // 判断是否处于开发者状态
    const app = next({dev}) // 初始化 nextjs,判断它是否处于 dev:开发者状态,还是 production: 正式服务状态
    const handle = app.getRequestHandler() // 拿到 http 申请的响应
    
    console.log('next dev 环境 ===>', dev)
    
    const port = 8080
    
    // app.prepare:编译 pages 文件夹上面的页面文件,then 是保障 pages 下页面全副编译完了之后,咱们能力真正的启动服务来响应申请。// 如果这些内容咱们没有编译实现,那么启动服务响应申请的时候可能会报错。app.prepare().then(() => {const server = new Koa() // 申明一个 server
    
      /** 这是 Koa 的外围用法:中间件。通常给 use 外面写一个函数,这个函数就是中间件。* params:
       *  ctx: Koa Context 将 node 的 request 和 response 对象封装到单个对象中,为申请上下文对象
       *  next: 调用后将执行流程转入下一个中间件,如果以后中间件中没有调用 next,整个中间件的执行流程则会在这里终止,后续中间件不会失去执行
       */
      server.use(async (ctx, next) => {if (routesMap[ctx.path]) {
          // 老 url 转发~~~~,这种操作页面能够失常进去,但不晓得为什么浏览器状态码会是 404
          await app.render(ctx.req, ctx.res, routesMap[ctx.path])
        } else {await handle(ctx.req, ctx.res)
        }
        ctx.response = false
      })
    
      server.listen(port)
      console.log(` 请拜访:http://localhost:${port}`)

正文完
 0