Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pages代理加速 #8

Open
longzhi456 opened this issue Jul 4, 2024 · 28 comments
Open

pages代理加速 #8

longzhi456 opened this issue Jul 4, 2024 · 28 comments
Labels
help-wanted Want some help

Comments

@longzhi456
Copy link

可以做个pages吗,或者指导一下怎么把workers转为pages?

@1234567Yang 1234567Yang added the help-wanted Want some help label Jul 4, 2024
@1234567Yang
Copy link
Owner

没明白你想干啥,worker和page一个前端一个后端,怎么可能把woker变成page,你想要实现什么呢?
当然了worker(后端)和page(前端)结合在一起是可以的
https://blog.cloudflare.com/cloudflare-pages-goes-full-stack
image

@sw61980
Copy link

sw61980 commented Jul 5, 2024

之前,跟着一个教程搭建了一个github加速代理,是在cloudflare上部署workers实现的。后来在其他视频教程中看见GitHub上的一些项目既可以部署在cloud flare的workers,也可以部署在pages。看了您的项目说明,也是部署到workers,想请教是否可以部署到pages?fork并star了您的项目,尝试部署到cloud flare的pages,总数失败。我是小白,在网上找了很长时间,也没搞明白GitHub上什么样的项目可以部署到workers,什么样的项目可以部署到pages,请指教。

@1234567Yang
Copy link
Owner

1234567Yang commented Jul 5, 2024

之前,跟着一个教程搭建了一个github加速代理,是在cloudflare上部署workers实现的。后来在其他视频教程中看见GitHub上的一些项目既可以部署在cloud flare的workers,也可以部署在pages。看了您的项目说明,也是部署到workers,想请教是否可以部署到pages?fork并star了您的项目,尝试部署到cloud flare的pages,总数失败。我是小白,在网上找了很长时间,也没搞明白GitHub上什么样的项目可以部署到workers,什么样的项目可以部署到pages,请指教。

我也不是很清楚这种带后端的究竟能不能变为page,我正在试试

@1234567Yang
Copy link
Owner

1234567Yang commented Jul 5, 2024

image

可以的

cf大善人对不住了,我要再再再再再再再再再薅一把

看这里:

https://blog.cloudflare.com/zh-cn/building-full-stack-with-pages-zh-cn/
image

正在提问:
https://community.cloudflare.com/t/how-to-let-a-worker-work-on-the-root-domain/681672

@longzhi456
Copy link
Author

您好,请教两个问题:
1.可以部署到cloudflare上workers或pages的项目,在创建时是不是跟创建其他repository一样?
2.能不能部署到workers或pages是不是取决所写的内容,就像前面您说的前端、后端?
再次感谢。

@1234567Yang
Copy link
Owner

1234567Yang commented Jul 6, 2024

https://community.cloudflare.com/t/how-to-let-a-worker-work-on-the-root-domain/681672
worker好像没法link到github repo,page是有个按钮,link to github/gitlab 的,也就是说先创建repo再link到cloudflare。

2.能不能部署到workers或pages是不是取决所写的内容,就像前面您说的前端、后端?

没明白你在问什么,你写什么它就会给你运行什么啊。我说的前端后端的意思是我之前一直以为page只能搞前端,worker是后端。

@1234567Yang
Copy link
Owner

@sw61980
Copy link

sw61980 commented Jul 7, 2024

这个可以部署到cloud flare的pages上了吗?
报错:
2024-07-07T03:46:21.176250892Z Cloning repository...
2024-07-07T03:46:22.902844399Z From https://github.com/sw61980/cf-proxy-ex
2024-07-07T03:46:22.903197069Z * branch 9330a99 -> FETCH_HEAD
2024-07-07T03:46:22.903284832Z
2024-07-07T03:46:23.036045581Z HEAD is now at 9330a99 Update README.md
2024-07-07T03:46:23.036589534Z
2024-07-07T03:46:23.130912637Z
2024-07-07T03:46:23.131362055Z Using v2 root directory strategy
2024-07-07T03:46:23.155578047Z Success: Finished cloning repository files
2024-07-07T03:46:24.790667129Z Checking for configuration in a wrangler.toml configuration file (BETA)
2024-07-07T03:46:24.790714069Z
2024-07-07T03:46:24.88485938Z No wrangler.toml file found. Continuing.
2024-07-07T03:46:24.956174172Z No build command specified. Skipping build step.
2024-07-07T03:46:24.956765487Z Found _worker.js in output directory. Uploading.
2024-07-07T03:46:25.815274507Z ✨ Compiled Worker successfully
2024-07-07T03:46:25.905437851Z Validating asset output directory
2024-07-07T03:46:27.785073033Z Deploying your site to Cloudflare's global network...
2024-07-07T03:46:30.683447861Z Uploading... (22/22)
2024-07-07T03:46:30.684434183Z ✨ Success! Uploaded 0 files (22 already uploaded) (0.44 sec)
2024-07-07T03:46:30.684707902Z
2024-07-07T03:46:30.992105997Z ✨ Upload complete!
2024-07-07T03:46:32.940204Z Success: Assets published!
2024-07-07T03:46:37.951145Z Error: Failed to publish your Function. Got error: multipart uploads must contain a readable body_part or main_module

@1234567Yang
Copy link
Owner

现在改成这个样子是可以不报错的,但是对于example.com/a//b这种路径是匹配不到的

export const onRequest = async ({ request }) => {
	return handleRequest(request);
}

我再再再再去问

@1234567Yang
Copy link
Owner

看起来目前还不行,没人回答。只能用worker

@SokWith
Copy link

SokWith commented Sep 4, 2024

image

可以的

cf大善人对不住了,我要再再再再再再再再再薅一把

看这里:

https://blog.cloudflare.com/zh-cn/building-full-stack-with-pages-zh-cn/ image

正在提问: https://community.cloudflare.com/t/how-to-let-a-worker-work-on-the-root-domain/681672

不要放main.js
参见我fork后修改的代码:https://github.com/SokWith/cf-proxy-ex

只是,为什么代理后的许多站点都像手机版一样,界面很不好?
(PS:pages部署后,测试站点: https://xyp.pages.dev)

@1234567Yang
Copy link
Owner

image
可以的
cf大善人对不住了,我要再再再再再再再再再薅一把

看这里:

https://blog.cloudflare.com/zh-cn/building-full-stack-with-pages-zh-cn/ image
正在提问: https://community.cloudflare.com/t/how-to-let-a-worker-work-on-the-root-domain/681672

不要放main.js 参见我fork后修改的代码:https://github.com/SokWith/cf-proxy-ex

只是,为什么代理后的许多站点都像手机版一样,界面很不好? (PS:pages部署后,测试站点: https://xyp.pages.dev)

怎么会呢?你在手机上查看自然是手机版啊,proxy只是把你所有的header/request转发,并不会修改电脑版/手机版

@1234567Yang
Copy link
Owner

具体链接?

@1234567Yang
Copy link
Owner

还有你这个部署的打什么网站都会返回首页,是我的用法不对吗?

@SokWith
Copy link

SokWith commented Sep 4, 2024

还有你这个部署的打什么网站都会返回首页,是我的用法不对吗?

image
这是edge https://xyp.pages.dev/https://www.qq.com 打开qq.com的效果,大多数站点都成了移动端了。而我其实只转换了头部那个函数,其他代码都没有动:

export async function onRequest(context) {
  const url = new URL(context.request.url);
  const thisProxyServerUrlHttps = `${url.protocol}//${url.hostname}/`;
  const thisProxyServerUrl_hostOnly = url.host;
  //console.log(thisProxyServerUrlHttps);
  //console.log(thisProxyServerUrl_hostOnly);

  return handleRequest(context.request);
}

@SokWith
Copy link

SokWith commented Sep 4, 2024

再贴一个chrome代理huggingface的,一样的移动端界面:
image

@1234567Yang
Copy link
Owner

感觉pages有些东西匹配不到worker,看一下这个
这是你部署的:
image

这是我直接复制粘贴部署的:
image

@1234567Yang
Copy link
Owner

image
这是qq.com我的打开,没问题,是网页版

@1234567Yang
Copy link
Owner

1234567Yang commented Sep 4, 2024 via email

@SokWith
Copy link

SokWith commented Sep 5, 2024

image 这是qq.com我的打开,没问题,是网页版

知道你演示的workers站点是网页版,我说的是pages部署就变成移动版了一样,而代码,并没有不同。

@1234567Yang
Copy link
Owner

image
image
我刚刚又测试了一下,您的page是正常的啊,这都是您的网站的截图

@SokWith
Copy link

SokWith commented Sep 5, 2024

image image 我刚刚又测试了一下,您的page是正常的啊,这都是您的网站的截图

不是的。
我是没能力解决直接functions部署,采用了workers服务调用,实质还是workers,只是这样就避免了需要自己域名的问题。

但是还是有其他问题,许多登录动作都不能代理了

@1234567Yang
Copy link
Owner

1234567Yang commented Sep 5, 2024

登录代理是我还没有实现,一个是因为实在是很麻烦,需要修改几处代码还需要使劲调,找问题,另一个就我现在还没时间。

应该和是不是worker没关系

@SokWith
Copy link

SokWith commented Sep 6, 2024

看控制台log是 pages的fetch对url: https://xxx.pages.dev/https://yyy.com/zzz 的调取处理成了 GET undefined/https://yyy.com/zzz 了,由此产生加载丢失。
也就是 pages和workers在处理url时规则不同,似乎无解了。

@1234567Yang
Copy link
Owner

fetch不应该啊,fetch是全部在客户端实现的override
哪个网站贴个链接

@binge8
Copy link

binge8 commented Sep 7, 2024

自动分配的域名打不开,还是希望能自定义域

@SokWith
Copy link

SokWith commented Sep 7, 2024

自动分配的域名打不开,还是希望能自定义域

workers.dev是打不开的,pages.dev是可以的。
见上面,没有自己域名的可以参见我的在顶部注释的代码,先部署在workers上,再在pages里面绑定workers的服务,就可以使用pages了。纯pages部署总是将nowlink解释成undefined的url,没有折腾的必要。
其实,后来折腾才发现,单纯的使用一个url改写来反代,适用面太窄了,只要网站多几个子域名调用,就太多的内容不能加载。所以,折腾的意义不大。

随缘在下面放出我后来折腾的 https://xyp.pages.dev 站点代码,还非常简陋(所以仓库暂没开放),但代理 github还是挺正确的:

let TARGET_HOST = '';

export async function onRequest(context) {
  const { request } = context;
  const uri = new URL(request.url);
  console.log('uri', uri.toString());

  // 检查 cookies
  const cookies = request.headers.get('cookie');
  const proxyUrlMatch = cookies && cookies.match(/(?:^|;\s*)ProxyUrl=([^;]*)/);
  if (proxyUrlMatch && proxyUrlMatch[1]) {
    TARGET_HOST = proxyUrlMatch[1];
  } else {
    return new Response(`
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        margin: 0;
      }
      form {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 400px;
      }
      label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
      }
      .input-group {
        display: flex;
        width: 100%;
        margin-bottom: 12px;
      }
      input[type="text"] {
        flex: 1;
        padding: 8px;
        margin-right: 10px;
        border: 1px solid #ccc;
        border-radius: 12px; /* Larger rounded corners */
      }
      input[type="text"]::placeholder {
        color: #aaa;
      }
      button {
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        background-color: #4CAF50;
        color: white;
      }
      .message-box {
        background-color: #e7f3fe;
        color: #31708f;
        padding: 10px;
        border: 1px solid #bce8f1;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
      }
      .message-box a {
        color: #31708f;
        text-decoration: none;
      }
      .message-box a:hover {
        text-decoration: underline;
      }
      @media (max-width: 768px) {
        body {
          padding: 10px;
        }
        form {
          width: 100%;
          max-width: none;
          padding: 15px;
        }
        .input-group {
          flex-direction: column;
        }
        input[type="text"] {
          margin-right: 0;
          margin-bottom: 10px;
        }
        button {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <form>
      <label for="proxyUrl">Enter Proxy URL or Domain:</label>
      <div class="input-group">
        <input type="text" id="proxyUrl" name="proxyUrl" placeholder="https://github.com/SokWith">
        <button type="button" onclick="setProxyUrl()">Go</button>
      </div>
      <div class="message-box">
        Note: Visit <a href="${uri.origin}/CLS">${uri.origin}/CLS</a> to reset the proxy address.
      </div>
    </form>
    <script>
      function setProxyUrl() {
        let proxyUrl = document.getElementById('proxyUrl').value;
        if (!proxyUrl.startsWith('http')) {
          proxyUrl = 'https://' + proxyUrl;
        }
        const url = new URL(proxyUrl);
        const hostname = url.hostname;
        document.cookie = 'ProxyUrl=' + hostname + '; path=/';
        // 替换输入框URL的hostname为当前页面的hostname并跳转
        url.hostname = window.location.hostname;
        window.location.href = url.toString();
      }
    </script>
  </body>
</html>
    `, {
      headers: { 'Content-Type': 'text/html' }
    });
  }

  if (uri.pathname === '/CLS') {
    return new Response('', {
      headers: {
        'Set-Cookie': 'ProxyUrl=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT',
        'Location': '/'
      },
      status: 302
    });
  }

  if (uri.protocol === 'http:' && !/^[0-9.:]+$/.test(TARGET_HOST)) {
    uri.protocol = 'https:';
  }

  uri.host = TARGET_HOST;
  uri.port = TARGET_HOST.split(':')[1] || '';

  const headersObj = {};
  for (const [key, value] of request.headers.entries()) {
    if (key.startsWith('cf-') || key.startsWith('x-') || ['connection', 'origin', 'referer', 'host', 'authority', 'link'].includes(key)) continue;
    headersObj[key] = value;
  }

  const headers = new Headers(headersObj);
  headers.set('Host', uri.host);

  let response = await fetch(uri.toString(), {
    headers,
    method: request.method,
    redirect: request.redirect,
    body: request.body,
  });
  // 处理重定向
  while (response.status === 302) {
    const redirectUrl = response.headers.get('Location');
    response = await fetch(redirectUrl, {
      headers,
      method: request.method,
      body: request.body,
    });
  }

  // 设置 ProxyUrl cookie
  const responseHeaders = new Headers(response.headers);
  responseHeaders.append('Set-Cookie', `ProxyUrl=${TARGET_HOST}; path=/; HttpOnly; Secure`);

  return new Response(response.body, {
    ...response,
    headers: responseHeaders,
  });
}

@1234567Yang
Copy link
Owner

1234567Yang commented Sep 8, 2024

顺便提个题外话,Yandex杀疯了,应该是找到了proxy/any_website然后顺着那个website上所有hyper link转来转去,搞不好我网站真成钓鱼链接了🤪🤪
image


EDIT:

我明明更新了robots.txt怎么还抓?
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help-wanted Want some help
Projects
None yet
Development

No branches or pull requests

5 participants