我是靠谱客的博主 优秀咖啡,这篇文章主要介绍next.js 踩坑笔记,现在分享给大家,希望可以做个参考。

1、nginx转发:

复制代码
1
2
3
4
5
6
7
8
9
location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } 复制代码

2、页面引用/_next/...和输出目录/.next/...不一致问题,修改构建输出目录:

复制代码
1
2
3
4
5
// next.config.js module.export = { distDir: '_next' } 复制代码

3、字体文件加载 next-plugins:

复制代码
1
2
3
4
5
6
7
8
npm install next-fonts // next.config.js const withFonts = require('next-fonts'); module.export = withFonts({ ... }); 复制代码

4、异步加载的js,全局变量需要加判断,否则会闪一下错误信息,例如Google Analytics:

复制代码
1
2
3
4
5
6
<script async src="https://www.googletagmanager.com/gtag/js"></script> if (typeof gtag !== "undefined"){ gtag("event", name, {event_category: category}); } 复制代码

5、Linux系统open files 1024限制导致too many open files错误

修改 /etc/security/limits.conf

复制代码
1
2
3
4
5
6
* soft nofile 1000000 * hard nofile 1000000 * soft nproc 1000000 * hard nproc 1000000 复制代码

保存后重新登录,执行 ulimit -a 查看是否生效

6、nginx负载均衡

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
upstream yourname { least_conn; server 127.0.0.1:3006; server 127.0.0.1:3007; server 127.0.0.1:3008; # 该connections参数设置在每个工作进程的缓存中保留的上游服务器的最大空闲keepalive连接数。超过此数量时,将关闭最近最少使用的连接。 # 应特别注意的是,该keepalive指令不限制nginx工作进程可以打开的上游服务器的连接总数。该connections参数应设置为足够小的数字,以允许上游服务器处理新的传入连接。 keepalive 3; # nginx的长链接是等超时以后才会断开,如果超时时间过长,机器会因为TCP链接耗尽崩溃出现EBUSY错误 keepalive_timeout 5; } server { location / { proxy_pass http://yourname; add_header backend_ip $upstream_addr; #方便查看请求被转发到哪个地址 add_header backend_code $upstream_status; } } 复制代码

7、优化Linux系统配置,提高并发能力

修改 /etc/sysctl.conf, 执行 sysctl -p 生效

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
# 避免放大攻击 net.ipv4.icmp_echo_ignore_broadcasts = 1 # 开启恶意icmp错误消息保护 net.ipv4.icmp_ignore_bogus_error_responses = 1 # SYN洪水攻击保护,高并发建议关闭 net.ipv4.tcp_syncookies = 0 # 重试次数 net.ipv4.tcp_syn_retries = 1 net.ipv4.tcp_synack_retries = 1 # 开启并记录欺骗,源路由和重定向包 net.ipv4.conf.all.log_martians = 1 net.ipv4.conf.default.log_martians = 1 # 处理无源路由的包 net.ipv4.conf.all.accept_source_route = 0 net.ipv4.conf.default.accept_source_route = 0 # 开启反向路径过滤 net.ipv4.conf.all.rp_filter = 1 net.ipv4.conf.default.rp_filter = 1 # 禁用重定向包 net.ipv4.conf.all.accept_redirects = 0 net.ipv4.conf.default.accept_redirects = 0 net.ipv4.conf.all.secure_redirects = 0 net.ipv4.conf.default.secure_redirects = 0 # 不充当路由器 net.ipv4.ip_forward = 0 net.ipv4.conf.all.send_redirects = 0 net.ipv4.conf.default.send_redirects = 0 # 开启execshild kernel.exec-shield = 1 kernel.randomize_va_space = 1 # IPv6设置 net.ipv6.conf.default.router_solicitations = 0 net.ipv6.conf.default.accept_ra_rtr_pref = 0 net.ipv6.conf.default.accept_ra_pinfo = 0 net.ipv6.conf.default.accept_ra_defrtr = 0 net.ipv6.conf.default.autoconf = 0 net.ipv6.conf.default.dad_transmits = 0 net.ipv6.conf.default.max_addresses = 1 # 增加系统文件描述符限制 fs.file-max = 1000000 fs.nr_open = 1000000 # 允许更多的PIDs (减少滚动翻转问题); may break some programs 32768 kernel.pid_max = 65536 # 增加系统IP端口限制 net.ipv4.ip_local_port_range = 3000 65535 # 增加TCP最大缓冲区大小 # 增加Linux自动调整TCP缓冲区限制 # 最小,默认和最大可使用的字节数 # 最大值不低于4MB,如果你使用非常高的BDP路径可以设置得更高 net.ipv4.tcp_rmem = 4096 87380 8388608 net.ipv4.tcp_wmem = 4096 87380 8388608 # Tcp窗口等 net.core.rmem_max = 8388608 net.core.wmem_max = 8388608 net.core.netdev_max_backlog = 1000000 net.ipv4.tcp_max_syn_backlog = 1000000 net.core.somaxconn = 1000000 net.ipv4.tcp_window_scaling = 1 net.ipv4.tcp_max_tw_buckets = 1000000 net.ipv4.tcp_max_orphans = 1000000 # 开启重用,将TIME_WAIT的socket重新用于连接 net.ipv4.tcp_tw_reuse = 1 net.ipv4.tcp_timestamps = 0 # 开启TCP连接中TIME_WAIT的socket快速回收 net.ipv4.tcp_tw_recycle = 1 # 修改系统默认的TIMEOUT时间 net.ipv4.tcp_fin_timeout = 10 # 减少TCP KeepAlive连接侦测的时间,可以使得服务器更快的侦测出异常退出的客户端连接。默认为7200s net.ipv4.tcp_keepalive_time = 10 复制代码

转载于:https://juejin.im/post/5c9d8bbe51882502fe513bd2

最后

以上就是优秀咖啡最近收集整理的关于next.js 踩坑笔记的全部内容,更多相关next.js内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(81)

评论列表共有 0 条评论

立即
投稿
返回
顶部