Gatsby 静态网站搭建全过程 (2)—采坑和经验

Gatsby

Gatsby 是一个为 React 打造的快如闪电的现代化站点生成器-静态网站。

浏览器对象问题

在代码中, 不能执行使用window, document等browser上才有的对象, 如果要使用, 需要先判断当前的环境是否为browser环境，或者放在useEffect/componentDidMount中才可执行。

Gatsby自带的写入文件问题

官网的图片

这段话意思就是Gatsby包含遥测功能，该功能收集匿名使用信息，这些信息用于帮助改善所有用户的Gatsby。盖茨比用户群增长非常迅速。重要的是，我们的小型团队和整个社区将更好地了解使用模式，因此我们可以最好地决定如何设计未来的功能并确定当前工作的优先级。

但也相应的带来了一些问题，

• 如果是运行在本地或者非私服服务器上是没有问题的，因为文件可以正常写入
• 如果是运行在私服服务器上是有问题的，文件写入存在权限问题

官网提供了两个变量用于关闭此功能

GATSBY_TELEMETRY_DISABLED，NO_UPDATE_NOTIFIER置为true，只是关闭了不向gatsby发送请求问题。
经过试验，还是会存在写入文件问题，经gatsby源码查看，可通过设置XDG_CONFIG_HOME变量为其它可写入的目录即可解决此类问题.

部署热更新

同样，这与盖茨比没有直接关系。有关如何重新触发部署的更多问题是一个普遍的问题，它取决于您的部署平台。

经过我对gatsby的调研发现，gatsby虽然是一个服务，但是并没有在生产环境下提供webhook回调api，只在开发环境下提供了api。

你可以部署在Netlify、Heroku等等网站，并通过webhook实现更新

• 你可以部署在Netlify、Heroku等等网站，并通过webhook实现更新
• 如果是私服，就看自己内部有没有实现与上述几个平台类似的功能，否则需要自己实现热更新

如部署过程中，放置一个镜像，如果有变化，进入镜像中打包，打包完，打包文件替换外层的文件完成更新。即可不影响当前服务。
也可以研究Netlify等网站实现的方式。

pm2.json

如果用pm2启动，找不到gatsby命令，可以使用./node_modules/gatsby/dist/bin/gatsby.js这种形式启动

{
	"apps": [
		{
			"name": "test",
			"script": "./node_modules/gatsby/dist/bin/gatsby.js",
			"args": "serve -o -H 0.0.0.0 -p 8000",
			"cwd": "",
			"exec_mode": "fork",
			"instances": 1,
			"max_memory_restart": "1G",
			"autorestart": true,
			"node_args": [],
			"error_file": "/opt/logs/test/err.log",
			"out_file": "/opt/logs/test/out.log",
			"merge_logs": true,
			"log_date_format": "YYYY-MM-DD HH:mm Z",
		}
	]
}

上一篇: Gatsby 静态网站搭建全过程 (1)—安装和搭建.
下一篇: Gatsby 静态网站搭建全过程 (3)—运行流程.