国内NextJs代理支持amp

发表于 分类于 阅读次数：

背景

最近学习了一下 nextjs，用这个写了个小网站 cushiwen.cn. 过程中发现 nextjs 天然支持 amp，虽然只有css-in-js的方式支持css， 但是还是很方便的，就尝试了一下。 发现过程中总是出现以下错误：

1
2
3
4
5
6
7
8
Error: Unable to fetch https://cdn.ampproject.org/v0/validator.js - connect ETIMEDOUT 172.217.27.129:443
    at ClientRequest.<anonymous> (/Users/xxx/xtestw/xxx/fe-xxx/node_modules/next/dist/compiled/amphtml-validator/index.js:1:1159)
    at ClientRequest.emit (node:events:329:20)
    at TLSSocket.socketErrorListener (node:_http_client:478:9)
    at TLSSocket.emit (node:events:329:20)
    at emitErrorNT (node:internal/streams/destroy:188:8)
    at emitErrorCloseNT (node:internal/streams/destroy:153:3)
    at processTicksAndRejections (node:internal/process/task_queues:80:21)

这就很尴尬了， 我自己架了个ss的代理，但是node本身的请求没有走代理，需要解决这个问题。

大概有几种解法吧：

  • VPN的方式架梯子，成本有点高
  • Charles 全局代理捕获，自定义 response (未验证，理论可行)
  • node全局代理

本文讨论最后一种的解法

实现

查找了一些资料，通过global-agent来实现。其实现主要通过系统环境变量来实现的 主要步骤如下：

  1. 安装 global-agent

    1
    yarn add global-agent

  2. 添加引用

    在需要的页面里面添加引用，我是在 _app.tsx 文件添加的

    1
    2
    3
    import 'global-agent/bootstrap';
    // or:
    // import {bootstrap} from 'global-agent';

  3. 设置环境变量

    1
    export GLOBAL_AGENT_HTTP_PROXY=http://127.0.0.1:8080

    如果指定部分域名不走代理的话，通过另外一个环境变量设置（因为我本地开了另外一个服务作为api接口, 所以这个接口不走代理）：

    1
    export GLOBAL_AGENT_NO_PROXY='*.test.com,test2.com,localhost:8888'

  4. 启动

    需要找到next实际的启动地址，来启动

    1
    node -r global-agent/bootstrap /Users/xxx/xtestw/yyy/fe-yyy/node_modules/next/dist/bin/next

附录