在不可用时使用 PHP 从 CDN 回退到本地存储

问题描述 投票:0回答:2

我需要一些帮助。我想为我的源代码创建一个后备。我正在使用 CDN 来托管我的 javascript、css 和图像。我想做的是在 php 中创建一个回退,例如 ip 123.456.789 在 400 毫秒内不可用,php 将回退到 987.654.321 获取我的本地存储

我在想一些与此类似的事情:

if ip 123.456.789 in 400ms 

//show this file from 123.456.789

else

//show this file from 987.654.321

我的源代码是硬编码的,例如:

<script type="text/javascript" src="123.456.789/js/jquery.js"></script>

因此,如果 123.456.789 在 400 毫秒内不可用,我希望加载此地址

<script type="text/javascript" src="987.654.321/js/jquery.js"></script>
php javascript html cdn fallback
2个回答
2
投票

我不久前回答了我自己的问题。所以决定在这里分享。

<?php
//debug off by default
error_reporting(0);

//cdn fallback
if (!isset($_GET['aws_cdn'])) {

        $cdn_fallback = curl_init('http://123.456.789/'); //Set to CDN IP or URL
        curl_setopt($cdn_fallback, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($cdn_fallback, CURLOPT_NOSIGNAL, 1);
        curl_setopt($cdn_fallback, CURLOPT_TIMEOUT_MS, 400); //How many milliseconds before fallback to local storage

        $data = curl_exec($cdn_fallback);
        $curl_errno = curl_errno($cdn_fallback);
        $curl_error = curl_error($cdn_fallback);
        curl_close($cdn_fallback);

        if ($curl_errno > 0) { ?>  
    <script type="text/javascript" src="http://example.com/js/jquery.js"></script>
      <?php } else { ?>
    <script type="text/javascript" src="http://123.456.789/cdn/js/jquery.js"></script>
      <?php }} ?>

0
投票

您可以使用JavaScript检测CDN资源是否加载失败,然后回退到本地副本。以下是实现这一目标的方法:

1。使用后备加载 CDN 资源:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CDN Fallback Example</title>
    <!-- Bootstrap CSS from CDN with fallback -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha384-whateverhash" crossorigin="anonymous" onerror="this.onerror=null;this.href='local-path/bootstrap.min.css';">
    <!-- jQuery from CDN with fallback -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-whateverhash" crossorigin="anonymous" onerror="this.onerror=null;this.src='local-path/jquery-3.6.0.min.js';"></script>
    <!-- Your local stylesheets -->
    <link rel="stylesheet" href="path/to/your/local/styles.css">
</head>
<body>
    <!-- Your HTML content -->
    
    <!-- Bootstrap JS from CDN with fallback -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js" integrity="sha384-whateverhash" crossorigin="anonymous" onerror="this.onerror=null;this.src='local-path/bootstrap.bundle.min.js';"></script>
    <!-- Your local scripts -->
    <script src="path/to/your/local/scripts.js"></script>
</body>
</html>

2。使用 JavaScript 进行回退:

如果想在加载本地脚本之前确保CDN已经失败,可以添加JavaScript检查:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CDN Fallback Example</title>
    <!-- Bootstrap CSS from CDN -->
    <link id="bootstrap-css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha384-whateverhash" crossorigin="anonymous">
    <!-- Your local stylesheets -->
    <link rel="stylesheet" href="path/to/your/local/styles.css">
</head>
<body>
    <!-- Your HTML content -->

    <!-- jQuery from CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-whateverhash" crossorigin="anonymous"></script>
    <script>
        // Check if jQuery loaded, if not, load local copy
        if (typeof jQuery == 'undefined') {
            var script = document.createElement('script');
            script.src = 'local-path/jquery-3.6.0.min.js';
            document.head.appendChild(script);
        }
    </script>

    <!-- Bootstrap JS from CDN -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js" integrity="sha384-whateverhash" crossorigin="anonymous"></script>
    <script>
        // Check if Bootstrap CSS loaded, if not, load local copy
        var bootstrapCss = document.getElementById('bootstrap-css');
        bootstrapCss.onerror = function() {
            this.onerror=null;
            this.href='local-path/bootstrap.min.css';
        };
    </script>
    
    <!-- Your local scripts -->
    <script src="path/to/your/local/scripts.js"></script>
</body>
</html>

在这些例子中:

  • 将 local-path/bootstrap.min.css 替换为本地路径 Bootstrap CSS 文件。
  • 将 local-path/jquery-3.6.0.min.js 替换为 本地 jQuery 文件的路径。
  • 将 local-path/bootstrap.bundle.min.js 替换为本地路径 Bootstrap JS 文件。
  • 根据需要添加其他脚本和样式表。

这样,当您离线或CDN资源加载失败时,将使用您的本地副本。

© www.soinside.com 2019 - 2024. All rights reserved.