生产环境必备：NextJS 13 中的日志记录
如何在NextJS服务器组件中保存日志？
在将任何应用程序部署到生产环境之前，日志记录至关重要，因为console.log()并不能减少服务器端的工作量，即使它可以，我们也有更好的工具 :)
本文最后将介绍如何将应用程序日志保存到 NextJS 项目或Linux 服务器日志文件 (/var/log)中。
步骤 0：假设您已经设置好了一个基本的 Next.js 项目（Nextjs 13）。
npm install winston
步骤 1：创建一个名为logger.js.的文件
它应该位于项目根目录下。例如
PROJECT_NAME
|_ app
|_ public
|_ logger.js 👈
在 logger.js 文件中添加以下代码
// logger.js
import winston from "winston";
const { combine, timestamp, json } = winston.format;
const logger = winston.createLogger({
level: "info",
format: combine(timestamp(), json()),
transports: [
new winston.transports.File({
filename: "app.log"
}),
],
});
export { logger };
你需要关注三件事。
- 级别：日志级别有多种，我们需要信息级别及以上级别的日志。
- 格式：日志的存储格式
- 传输：这很重要，我们用它来将日志传输到文件。
app.log步骤 2：在项目根目录下创建一个文件。
PROJECT_NAME
|_ app
|_ public
|_ logger.js
|_ app.log 👈
接下来，我们将尝试使用我们在 NextJS 服务器组件和 API 路由上创建的这个日志记录器，并检查我们的日志是否已保存。
步骤 3：在服务器组件中使用我们的日志记录器
- 在应用程序文件夹内创建主文件夹
page.jsx在主目录下创建一个文件
PROJECT_NAME
|_ app
| |_ home 👈
| |_ page.jsx 👈
|
|
|_ public
|_ logger.js
|_ app.log
// app/home/page.jsx
import { logger } from "@/logger"; // our logger import
export default function HomePage() {
logger.info("Home Page called "); // calling our logger
return (
<div>
<h3>Home page</h3>
</div>
);
}
- 现在检查您的
app.log文件，如果您收到一条包含消息“主页已调用”的日志，则说明您已成功配置日志记录。
步骤 4：在 API 路由中使用我们的日志记录器
Next.js 13 允许我们在 api 文件夹中编写后端代码，让我们编写一个基本的 GET 端点，返回“hello”作为响应。
api/test/route.js在内部创建一个文件app
PROJECT_NAME
|_ app
| |_ api
| | |_ test 👈
| | |_ route.js 👈
| |_ home
|
|_ public
|_ logger.js
|_ app.log
import { NextRequest, NextResponse } from "next/server";
import { logger } from "@/logger"; // our logger import
export async function GET(req: NextRequest) {
logger.info(`GET /api/gethome ${req}`);
return NextResponse.json({
message: "success",
status: 200,
});
}
-
现在，请在浏览器中（假设您当前位于 localhost:3000）访问 /api/test
-
现在检查日志
app.log。 -
API 日志记录功能非常强大，因为我们可以记录请求及其参数，从而调试生产应用程序中可能出现的问题。
在 Linux 或 EC2 中登录
假设你的项目运行在 AWS EC2 或其他 Linux 服务器上，并且你想将日志保存到服务器的日志文件夹中，而不是保存到下一个项目中。
您需要执行以下步骤
更改日志记录器传输方式，使其指向您的 Linux 日志。
import winston from "winston";
const { combine, timestamp, json } = winston.format;
const logger = winston.createLogger({
level: "info",
format: combine(timestamp(), json()),
transports: [
new winston.transports.File({
filename: "/var/log/NEXT_APP/app.log", 👈
}),
],
});
export { logger };
在服务器上创建一个目录
使用与日志记录器传输文件名相同的文件夹名称
sudo mkdir /var/log/NEXT_APP/app.log
注意：您的日志记录器现在已获取文件位置，但仍然没有写入该文件的权限。因此，我们需要授予日志文件相应的权限。
sudo chmod a+w /var/log/NEXT_APP/app.log
日志记录是一个非常值得深入研究的主题，如果您有更多时间，请阅读有关日志级别、日志轮换和其他主题的内容。
如果您认为这篇文章需要修改或补充，欢迎留言。谢谢！
文章来源：https://dev.to/abhijitdotsharma/development-essentials-logging-in-nextjs-13-43l0