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

waline、giscus评论组件一部署到生产环境就loading #441

Open
3 tasks done
resetsix opened this issue Apr 20, 2024 · 13 comments
Open
3 tasks done

waline、giscus评论组件一部署到生产环境就loading #441

resetsix opened this issue Apr 20, 2024 · 13 comments

Comments

@resetsix
Copy link

检查清单

  • 已经阅读过 官方文档 相关内容,并尝试进行搜索。
  • 尝试过在本地测试运行官方 demo 源码。
  • 尝试过在 Codespace 中测试运行官方 demo 源码。

问题描述

giscus在本地就跑起来,但是部署到 vercel 生产环境之后就一直 loadingwaline开发环境和生产环境都是 loading

walineserverURL服务确保可用;giscus在本地环境也确保能正常评论。摸了一天也没摸清楚生产环境转圈的原因,求解惑。

图片

// waline

comments:
  service: waline
  # Waline
  # https://waline.js.org/
  waline:
    js: https://unpkg.com/@waline/client@v2/dist/waline.js
    css: https://unpkg.com/@waline/client@v2/dist/waline.css
    # Waline server address url, you should set this to your own link
    serverURL: http://comment.resetsix.cn # waline 地址
    # If false, comment count will only be displayed in post page, not in home page
    commentCount: true
    # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`.
    pageview: false
    emoji: 
      - https://gcore.jsdelivr.net/gh/norevi/[email protected]/blobs

// giscus

# comments:
#   service: giscus
#   # giscus
#   # https://giscus.app/zh-CN
#   giscus:
#     data-repo: resetsix/blog_giscus_comments # [在此输入仓库]
#     data-repo-id: R_kgDOLwyXtw # [在此输入仓库 ID]
#     data-category: Announcements # [在此输入分类名]
#     data-category-id: DIC_kwDOLwyXt84Ce0Nw
#     data-mapping: pathname
#     data-strict: 0
#     data-reactions-enabled: 1
#     data-emit-metadata: 0
#     data-input-position: top # top, bottom
#     data-theme: preferred_color_scheme
#     data-lang: zh-CN
#     data-loading: lazy
#     crossorigin: anonymous
@resetsix resetsix changed the title waline、giscus评论组件在生产环境一直 loading waline、giscus评论组件一部署到生产环境就loading Apr 20, 2024
@resetsix
Copy link
Author

// _config.yml
url: https://resetsix.cn

@gsh1209
Copy link
Contributor

gsh1209 commented Apr 20, 2024

你的主题使用了1.27.0最新版本,但是配置文件没有更新。新版本主题已经更新到waline3,你所使用的旧版配置文件还是waline2。

@gsh1209
Copy link
Contributor

gsh1209 commented Apr 20, 2024

看起来你使用了这个commit之前的配置文件 bdef4a1

@resetsix
Copy link
Author

看起来你使用了这个commit之前的配置文件 bdef4a1

太对了果然是这样,解决了感谢大佬。

我还有一个疑惑,单独访问评论的时候有上方的邮箱选项,但是在博客中却没有。我翻遍了文档和配置文件中也没找到是在哪里配置的。

图片 图片

@gsh1209
Copy link
Contributor

gsh1209 commented Apr 21, 2024

因为你已经登录了,你可以点头像旁边的❌退出之后刷新看看,或者用另外的浏览器访问一下

@resetsix
Copy link
Author

因为你已经登录了,你可以点头像旁边的❌退出之后刷新看看,或者用另外的浏览器访问一下

抱歉再次打扰。我还有最后一个问题,代码托管到Github后,无论我将站点部署到Vercel还是 CF,都只能使用默认自带的域名才能显示评论框,而访问自定义域名还是 loading。

我初步以为是_config.ymlurl值没有配置正确的原因,但始终通过访问自定义域名的时候就是一直转圈。

url: https://resetsix.cn

站点配置的自定义域名也是同上。DNS 解析应该也是正确的,不然网站应该都访问不了。


通过网络我发现访问默认域名的时候会请求 waline.jswaline.css,但是自定义域名只有 waline.js的请求

@resetsix
Copy link
Author

图片

默认域名 (有评论)

https://041ea7bd.kudoshinichix.pages.dev/1970/01/01/hello-world/

自定义域名 (loading)

https://resetsix.cn/1970/01/01/hello-world/

@gsh1209
Copy link
Contributor

gsh1209 commented Apr 21, 2024

你需要看一下waline的日志,在使用cn域名访问的时候出现了什么错误。另外可以发一下你的waline配置帮助判断。

@resetsix
Copy link
Author

你需要看一下waline的日志,在使用cn域名访问的时候出现了什么错误。另外可以发一下你的waline配置帮助判断。

代码托管:Github
站点部署:Vercel或Cloudflare
问题描述:生产环境通过自定义域名访问时(cn域名)无法加载出waline组件,默认域名正常。本地启动访问也正常。
因为我没有其他的域名,所以无法测试其他域名的情况。

能加载出评论框的站点(默认域名)

https://blog-ruby-pi-11.vercel.app/hello-world/

一直loading转圈无法加载出评论框的站点(cn域名)

https://www.resetsix.cn

www替换成blog也行,但效果始终都是 loading。

评论服务(正常)

https://comment.resetsix.cn/

提示:开了代理,也尝试清除过浏览器缓存。Chrome、Firefox也都用过。
配置如下

comments:
  service: waline # beaudar, utterances, giscus, twikoo, waline, artalk
  comment_title: 快来参与讨论吧~
  # Waline
  # https://waline.js.org/
  waline:
    js: https://gcore.jsdelivr.net/npm/@waline/[email protected]/dist/waline.js
    css: https://gcore.jsdelivr.net/npm/@waline/[email protected]/dist/waline.css
    meta_css: https://gcore.jsdelivr.net/npm/@waline/[email protected]/dist/waline-meta.css
    serverURL: https://comment.resetsix.cn # 默认域名 https://blog-comments-indol.vercel.app #v
    commentCount: false
    pageview: false
    copyright: false
    lang: zh-CN

正常加载会请求如下接口

https://comment.resetsix.cn/api/comment

而访问自定义域名不会请求上面的接口(只有一个waline.js)。我在博客中手动请求也没出现拦截或跨域的问题(状态码 200)

@gsh1209
Copy link
Contributor

gsh1209 commented Apr 22, 2024

vercel上是有日志的,可能叫runtime logs,我已经不在vercel上部署了,没办法操作,你可以找一下你的vercel上面waline的日志

@resetsix
Copy link
Author

runtime logs

图片 默认域名时的请求 图片

自定义域名就是不请求 comment 接口,反而去请求一个什么 rum 文件没见过

https://resetsix.cn/cdn-cgi/rum
图片 图片

为啥会报 405 呢我丢,服务器禁止了使用当前HTTP 方法的请求

@gsh1209
Copy link
Contributor

gsh1209 commented Apr 22, 2024

comment.resetsix.cn似乎是解析到了cloudflare ip。

这个问题我目前没有思路,建议你删除所有的waline服务、域名解析和绑定记录,严格按照waline的文档重新部署并绑定域名,不需要在不同平台做尝试,vercel能跑通就说明配置没有问题。

@resetsix
Copy link
Author

comment.resetsix.cn似乎是解析到了cloudflare ip。

这个问题我目前没有思路,建议你删除所有的waline服务、域名解析和绑定记录,严格按照waline的文档重新部署并绑定域名,不需要在不同平台做尝试,vercel能跑通就说明配置没有问题。

虽然cn域名我在国内买的,但我把dns解析迁移到cf上的。所以waline自定义域名服务也是在cf上做的解析,但无论comment我是否只通过cf做dns解析代理加上也都这样。可能就是域名解析放在cf上的锅吧。

十分感谢回复,辛苦了。

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

No branches or pull requests

2 participants