[Mirror issue] 使用 Flutter 中国镜像的问题

F1462900874 commented 2 years ago

问题镜像 URL

Downloading CanvasKit failed导致项目无法启动

错误内容截图或 log

Failed to download https://mirrors.cloud.tencent.com/flutter/flutter_infra_release/cipd/flutter/web/canvaskit_bundle/+/yrsfF-vTvu4jzBBm1o6tDl70dky-l4G29Dnj75UvRDgC. Ensure you have network connectivity and then try again.

pubspec.yaml

name: flutter_h5
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.17.1 <3.0.0"

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.5
  crypto: ^3.0.2  #加密
  provider: ^6.0.3  #状态管理
  dio: ^4.0.6 #网络请求
  dio_smart_retry: ^1.3.2  # 重试请求
  flutter_easyloading: ^3.0.5  #loading
  shared_preferences: ^2.0.15  #本地存储
  uuid: ^3.0.6  #uuid
  cached_network_image: ^3.2.2  #图片缓存
  url_launcher: ^6.1.5  #打电话发邮件
  intl: ^0.17.0  #工具
  universal_html: ^2.0.8  # js  通信
  js: ^0.6.4  # js 通信

  package_info_plus: ^1.4.3+1 #设备信息
  carrier_info: ^2.0.5 #运营商信息

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.1

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/tabbar/
    - images/follower/
    - images/promotion/
    - images/login/
    - images/like/
    - images/getcoins/
    - images/setting/
    - images/

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  fonts:
    - family: Avenir
      fonts:
        - asset: fonts/Avenir/Avenir.ttf
          weight: 900
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

网络环境

No response

flutter doctor -v

Flutter assets will be downloaded from https://mirrors.cloud.tencent.com/flutter. Make sure you trust this source!
[√] Flutter (Channel stable, 3.3.0, on Microsoft Windows [版本 10.0.19044.1889], locale zh-CN)
    • Flutter version 3.3.0 on channel stable at D:\Work\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ffccd96b62 (2 days ago), 2022-08-29 17:28:57 -0700
    • Engine revision 5e9e0e0aa8
    • Dart version 2.18.0
    • DevTools version 2.15.0
    • Pub download mirror https://mirrors.cloud.tencent.com/dart-pub
    • Flutter download mirror https://mirrors.cloud.tencent.com/flutter

[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at D:\Work\Android\SDK
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.3)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.2.32526.322
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2021.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.19044.1889]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 104.0.5112.102
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 104.0.1293.70

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
Process finished with exit code 0

AlexV525 commented 2 years ago

你的镜像地址配置了腾讯的镜像，我们并未知晓其是否支持 CIPD 的获取，请向对应的镜像维护人员确认，谢谢。

chenglu commented 2 years ago

@F1462900874 谢谢反馈，腾讯云镜像可能不在我们的“服务范围”之内 ;-)

如果不是在腾讯云内网使用，我们建议你使用我们的 flutter-io.cn 中国镜像或者使用清华 TUNA 的镜像，虽然腾讯云的镜像脚本来自 TUNA (*根据过去的经验，不确定现在是如何)，但是我们和 TUNA 有合作——TUNA 的镜像配备了完善的 404 回源 flutter-io.cn 中国镜像的策略，因此应该会相对在访问的时候 Storage 有比较稳定的体验。

如果是需要在腾讯云内网或者使用腾讯云镜像是刚需的话，请根据我们的镜像页面的内容联系腾讯云镜像的维护者，如果腾讯云镜像未来修复了这个问题，也欢迎回来告诉我们。

89ao commented 1 year ago

@chenglu 好，请问下，如何验证腾讯云的CIPD获取是否正常？以及tuna的404回源具体是怎么配置的？如果我司的私有源也计划支持flutter的话，需要做什么配置？

chenglu commented 1 year ago

Tuna 镜像 404 回源思路是，前端的 nginx 服务器设定：如果遇到 404，就尝试:

直接从中国镜像拉取内容 https://mirrors.tuna.tsinghua.edu.cn/flutter/cdn-monitor-for-qiniu/1-1.gif -- 这是之前我们合作共同在 tuna 建立镜像的时候设定的，关于回源中国镜像可用性检测的 URL
或者直接 301 到中国镜像 https://mirrors.tuna.tsinghua.edu.cn/flutter/flutter_infra_release/cipd/flutter/web/canvaskit_bundle/+/yrsfF-vTvu4jzBBm1o6tDl70dky-l4G29Dnj75UvRDgC -- 由于 cipd 是后期加入的，所以在 cipd 上应该是采取了这个策略

具体配置方法应该是一些 nginx 反向代理处理 301、404 时候的常用配置，这里就不多赘述了。

腾讯云对 cipd 支持的验证方式，本 issue 里的那个链接仍处于无法访问状态，可能就代表这个问题腾讯云仍未修复。

不知道是否回答了你的问题，有任何问题请再随时沟通哈，谢谢～ cc/ @89ao

89ao commented 1 year ago

谢谢 @chenglu 进一步探讨一下，这里的404回源思路，是指以下哪种方式呢？ A：

error_page 404 =  https://mirrors.tuna.tsinghua.edu.cn/flutter/cdn-monitor-for-qiniu/1-1.gif
error_page 301 = https://mirrors.tuna.tsinghua.edu.cn/flutter/flutter_infra_release/cipd/flutter/web/canvaskit_bundle/+/yrsfF-vTvu4jzBBm1o6tDl70dky-l4G29Dnj75UvRDgC

B:

        proxy_next_upstream error timeout http_404;

chenglu commented 1 year ago

简单搜了一下，proxy_next_upstream 好像是适用于动态选择多台 upstream 的情况，看起来更像是第一种，error 404 的时候做别的操作。

nginx 可以设定捕获错误 proxy_intercept_errors on;，然后你可以将收到的 404 错误 301 到访问中国镜像，如果中国镜像也是 404，那才是「真的」 404，或者也有中国镜像没有 cover 到的内容，届时应该会有反馈我们就会立刻处理，比如之前 cipd 以及 pub-package 更换 bucket 的时候。

换句话说，404 回源指的是，当你的 镜像服务器 在获取上游资源碰到 404 的时候，策略 1）301 跳转到中国镜像；策略 2）重新修改上游为中国镜像再次尝试获取资源，如果获取到内容就返回给用户，如果还是 404，再返回给用户 404。

这是因为不同的镜像获取上游资源的方式不同，有可能上游进行了修改而镜像还没有来记得跟进镜像策略，这个时候可能就会出现用户访问的时候 404，因此 Flutter 镜像配置完善的「404 回源」是非常必要的。

希望解答了你的问题，谢谢！

89ao commented 1 year ago

@chenglu 感谢答复：

上方的 error_page 404 = https://mirrors.tuna.tsinghua.edu.cn/flutter/cdn-monitor-for-qiniu/1-1.gif 我理解是404到固定的url上。

那么error_page 301 = https://mirrors.tuna.tsinghua.edu.cn/flutter/flutter_infra_release/cipd/flutter/web/canvaskit_bundle/+/yrsfF-vTvu4jzBBm1o6tDl70dky-l4G29Dnj75UvRDgC 这个后面的url是固定写死的，还是需要写表达式转换呢？（根据不同包跳转到不同url？）

另外，我这边配置完成之后有办法可以测试吗？是否我访问https://domain.to.repo/flutter/NoneExistPak/ 能跳转到1-1.gif即人为成功？

chenglu commented 1 year ago

我之前提到过：

404 回源指的是，当你的 镜像服务器 在获取上游资源碰到 404 的时候，策略 1）301 跳转到中国镜像；策略 2）重新修改上游为中国镜像再次尝试获取资源，如果获取到内容就返回给用户，如果还是 404，再返回给用户 404。

因此这个逻辑实现起来建议是，如果遇到 404，proxy_pass 变成中国镜像重新请求，请求成功加入缓存，如果还是 404，就 301 到中国镜像去。

另外请谅解，对于镜像的问题，我们只能对一些通用的问题做回应和解答，具体的网络环境比较复杂，需要自行做更多探索和构建哈，谢谢理解和支持！

89ao commented 1 year ago

收到，非常感谢！

cfug / flutter.cn