Guangzhoujs.cn - readme 上线总结

2022-blog

今天简单总结一下guangzhoujs.cn上线开发后的心得，回忆过去是为了看清未来。
先来看一下整体的效果:

• 预览地址： http://guangzhoujs.cn
• 仓库地址： https://github.com/guangzhoujs/guangzhoujs-cn
  技术栈为：Nextjs13, Mobx, Antd, Ahooks, Bytemd, Tinymce-react, Tailwindcss等

1. guangzhoujs.cn 介绍

guangzhoujs.cn 定位服务于广州本地前端相关知识信息综合性交流平台，是基于当下流行的Nextjs, Go相关技术框架下的产物，在这个大前提下，技术融合和功能实现上更为灵活。Nextjs在使用React开发的基础上满足了SEO的需要，Go在保证响应速度的基础上占用最低的系统资源。
结果虽然很美丽，但过程很漫长，一个成功上线项目的背后是两个失败仓库的奠基，技术的选型有从最初的nuxt3.rc1开始，到中期更新到rc10之后就跑不起来的失败，也有被迫转向Nextjs.12的无耐。而Nextjs在开发快要完成的节骨眼上新版本13发布，又是一波骚操作，从Nextjs12强性升级到Nextjs13版本，Next.js 13 虽然包含了 Turbopack，但目前还是Alpha阶段，最后衡量再三还是没有启用新的Turopack，还是奔着需求做加法、开发做减法的原则先上线再优化。那这个版本只是让12的代码在13的版本下正常运行起来，Next13的新特性用到的并不多。

2. 技术介绍

2.1 基本介绍

• Nextjs
  Nextjs的项目整体开发下来，除了上线遇到点坑之外，其它方面只要会React Hooks基础的文档看看都能开发。那刚发新版中文文档是没有的，然后我用这款翻译软件辅助：腾讯交互翻译。Nuxtjs中文站点入口。

• Tailwindcss
  本来我迷恋于Unocss的灵活，可惜在Nextjs中热更新老是失去响应，只能换回Tailwindcss，虽然Unocss也提供了一个Nextjs下的案例。

• Antd
  Antd选择的4.x版本，这个版本遇到的问题是分页组件在Next下跳转失效，所以就翻页又引入了另外一个UI组件库：@nextui-org/react，只是这款组件视觉风格上我个人感觉较Antd略为粗犷，所以只使用了分页。

• Icon
  项目中的图标除了@ant-design/icons之外，本着图标风格上有更多的选择，所以引入了@carbon/icons-react，整体用下来基本满足基础的图标需要。

• 富文本编辑器
  针对不同用户的使用习惯分别提供了两款输入编辑器，一款供非专业人士使用，比如Hr。一款供专业人士使用，比如会Markdown语法的小伙伴，他们分别是：

  • @tinymce/tinymce-react
    Tinymce新版需要申请api-key，需要说明的是只申请一个api-key，然后可使用在多域名场景下，只需要在tiny官网添加即可，登录之后在 MY ACCOUNT / Approved Domains 中添加，申请也是这个地址。
  • @bytemd/react
    bytemd是字节开发的一款富文本编辑器，可用于vue,react，主题可以使用juejin-markdown-themes，虽然名叫juejin，其它里边有很多风格的css选择，具体在这个 node_modules\juejin-markdown-themes\dist 目录下。

• qrcode.react
  其中一个页面需要分享展示用到二维码，用的这款，按照文档使用起来也没有大的问题。

• react-copy-to-clipboard
  按钮复制用这款，也没有什么大的问题。

• react-infinite-scroll-component
  滚动加载用到了这款，出现的问题是出现滚动条，添加样式强制显示即可隐藏滚动条。

<InfiniteScroll style={{ overflow: 'visible' }} >

2.2 技术栈

2.3 开发工具

2.4 文件结构

├─.next // 发布目录
│  ├─server
│  └─static
├─api // 请求文件
├─bc // 业务组件
├─components // 公共组件
├─config // 配置
├─context
├─hooks 
├─icons  // svg
├─layouts // 布局文件
├─pages // 页面
│  ├─article
│  ├─editor
│  ├─help
│  ├─hero
│  ├─job
│  └─user
├─providers
├─public // 静态资源
├─store
├─styles // 所有 Scss 文件
├─types
└─utils // 工具文件

2.5 如何在本地运行

根目录下运行 npm install，然后运行 npm dev

// 切换环境
nvm install 17.0.0
nvm use 17.0.0
// 安装依赖
npm install
// 启动项目
npm start
// 清除 node_modules
npm run clean
// 全局安装 rimraf 之后方可使用
npm i rimraf -g
// 清除 node_modules 重新安装依赖
// 等同于 npm run clean && npm install
npm run reinstall

2.6 如何发布上线

比较大的一坑，Nextjs的开发运行目录和打包上线目录都是.next，所以，打包输出结果要仔细看，要不然会把开发时运行的文件误上传。

2.6.1 Nginx配置

先在nginx增加配置，转发nextjs的启动端口。
Nextjs虽然支持basePath进行二级目录的部署，可惜一刷新又出现basePath路径找不到的情况，只能根目录部署。

location / {
  proxy_pass http://127.0.0.1:3600/;
  proxy_http_version 1.1;
  proxy_set_header Host $host;
}

2.6.2 启动Nextjs

根目录新建ecosystem.config.js，然后用pm2启动这个文件就可以了。

 module.exports = {
    apps: [{
        name: 'gzjs-ssr',
        script: 'npm',
        args: 'start',
        cwd: '/www/wwwroot/guangzhoujs.cn',
        autorestart: true,
        watch: false,
        max_memory_restart: '1G',
        env: {
            NODE_ENV: 'development'
        },
        env_production: {
            NODE_ENV: 'production',
            BASE_PATH: "",
            PORT: 3600
        }
    }]
}

然后根据域名访问，如果出现500，说明Next启动有问题，查看Nginx日志进行排错。

2.6.3 发布问题

• Favicon 图片不能拷贝到发布目录
  就算安装url-loader也不能解决，解决办法，转换为Base64图片，后看文档也可以用Image，未试存疑中。
• 图片路径
  要不然，图片路径丢失

import Image from 'next/image'
import Logo from '@/public/images/logo.png'

• 手工调整buildid
  Nextjs前台静态资源会识别版本信息，最终影响生成目录路径在 /.next/static下，可以手工修改也可以是Git commit id。

generateBuildId: async () => 'v3',

• image
  images中添加允许域名

images: {
    domains: ['guangzhoujs.cn'],
},

• package.json
  需要上传package.json到根目录然后在服务端全量安装node_modules
• Nginx 缓存
  在其它机型上没有碰到这个问题，只有在腾讯云上碰到这个问题，代理转发有缓存，需要清目录后杀掉进程后启动nginx

$ cd /www/server/nginx/proxy_cache_dir // nginx缓存目录
$ pkill nginx // 强制关闭
$ /etc/init.d/nginx start // 启动
$ /etc/init.d/nginx stop
$ /etc/init.d/nginx restart

3. 开发介绍

3.1 基本介绍

• 基础的工程采用Pnpm Monorepo的方式来搭建，在满足基础开发的需求上能够灵活扩展模块，并保持代码解耦。这方面其它大佬已经走在前面：

  • Laffery - 基于pnpm搭建monorepo项目
  • BestAns - pnpm + workspace + changesets 构建你的 monorepo 工程

• 由于整体是React的相关技术栈，计划帮助文档部分由dumi来实现，可以快速的将Markdown转化为页面，入口地址由Nginx来安排。

3.2 约定式路由

约定式路由式的开发，即 pages目录下所有文件夹层级为路由访问路径。比如 pages/article/index.tsx，那访问的路径就是https://guangzhoujs.cn/article。
pages中除了路由文件之外不建议放其它文件，要放其它扩展名文件还需要在next.config.js中增加配置。

module.exports = {
  pageExtensions: ['mdx', 'jsx', 'js', 'ts', 'tsx']
}

3.3 基础布局

基础的布局由Layouts负责，共有这几个：

• home
  负责基础页面的上中下式布局
• user
  负责用户中心左右式布局

3.4 获取数据

Nextjs 共有两种渲染模式，这两个模式下有两种获取数据的方式

• 静态模式（默认），即在构建时生成 html，并每次请求时复用
  
  • getStaticProps 静态模式下使用，在构建时会调用该函数获取数据并返回到 props，会在构建时渲染生成 html
  • getStaticProps 中的 context 参数包含了常用的请求的 params，preview，previewData，locale 等参数

• 服务器端渲染模式，即每次请求时在服务器端重新生成 html。

  • getServerSideProps 服务器端渲染模式下使用，会在每次请求时先获取数据，接着重新生成 html 后再将页面返回到客户端。
  • getServerSideProps 中的 context 参数包含了常用的请求的 req、res、params、query 等参数

• axios
  页面上在useEffect中异步获取数据，这块的代码意思是在浏览器端运行了。

3.5 SEO增强

通过 next/head 组件增加页面的meta 的 keywords, description 标签。

3.6 更新到Next.js 13

• Title变化

Next.js 12

<title>首页 - {title}</title>

Next.js 13

`<title>{`首页 - ${title}`}</title>`

• Link的变化

Next.js 12

<Link href=""><a target="_blank" rel="noreferrer">{title}</a></Link>

Next.js 13

<Link href="" target="_blank" rel="noreferrer">{title}</Link>

用这个命令全局替换，然后全局校验Eslint

$ npx @next/codemod new-link .

• todo
• todo
• todo
• todo

如果还想找回此文，您可以点右上角 💖Star 💖 收藏 + 支持