Cara Menerapkan Server MCP ke Cloudflare

Temukan langkah deploy server MCP ke Cloudflare, integrasi lancar & manajemen kuat.

Ardianto Nugroho

Ardianto Nugroho

15 April 2025

Cara Menerapkan Server MCP ke Cloudflare

Ingin menerapkan server Model Context Protocol (MCP) berperforma tinggi dan dapat diakses secara global? Cloudflare menyediakan platform yang sempurna untuk meluncurkan, mengamankan, dan menskalakan infrastruktur MCP Anda. Panduan komprehensif ini memandu Anda melalui seluruh proses penerapan, memanfaatkan jaringan edge mutakhir, fitur keamanan yang kuat, dan arsitektur tanpa server Cloudflare untuk memaksimalkan kinerja dan keandalan server Anda.

💡
Tingkatkan alur kerja MCP Anda saat bekerja dengan AI IDE seperti Windsurf atau Cursor dengan Apidog! Platform all-in-one gratis ini memungkinkan Anda untuk merancang, menguji, mock, dan mendokumentasikan API dengan mulus—semuanya dalam satu antarmuka. Cobalah dan tingkatkan pengembangan Anda ke level berikutnya!
Apidog Ui image
button

Apa itu Server MCP?

Server MCP bertindak sebagai jembatan, memungkinkan aplikasi untuk berkomunikasi menggunakan protokol standar, sehingga memudahkan integrasi sistem yang berbeda. Ini sangat berharga saat mengintegrasikan Large Language Models (LLM) dengan layanan atau aplikasi lain.

Mengapa Menerapkan ke Cloudflare?

Penerapan ke Cloudflare memastikan skalabilitas global dan latensi rendah, berkat jaringan edge-nya yang mencakup lebih dari 300 kota. Tidak seperti penyedia cloud tradisional, Cloudflare Workers menggunakan model tanpa server, menjalankan kode lebih dekat ke pengguna—ideal untuk aplikasi real-time seperti chatbot bertenaga LLM, yang mendapat manfaat dari waktu respons yang lebih cepat.

Cloudflare menawarkan keamanan yang kuat, termasuk Web Application Firewall (WAF) yang dapat disesuaikan untuk memblokir ancaman seperti serangan injeksi prompt. Perlindungan DDoS-nya secara otomatis mengurangi lonjakan lalu lintas, sementara enkripsi SSL/TLS mengamankan data secara default. Kebijakan HTTPS yang ketat lebih lanjut mencegah serangan man-in-the-middle, menjadikannya pilihan yang aman untuk aplikasi sensitif.

Dari perspektif biaya, Cloudflare sangat efisien. Tingkat gratis mendukung 100.000 permintaan harian, sementara proyek yang lebih besar dapat menggunakan Workers Unbound untuk komputasi tak terbatas hanya dengan $0,15 per juta permintaan—lebih murah daripada AWS Lambda. Ini menjadikan Cloudflare pilihan yang ramah anggaran untuk menskalakan penerapan server LLM dan MCP.

Secara keseluruhan, menerapkan server MCP di Cloudflare adalah keputusan strategis bagi pengembang yang memprioritaskan kinerja, keamanan, dan efisiensi biaya. Kemampuan komputasi edge-nya, dikombinasikan dengan keamanan tingkat perusahaan dan harga yang kompetitif, menjadikannya platform yang sangat baik untuk aplikasi modern dan terukur.

Prasyarat

Sebelum Anda mulai, pastikan Anda memiliki yang berikut:

Akun Cloudflare: Daftar untuk akun Cloudflare dengan mengunjungi situs web resmi mereka jika Anda belum memilikinya.

Nama Domain: Domain sangat penting untuk merutekan lalu lintas melalui DNS Cloudflare. Jika Anda tidak memilikinya, Cloudflare menawarkan subdomain *.workers.dev sebagai solusi sementara.

Node.js dan npm: Pastikan Anda telah menginstal Node.js dan npm di mesin lokal Anda untuk pengaturan dan penerapan server.

Kode Server MCP: Pastikan kode Anda stateless, karena Cloudflare Workers tidak mempertahankan koneksi persisten. Misalnya, hindari menyimpan data sesi dalam memori—gunakan Cloudflare KV atau Durable Objects sebagai gantinya.

Langkah 1: Menyiapkan Proyek MCP

Sebelum menerapkan, kita perlu membuat struktur proyek untuk server MCP. Ini akan berfungsi sebagai fondasi untuk pengembangan dan integrasi.

Buat Direktori Proyek Baru

1. Buka terminal atau command prompt Anda.

2. Buat folder baru untuk proyek MCP Anda:

mkdir MCP-Project
cd MCP-Project

Direktori ini akan berisi semua file dan konfigurasi yang diperlukan untuk server MCP Anda.

Inisialisasi Cloudflare Worker

1. Jalankan perintah berikut untuk membuat proyek Cloudflare Worker baru:

npx create-cloudflare@latest mcp-demo

Perintah ini menginisialisasi Cloudflare worker baru dengan templat yang telah ditentukan sebelumnya.

2. Pilih "Hello World Example" sebagai templat. Ini menyediakan struktur worker dasar.

select hello world example project

3. Pilih TypeScript sebagai bahasa proyek. TypeScript menawarkan tooling dan penanganan kesalahan yang lebih baik.

choose language: typescript

4. Jika diminta untuk menyiapkan Git untuk kontrol versi, pilih Tidak (opsional tetapi disarankan untuk pelacakan versi).

5. Ketika diminta untuk menerapkan segera, Anda dapat memilih Ya atau opsional memilih Tidak (kita masih akan menerapkan nanti).

6. Navigasi ke direktori proyek:

# Ganti "mcp-demo" dengan nama proyek Anda
cd mcp-demo 

7. Siapkan server MCP dengan menjalankan:

npx workers-mcp setup

8. Saat diminta, tekan Enter untuk mengonfirmasi "Ya".

9. Tekan Enter lagi untuk mengganti konten src/index.ts.

10. Worker Anda sekarang berhasil diterapkan ke server MCP.

Langkah 2: Mengintegrasikan Server MCP dengan Claude

Claude adalah asisten AI yang dapat berinteraksi dengan server MCP. Integrasi memastikan bahwa Claude dapat berkomunikasi dengan server MCP yang diterapkan (ini adalah kelanjutan dari langkah-langkah di atas).

  1. Anda akan diminta untuk menamai server MCP Anda (misalnya, mcp-demo).
configure claude desktop

2. Jika Claude Desktop diinstal, konfigurasi akan secara otomatis ditambahkan ke file konfigurasinya (.json).

cloudflare mcp configuration

3. File .json melacak semua server MCP yang telah Anda instal, memungkinkan interaksi tanpa batas antara Claude dan beberapa lingkungan MCP.

4. Integrasi ini memungkinkan Claude untuk mengakses alat dan fungsi server MCP Anda.

Langkah 3: Menjelajahi Fungsi Server MCP

Server MCP menyediakan berbagai alat yang dapat dieksplorasi dan didokumentasikan untuk meningkatkan kegunaan.

  1. Buka index.ts di folder proyek Anda.

2. Gunakan docstring untuk mendokumentasikan setiap alat secara detail. Dokumentasi yang tepat membantu AI dan pengembang memahami fungsionalitas alat.

docstring example

3. Sebuah docstring harus mencakup:

Contoh fungsi yang didokumentasikan dengan baik:

/**
 * Menambahkan dua angka bersama-sama.
 * @param {number} a - Angka pertama.
 * @param {number} b - Angka kedua.
 * @returns {number} - Jumlah kedua angka.
 */
function addNumbers(a: number, b: number): number {
  return a + b;
}

4. Dokumentasi yang terstruktur dengan baik memastikan bahwa alat dapat digunakan secara efektif di Claude dan klien MCP lainnya.

Langkah 4: Menguji Server MCP

Pengujian memastikan server MCP Anda berfungsi dengan benar sebelum menerapkannya.

1. Buka terminal baru dan jalankan:

npx @modelcontextprotocol/inspector@latest

Perintah ini meluncurkan MCP Inspector, klien interaktif untuk menguji alat MCP.

2. Buka MCP Inspector di browser web dengan menavigasi ke:

http://localhost:5173

3. Tambahkan jalur URL yang mengarah ke server MCP Anda dan sambungkan.

input url

4. Klik "List Tools" untuk melihat alat yang tersedia yang diekspos oleh server MCP Anda.

view available tools

5. Panggil alat dan verifikasi bahwa alat tersebut merespons dengan benar.

Langkah 5: Menjalankan Server MCP dengan Claude

Setelah terintegrasi dengan Claude, Anda dapat berinteraksi dengan server MCP Anda melalui perintah berbasis AI.

  1. Buka Claude Desktop.
  2. Sebuah notifikasi akan muncul: "You have one new MCP tool available."
add mcp server to claude

3. Deskripsi dari docstring akan ditampilkan di Claude, menjelaskan fungsi alat tersebut.

view mcp server's available tools

4. Anda akan diminta untuk mengizinkan Claude berkomunikasi dengan server MCP. Klik "Allow for this chat".

claude configure mcp server for chat

5. Server MCP Anda sekarang terhubung dan dapat diakses melalui Claude, memungkinkan otomatisasi berbasis AI yang mulus. Masukkan prompt contoh untuk menguji interaksi dan melihat respons:

>> Say hello to John Doe.

Langkah 6: Menerapkan Server MCP Anda

Untuk akses jarak jauh, terapkan server MCP Anda ke Cloudflare.

7. Buka terminal baru dan jalankan:

npx wrangler@latest deploy

8. Jika menggunakan Git, Anda dapat menerapkan dengan mendorong perubahan atau menggabungkan pull request ke dalam cabang utama.

9. Setelah diterapkan, salin URL Cloudflare dari server MCP Anda dan masukkan URL ini di MCP Inspector di http://localhost:5173. Server MCP Anda sekarang aktif dan dapat diakses dari jarak jauh.

💡
Jangan lupa untuk melihat di HiMCP, temukan 1682+ Server dan Klien MCP yang Luar Biasa, dan tingkatkan Alur Kerja Pengkodean AI Anda dengan mudah!

Langkah 7: Menghubungkan Server MCP Jarak Jauh Anda melalui Proksi Lokal

Setelah diterapkan, Anda dapat menghubungkan Claude Desktop ke server MCP jarak jauh Anda menggunakan proksi lokal.

  1. Gunakan mcp-remote untuk memungkinkan Claude dan klien MCP lainnya berkomunikasi dengan server jarak jauh Anda.
  2. Perbarui file konfigurasi Claude Desktop Anda (.json) dengan URL server MCP Anda:
{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://your-worker-name.your-account.workers.dev/sse"
      ]
    }
  }
}

3. Mulai ulang Claude Desktop dan selesaikan alur autentikasi.

4. Uji integrasi dengan bertanya kepada Claude:

>> Could you use the math tool to add 23 and 19?

5. Claude harus memanggil alat matematika dan mengembalikan hasil yang benar dari server MCP Anda.

Kesimpulan

Menerapkan server MCP Anda ke Cloudflare dapat secara signifikan meningkatkan skalabilitas, keamanan, dan kinerjanya. Dengan mengikuti panduan langkah demi langkah ini, Anda dapat memanfaatkan infrastruktur Cloudflare untuk mengelola server MCP Anda secara efektif dan Anda akan berhasil:

✔ Menyiapkan server MCP. ✔ Mengintegrasikannya dengan Claude. ✔ Menjelajahi dan mendokumentasikan fungsi server. ✔ Menguji server secara lokal menggunakan MCP Inspector. ✔ Menerapkan server MCP ke Cloudflare. ✔ Menghubungkan server MCP jarak jauh ke Claude Desktop.

Server MCP Anda sekarang terukur, aman, dan dapat diakses secara global melalui Cloudflare! Pengaturan ini ideal untuk mengintegrasikan LLM dan layanan lain yang memerlukan lingkungan server yang kuat dan andal. 🚀

button

Explore more

Cara Menggunakan OpenAI Sora Secara Gratis: Panduan Lengkap untuk Microsoft Bing Video Creator

Cara Menggunakan OpenAI Sora Secara Gratis: Panduan Lengkap untuk Microsoft Bing Video Creator

💡Ingin alat Pengujian API hebat yang menghasilkan Dokumentasi API yang indah? Ingin platform Terintegrasi, All-in-One untuk Tim Pengembang Anda bekerja sama dengan produktivitas maksimum? Apidog memenuhi semua permintaan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!tombol Model teks-ke-video mutakhir OpenAI, Sora, telah mengubah pembuatan konten yang dihasilkan AI dengan kemampuannya menciptakan video yang sangat realistis dari instruksi teks sederhana. Namun, biaya

3 June 2025

Apa itu Ollama? Cara Menginstal Ollama?

Apa itu Ollama? Cara Menginstal Ollama?

💡Ingin alat Pengujian API yang hebat yang menghasilkan Dokumentasi API yang indah? Ingin platform terintegrasi, All-in-One untuk Tim Pengembang Anda bekerja sama dengan produktivitas maksimum? Apidog memenuhi semua permintaan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau! button Lanskap kecerdasan buatan (AI) terus berkembang dengan kecepatan tinggi, dan Model Bahasa Besar (LLM) menjadi semakin kuat dan mudah diakses. Meskipun banyak orang berinteraksi dengan model

28 April 2025

Di Mana Unduh Swagger UI Bahasa Indonesia Gratis?

Di Mana Unduh Swagger UI Bahasa Indonesia Gratis?

Ingin Swagger UI dalam Bahasa Indonesia? Artikel ini menjelaskan mengapa tidak ada unduhan resmi gratis dan cara mengaktifkan terjemahan. Jelajahi fitur Swagger dan lihat mengapa Apidog adalah alternatif Swagger superior untuk desain, pengujian, dan dokumentasi API yang terintegrasi.

23 April 2025

Mengembangkan API dengan Apidog

Apidog adalah alat pengembangan API yang membantu Anda mengembangkan API dengan lebih mudah dan efisien.