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

helpers folder

 

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,

HelperServiceProvider

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",
    ),

tích hợp CDN cho Laravel

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.

Ebook Wordpress

Đăng ký nhận Ebooks toàn tập hướng dẫn sử dụng WordPress cơ bản

Góc chia sẻ

Top 5 bí quyết quản trị thương hiệu hiệu quả

2020-12-30 16:29:12

Digital MarketingGóc chia sẻ

Top 3 xu hướng digital marketing trong năm 2021

2021-1-12 16:51:06

0 trả lời ATác giả MQuản lý
    Chưa có phản hồi nào
Trung tâm cá nhân
Giỏ hàng
Phiếu mua hàng
Đăng nhập ngay
Tin nhắn Danh sách tin nhắn
Tìm kiếm