Hướng dẫn tích hợp CDN cho Laravel

CDN là viết tắt của Content Delivery Network, có thể tạm dịch là mạng lưới cung cấp nội dung. Với hệ thống các máy chủ được đặt tại nhiều nơi trên thế giới sẽ giúp tối ưu tốc độ website cho người truy cập, cải thiện chất lượng website. Trong bài viết này HOSTVN sẽ hướng dẫn các bạn tích hợp CDN cho Laravel.

1. Tích hợp CDN cho Laravel

1.1. Bước 1: Đăng ký dịch vụ CDN

Đầu tiên để sử dụng CDN các bạn cần đăng ký dịch vụ CDN. Nếu chưa đăng ký các bạn có thể tham khảo các gói CDN của HOSTVN tại đây. Sau khi đăng ký dịch vụ CDN các bạn sẽ được cung cấp link CDN có dạng tương tự như sau:

qf0sroimw4web.cdn.hostvn.net

1.2. Bước 2: Tạo custom helper cho Laravel

Tiếp theo để load được link CDN các bạn tạo thêm custom helper để cấu hình. Để tạo custom helper đầu tiên các bạn tạo thư mục app/Helpers

Tiếp theo các bạn tạo file app/Helpers/CDN.php với nội dung như sau:

<?php

if (!function_exists('cdn')) {
   function cdn( $asset ){

      // Verify if KeyCDN URLs are present in the config file
      if( !Config::get('app.cdn') )
         return asset( $asset );

      // Get file name incl extension and CDN URLs
      $cdns = Config::get('app.cdn');
      $assetName = basename( $asset );

      // Remove query string
      $assetName = explode("?", $assetName);
      $assetName = $assetName[0];

      // Select the CDN URL based on the extension
      foreach( $cdns as $cdn => $types ) {
          if( preg_match('/^.*\.(' . $types . ')$/i', $assetName) )
             return cdnPath($cdn, $asset);
      }

      // In case of no match use the last in the array
      end($cdns);
     return cdnPath( key( $cdns ) , $asset);
  } 
}

if (!function_exists('cdnPath')) {
  function cdnPath($cdn, $asset) {
     return  "//" . rtrim($cdn, "/") . "/" . ltrim( $asset, "/");
  }
}

1.3. Bước 3: Tạo service provider

Tiếp theo để Laravel tự động load file helper các bạn cần tạo thêm service provider. Để tạo một service provider các bạn sử dụng lệnh sau:

php artisan make:provider HelperServiceProvider

Sau đó các bạn mở file app/Providers/HelperServiceProvider.php xoá toàn bộ nội dung bên trong file và thay thế bằng nội dung sau:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class HelperServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {
        foreach (glob(app_path() . '/Helpers/*.php') as $file) {
            require_once($file);
        }
    }

    /**
     * Bootstrap services.
     *
     * @return void
     */
    public function boot()
    {
        //
    }
}

Cuối cùng mở file config/app.php và thêm vào block providers

App\Providers\HelperServiceProvider::class,

1.4. Bước 4: Tích hợp CDN

Để Laravel load toàn bộ nội dung tĩnh bao gồm hình ảnh, js, css từ link CDN các bạn thêm vào cuối file config/app.php nội dung sau:

/*
    |--------------------------------------------------------------------------
    | CDN
    |--------------------------------------------------------------------------
    */

    'cdn' => array(
        "qf0sroimw4web.cdn.hostvn.net" => "jpg|jpeg|png|gif|svg|ico|css|js|eot|woff|ttf",
    ),

Trong đó qf0sroimw4web.cdn.hostvn.net chính là link CDN của các bạn

1.5. Bước 5: Thay đổi toàn bộ link js, css, hình ảnh thành link CDN

Bước cuối cùng các bạn cần thay đổi toàn bộ link js, css, hình ảnh thành link CDN. Cách gọi link js, css, hình ảnh lúc này sẽ như sau đây

// Image
<img src="{{ cdn( "/img/yourImg.png" ) }}" alt="Image" />

// CSS
<link rel="stylesheet" href="{{ cdn('frontend/css/main.css') }}">

// js
<script src="{{ cdn('frontend/js/main.js') }}"></script>

2. Kết luận

Qua bài viết này HOSTVN đã hướng dẫn các bạn cách tích hợp CDN cho Laravel. Nếu có bất kỳ ý kiến đóng góp nào các bạn có thể để lại bình luận ở bên dưới cho chúng tôi biết. Ngoài ra các bạn có thể xem thêm Hướng dẫn upload Laravel lên hosting cPanel.