Saul  Alaniz

Saul Alaniz

1661794260

Crea Un Acortador De URL Con Cloudflare Workers

¿Alguna vez has usado herramientas como Bitly o TinyURL para acortar enlaces largos? ¿O te has preguntado cómo funcionan estos servicios? Tal vez quería crear un acortador de URL pero nunca encontró el tiempo o las herramientas adecuadas para hacerlo. En cualquier caso, si te interesa este tema, este artículo es perfecto para ti.

En esta publicación, demostraremos cómo crear un servicio básico de acortador de URL utilizando Cloudflare Workers . Brindaremos información detallada sobre cómo funcionan los servicios de reducción de URL, presentaremos varias características de Cloudflare Workers y daremos instrucciones paso a paso sobre cómo comenzar con Cloudflare Workers.

¡Empecemos!

¿Qué son los trabajadores de Cloudflare?

Cloudflare Workers es un servicio que le permite implementar código sin servidor en la red de Cloudflare. La red Cloudflare, o Edge, es una red de servidores web repartidos por todo el mundo. Una gran ventaja de Cloudflare Workers es que no tiene que preocuparse por escalar su código. Además, no tiene que preocuparse por las zonas horarias en las que vive su código; su código en Workers se distribuye por todo el mundo segundos después de su implementación.

Además de eso, Cloudflare Workers viene con un almacén de datos clave-valor simple, llamado KV. En este tutorial, usaremos una combinación de Cloudflare Workers y almacenamiento KV para acortar nuestra URL.

Descripción general del proyecto: servicio de acortador de URL

Comenzaremos creando un acortador de URL simple y no dinámico en el que codificará los sitios web a los que desea redirigir. Esto servirá como una introducción para aprender a usar Wrangler (la herramienta CLI oficial de Cloudflare) y demostrará conceptos básicos en el ámbito de los trabajadores.

A continuación, animaremos un poco las cosas y agregaremos soporte para URL dinámicas. Básicamente, interactuaremos con la tienda Cloudflare Workers KV e ingresaremos versiones cortas de la URL y la URL real a la que queremos redirigir. Los datos en la tienda KV serán similares a la siguiente estructura:

'short-url': 'https://my-cool-website.com'
'submit': 'https://my-cool-site.org/blog/ideas/submit'

Finalmente, implementaremos nuestro código en producción y lo veremos funcionar en vivo en todo el mundo.

¿Ya estás emocionado? ¡Genial, vamos a saltar!

Configuración del entorno

Para seguir este artículo, necesitará lo siguiente:

  • Node.js y npm
  • Vaquero
  • curl (o el navegador que elijas) para probar el acortador de URL

Uso la herramienta asdf para administrar mis dependencias locales, pero puede usar el administrador de versiones que prefiera. Al momento de escribir, aquí está mi versión de Node y npm:

$ node --version
v18.5.0
$ npm --version
8.12.1

Wrangler es una herramienta de línea de comandos para construir, y recientemente obtuvo su versión 2.0. A los efectos de esta publicación, Wrangler satisfará todas nuestras necesidades. En el futuro, podríamos usar Miniflare, un hermano más robusto y rico en funciones de Wrangler . Pero, por ahora, instalemos Wrangler globalmente a través de npm:

$ npm install -g wrangler@2.0.21

En el momento de escribir este artículo, la última versión de Wrangler es la 2.0.21, así que nos quedaremos con esa.

Enfriar. Ahora que tenemos todas las dependencias en su lugar, podemos usar la CLI de Wrangler para generar nuestro Cloudflare Worker de inicio.

Generando el proyecto

La herramienta Wrangler CLI resultará muy útil aquí.

Para comenzar, ejecutemos un comando para iniciar y configurar nuestro proyecto correctamente:

$ wrangler init short-it

Este comando le hará un par de preguntas. Por ahora, vamos a responder que sí (escribiendo y ) para todos ellos:

$ wrangler init short-it
  wrangler 2.0.21
--------------------
Using npm as package manager.
 Created short-it/wrangler.toml
Would you like to use git to manage this Worker? (y/n)
 Initialized git repository at short-it
No package.json found. Would you like to create one? (y/n)
 Created short-it/package.json
Would you like to use TypeScript? (y/n)
 Created short-it/tsconfig.json
Would you like to create a Worker at short-it/src/index.ts?
  None
❯ Fetch handler
  Scheduled handler
 Created short-it/src/index.ts

added 62 packages, and audited 63 packages in 1s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 Installed @cloudflare/workers-types and typescript into devDependencies

To start developing your Worker, run `cd short-it && npm start`
To publish your Worker to the Internet, run `npm run deploy`

Si respondiste afirmativamente a todas las preguntas de Wrangler, entonces tendrás un nombre de proyecto short-it, con lo siguiente adentro:

  • .gitdirectorio en su proyecto, lo que significa que está listo para enviarlo a su proveedor de Git
  • package.jsonexpediente
  • tsconfig.jsonarchivo con toda la configuración de TypeScript
  • src/index.tsarchivo con una lógica sencilla para obtener una respuesta de nuestro trabajador

Impresionante. ¡Veamos si esto funciona!

Entremos cden el short-itdirectorio e iniciemos Wrangler en modo de desarrollo local:

$ cd short-it
$ wrangler dev --local

Esto debería ejecutar nuestro Worker en http://localhost:8787/ . Si visitamos localhost, deberíamos ver un simple "¡Hola mundo!" mensaje:

Mensaje de hola mundo

El trabajador generado muestra un "¡Hola mundo!" mensaje.

¡Hurra! Lo hicimos funcionar. ¿Pero cómo? Miremos más de cerca.

¿Cómo funciona Cloudflare Workers?

Recibimos nuestro primer mensaje localmente del Worker generado, pero ¿cómo funcionó exactamente?

Repasemos el src/index.tsarchivo generado para obtener una mejor comprensión de lo que está sucediendo allí.

// src/index.ts

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
  // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
  // MY_KV_NAMESPACE: KVNamespace;
  //
  // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
  // MY_DURABLE_OBJECT: DurableObjectNamespace;
  //
  // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
  // MY_BUCKET: R2Bucket;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

El código anterior incluye una definición para nuestro entorno (la Envinterfaz) y un par de comentarios relacionados con la ENVinterfaz.

Dado que la interfaz está fuera del alcance de este artículo, ignoraremos esa parte del código y nos centraremos únicamente en la lógica principal:

// src/index.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

Lo que sucede aquí es que nuestras index.tsexportaciones fetchfuncionan. Esta es una interfaz similar a Web Workers . De hecho, es a partir de esta interfaz que se origina el nombre “Cloudflare Workers”. Cloudflare Workers es similar a Web Workers, excepto que se ejecuta en la infraestructura de Cloudflare en lugar de en un navegador.

En el código anterior, la fetchfunción devuelve un nuevo Responseobjeto con "¡Hola mundo!" texto. Entonces, cuando ejecutamos nuestro Worker, fetchse invoca esta función. Luego, la fetchfunción invocada devuelve el mensaje "¡Hola mundo!" respuesta, y esto es lo que recogemos en el navegador (o a través de cualquier herramienta utilizada para invocar al Trabajador).

Bien, hemos aclarado los conceptos básicos de Cloudflare Workers. Podemos seguir adelante con confianza. Si es nuevo en TypeScript, no se preocupe; usaremos sus características solo a la ligera. Imagínese esto como una incorporación ligera al mundo de TypeScript.

¡Genial, sigamos adelante!

Agregar una primera redirección

Comenzaremos a trabajar en nuestra lógica con un comienzo suave. Primero, nuestro acortador de URL redirigirá a un usuario a un sitio web diferente. Esta será la base para cambios posteriores.

Por ahora, haremos que el usuario vaya a una página en el sitio web https://http.cat/ cuando visite nuestro Worker local.

Si no está familiarizado con https://http.cat/ , es un sitio divertido que muestra varias imágenes de gatos para diferentes estados de HTTP. Por ejemplo, si un usuario realiza una solicitud a nuestro Worker a http://localhost:8787/404 , será dirigido a https://http.cat/404 .

Para lograr esta redirección, editaremos el src/index.ts, así:

// src/index.ts
// ...

const basePath = "https://http.cat";

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = basePath + pathname;

    if (pathname === "/") {
      return new Response("Hello World from our awesome Worker!");
    }

    return Response.redirect(redirectURL, 301);
  },
};

Ahora, si visitamos http://localhost:8787 , obtendremos un mensaje actualizado: "¡Hola, mundo, de parte de nuestro increíble trabajador!", como se muestra a continuación:

Hola mundo de Awesome Worker

Trabajador que muestra un mensaje actualizado de "Hola mundo".

Pero, si intentamos ir a http://localhost:8787/404 , seremos redirigidos a https://http.cat/404 .

Usuario redirigido

Se redirige al usuario a la web http.cat/404.

Genial, tenemos nuestro primer redireccionamiento en marcha. Ahora, hagamos que nuestro acortador de URL realmente acorte algunas URL.

Acortar la URL

Por ahora, agregaremos una pequeña estructura de datos para almacenar nuestras URL abreviadas. Podemos hacerlo así:

const shortURLs = {
  "/blog": "https://pragmaticpineapple.com/",
  "/twitter": "https://twitter.com/nikolalsvk",
  "/github": "https://github.com/nikolalsvk",
} as Record<any, string>;

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = shortURLs[pathname];

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

Aquí, agregamos un par de URL abreviadas:

Puedes cambiarlo a lo que quieras solo para verlo funcionar. Ahora, cuando visito http://localhost:8787/blog , se me redirige a una URL más larga donde se encuentra mi blog. Aquí está el resultado:

Redirecciones al blog

Visitar /blog redirige a la página real del blog.

Pero, si solicitamos alguna ruta, como http://localhost:8787/missing , obtenemos el siguiente mensaje de error: “No hay una URL definida para la ruta: '/missing', lo siento :(“.

Falta el mensaje de error

Visiting/missing muestra un mensaje de error.

Impresionante, ahora estamos listos para mover nuestras URL codificadas y sus versiones abreviadas a un lugar de almacenamiento. Afortunadamente, usamos Cloudflare Workers y ofrece un almacenamiento de clave-valor simple llamado KV.

Agregar almacenamiento

Antes de crear el KV para nuestro proyecto, primero debemos iniciar sesión en Cloudflare Workers a través de Wrangler. Esto es necesario porque Wrangler luego deberá comunicarse con Cloudflare para crear una instancia de KV para nosotros.

Iniciar sesión en Cloudflare

Para iniciar sesión en Cloudflare, use el siguiente comando:

$ wrangler login

Se abrirá un navegador que le pedirá que inicie sesión en Cloudflare. No te preocupes; el plan gratuito cubre todo lo que necesitaremos para este tutorial y no se le pedirá que pague. Continúe y regístrese, o inicie sesión si ya tiene una cuenta.

A continuación, Cloudflare le preguntará si desea otorgar autorización a Wrangler. Después de aceptar, debería ver la siguiente pantalla:

Herramienta CLI de Wrangler

La herramienta Wrangler CLI ahora está correctamente conectada.

No debería haber contratiempos durante el proceso de registro. Pero, si se quedó atascado en algún momento, puede seguir la guía de Cloudflare para crear una cuenta .

¡Impresionante! Ahora que está registrado e iniciado sesión, verifiquemos si todo está conectado correctamente.

Usa el siguiente comando:

$ wrangler whoami
  wrangler 2.0.21
--------------------
Getting User settings...
 You are logged in with an OAuth Token, associated with the email 'nikolaseap@gmail.com'!
┌──────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────┼──────────────────────────────────┤
│ Nikola Đuza Personal │ 98a16dfefca0e2ee27e1e79ba590d973 │
└──────────────────────┴──────────────────────────────────┘

Genial, estamos listos para crear un espacio de nombres KV.

Creación de un espacio de nombres KV

Se puede pensar en un espacio de nombres KV como una instancia de KV en la red de Cloudflare. Crearemos dos espacios de nombres KV: uno para producción donde vivirá y funcionará nuestra aplicación y otro para el entorno de vista previa. Usaremos el espacio de nombres de vista previa mientras probamos y desarrollamos nuestro acortador de URL.

Crearemos nuestros espacios de nombres KV a través de Wrangler con los siguientes comandos:

$ wrangler kv:namespace create SHORT_URLS
 Creating namespace with title "short-it-SHORT_URLS"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e" }

$ wrangler kv:namespace create SHORT_URLS --preview
  wrangler 2.0.21
--------------------
 Creating namespace with title "short-it-SHORT_URLS_preview"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", preview_id = "99a72876e5f84cf58de722b1c2080604" }

Después de que se ejecuten estos dos comandos y se creen ambos espacios de nombres, debemos decirle a Wrangler que use estos espacios de nombres cuando ejecutemos wrangler dev.

Agregaremos información sobre los espacios de nombres KV al wrangler.tomlarchivo en la raíz de nuestro proyecto. Debería verse algo como esto:

name = "short-it"
main = "src/index.ts"
compatibility_date = "2022-07-15"

kv_namespaces = [
  { binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", preview_id = "99a72876e5f84cf58de722b1c2080604" }
]

El wrangler.tomlarchivo es un archivo de configuración que dice wranglercierta información sobre nuestro proyecto. Ahora, estamos atados y listos para agregar algunos datos a nuestro KV.

Adición de datos al KV

Nuestro siguiente paso es sembrar los datos en el KV. Recuerde, tenemos dos espacios de nombres, por lo que tendremos que ejecutar dos comandos para tener los datos en ambos lugares. Agreguemos la /blogentrada al KV:

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 99a72876e5f84cf58de722b1c2080604.

Impresionante. Ahora tenemos una entrada en el KV. A continuación, agreguemos lógica que lea desde el KV y redireccione al usuario.

Lectura del KV

Eliminaremos rápidamente nuestras antiguas URL cortas codificadas y agregaremos una llamada al KV, así:

// src/index.ts
export interface Env {
  SHORT_URLS: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = await env.SHORT_URLS.get(pathname);

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

Aquí, agregamos SHORT_URLScomo un KVNamespacetipo. Esto nos permitirá llamar a los métodos KV para obtener los datos adecuados. En lugar del objeto codificado con URL, esta vez usamos await env.SHORT_URLS.get(pathname).

La llamada a env.SHORT_URLS.get(pathname)intenta obtener la clave del KV. Si devuelve una promesa, debemos await. Pero, si hay un valor para el dado pathname, entonces el usuario es redirigido a esa URL.

Ahora, cuando visitemos http://localhost:8787/blog , seremos redirigidos a la URL real del blog que pusimos en el KV. Se verá así:

Aún redirige el blog

Visitar /blog aún nos redirige a la página real del blog.

Pero, si ahora intentamos visitar cualquiera de las otras URL que codificamos, recibiremos un mensaje que dice que a esas URL les falta una redirección:

Redirección de URL faltante

Visitar /twitter da como resultado un mensaje que indica que a la URL le falta una redirección.

Agreguemos rápidamente la URL abreviada de Twitter al KV usando estos comandos:

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
 wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 99a72876e5f84cf58de722b1c2080604.

Ahora, cuando actualicemos http://localhost:8787/twitter , deberíamos ser redirigidos a la cuenta de Twitter.

Cargando Twitter

Twitter se carga después de que agregamos la URL abreviada al KV.

Impresionante, ahora tenemos dos URL cortas: /blogy /twitter. Intentemos implementar nuestro servicio y verlo en producción.

Implementación de trabajadores de Cloudflare

El paso de implementación de Cloudflare Workers es bastante sencillo. Utilizaremos wrangler publish, así:

$ wrangler publish
  wrangler 2.0.21
--------------------
Retrieving cached values for userId from node_modules/.cache/wrangler
Your worker has access to the following bindings:
- KV Namespaces:
  - SHORT_URLS: 029d374ebd984e19b0bb98e37ab1a95e
Total Upload: 0.45 KiB / gzip: 0.29 KiB
Worker ID: short-it
Worker ETag: f8395cab29edf297137631b803b14c32daaae982758c23e3019b700e2468c277
Uploaded short-it (2.14 sec)
Published short-it (6.33 sec)
  short-it.nikolalsvk.workers.dev

Ahora, los servicios están activos en https://short-it.nikolalsvk.workers.dev . ¡Hurra!

Si está siguiendo este tutorial, sus servicios deberían vivir en algún lugar a lo largo de la URL https://short-it.YOUR_SUBDOMAIN.workers.dev , según lo que haya seleccionado YOUR_SUBDOMAIN.

En este punto, nuestro script Worker se implementa en todo el mundo en la red Cloudflare Edge. Esto significa que amigos y extraños de todo el mundo pueden ser redirigidos increíblemente rápido a nuestra cuenta de Twitter si visitan https://short-it.nikolalsvk.workers.dev/twitter .

Terminando

Gracias por seguir el viaje de crear un servicio simple de acortador de URL con Cloudflare Workers. En este artículo, presentamos los conceptos de Worker dentro del contexto de Cloudflare. También demostramos cómo crear y administrar datos en el almacenamiento KV de Cloudflare.

Pudimos ejecutar todo esto sin problemas con Wrangler, que brinda una excelente experiencia de desarrollador. Pero, lo más importante, logramos crear, probar e implementar nuestro pequeño servicio que funciona rápido en todos los rincones del mundo.

Lograr esto en una tecnología o servicio similar puede requerir mucho dinero y esfuerzo. Sin embargo, Cloudflare admite un generoso nivel gratuito de 100 000 solicitudes por día. Por lo tanto, puede acortar muchas URL y tener muchas visitas antes de infringir un plan pago.

Todo el código de este artículo está disponible en el repositorio de GitHub (marcalo con una estrella, si te gusta). El servicio de acortador está disponible en https://short-it.nikolalsvk.workers.dev .

Si te gustó la publicación, considera compartirla con tus amigos y compañeros de trabajo.

Hasta la próxima, ¡salud!

Fuente: https://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

   #cloudflare #url 

What is GEEK

Buddha Community

Crea Un Acortador De URL Con Cloudflare Workers
Saul  Alaniz

Saul Alaniz

1661794260

Crea Un Acortador De URL Con Cloudflare Workers

¿Alguna vez has usado herramientas como Bitly o TinyURL para acortar enlaces largos? ¿O te has preguntado cómo funcionan estos servicios? Tal vez quería crear un acortador de URL pero nunca encontró el tiempo o las herramientas adecuadas para hacerlo. En cualquier caso, si te interesa este tema, este artículo es perfecto para ti.

En esta publicación, demostraremos cómo crear un servicio básico de acortador de URL utilizando Cloudflare Workers . Brindaremos información detallada sobre cómo funcionan los servicios de reducción de URL, presentaremos varias características de Cloudflare Workers y daremos instrucciones paso a paso sobre cómo comenzar con Cloudflare Workers.

¡Empecemos!

¿Qué son los trabajadores de Cloudflare?

Cloudflare Workers es un servicio que le permite implementar código sin servidor en la red de Cloudflare. La red Cloudflare, o Edge, es una red de servidores web repartidos por todo el mundo. Una gran ventaja de Cloudflare Workers es que no tiene que preocuparse por escalar su código. Además, no tiene que preocuparse por las zonas horarias en las que vive su código; su código en Workers se distribuye por todo el mundo segundos después de su implementación.

Además de eso, Cloudflare Workers viene con un almacén de datos clave-valor simple, llamado KV. En este tutorial, usaremos una combinación de Cloudflare Workers y almacenamiento KV para acortar nuestra URL.

Descripción general del proyecto: servicio de acortador de URL

Comenzaremos creando un acortador de URL simple y no dinámico en el que codificará los sitios web a los que desea redirigir. Esto servirá como una introducción para aprender a usar Wrangler (la herramienta CLI oficial de Cloudflare) y demostrará conceptos básicos en el ámbito de los trabajadores.

A continuación, animaremos un poco las cosas y agregaremos soporte para URL dinámicas. Básicamente, interactuaremos con la tienda Cloudflare Workers KV e ingresaremos versiones cortas de la URL y la URL real a la que queremos redirigir. Los datos en la tienda KV serán similares a la siguiente estructura:

'short-url': 'https://my-cool-website.com'
'submit': 'https://my-cool-site.org/blog/ideas/submit'

Finalmente, implementaremos nuestro código en producción y lo veremos funcionar en vivo en todo el mundo.

¿Ya estás emocionado? ¡Genial, vamos a saltar!

Configuración del entorno

Para seguir este artículo, necesitará lo siguiente:

  • Node.js y npm
  • Vaquero
  • curl (o el navegador que elijas) para probar el acortador de URL

Uso la herramienta asdf para administrar mis dependencias locales, pero puede usar el administrador de versiones que prefiera. Al momento de escribir, aquí está mi versión de Node y npm:

$ node --version
v18.5.0
$ npm --version
8.12.1

Wrangler es una herramienta de línea de comandos para construir, y recientemente obtuvo su versión 2.0. A los efectos de esta publicación, Wrangler satisfará todas nuestras necesidades. En el futuro, podríamos usar Miniflare, un hermano más robusto y rico en funciones de Wrangler . Pero, por ahora, instalemos Wrangler globalmente a través de npm:

$ npm install -g wrangler@2.0.21

En el momento de escribir este artículo, la última versión de Wrangler es la 2.0.21, así que nos quedaremos con esa.

Enfriar. Ahora que tenemos todas las dependencias en su lugar, podemos usar la CLI de Wrangler para generar nuestro Cloudflare Worker de inicio.

Generando el proyecto

La herramienta Wrangler CLI resultará muy útil aquí.

Para comenzar, ejecutemos un comando para iniciar y configurar nuestro proyecto correctamente:

$ wrangler init short-it

Este comando le hará un par de preguntas. Por ahora, vamos a responder que sí (escribiendo y ) para todos ellos:

$ wrangler init short-it
  wrangler 2.0.21
--------------------
Using npm as package manager.
 Created short-it/wrangler.toml
Would you like to use git to manage this Worker? (y/n)
 Initialized git repository at short-it
No package.json found. Would you like to create one? (y/n)
 Created short-it/package.json
Would you like to use TypeScript? (y/n)
 Created short-it/tsconfig.json
Would you like to create a Worker at short-it/src/index.ts?
  None
❯ Fetch handler
  Scheduled handler
 Created short-it/src/index.ts

added 62 packages, and audited 63 packages in 1s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 Installed @cloudflare/workers-types and typescript into devDependencies

To start developing your Worker, run `cd short-it && npm start`
To publish your Worker to the Internet, run `npm run deploy`

Si respondiste afirmativamente a todas las preguntas de Wrangler, entonces tendrás un nombre de proyecto short-it, con lo siguiente adentro:

  • .gitdirectorio en su proyecto, lo que significa que está listo para enviarlo a su proveedor de Git
  • package.jsonexpediente
  • tsconfig.jsonarchivo con toda la configuración de TypeScript
  • src/index.tsarchivo con una lógica sencilla para obtener una respuesta de nuestro trabajador

Impresionante. ¡Veamos si esto funciona!

Entremos cden el short-itdirectorio e iniciemos Wrangler en modo de desarrollo local:

$ cd short-it
$ wrangler dev --local

Esto debería ejecutar nuestro Worker en http://localhost:8787/ . Si visitamos localhost, deberíamos ver un simple "¡Hola mundo!" mensaje:

Mensaje de hola mundo

El trabajador generado muestra un "¡Hola mundo!" mensaje.

¡Hurra! Lo hicimos funcionar. ¿Pero cómo? Miremos más de cerca.

¿Cómo funciona Cloudflare Workers?

Recibimos nuestro primer mensaje localmente del Worker generado, pero ¿cómo funcionó exactamente?

Repasemos el src/index.tsarchivo generado para obtener una mejor comprensión de lo que está sucediendo allí.

// src/index.ts

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
  // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
  // MY_KV_NAMESPACE: KVNamespace;
  //
  // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
  // MY_DURABLE_OBJECT: DurableObjectNamespace;
  //
  // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
  // MY_BUCKET: R2Bucket;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

El código anterior incluye una definición para nuestro entorno (la Envinterfaz) y un par de comentarios relacionados con la ENVinterfaz.

Dado que la interfaz está fuera del alcance de este artículo, ignoraremos esa parte del código y nos centraremos únicamente en la lógica principal:

// src/index.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

Lo que sucede aquí es que nuestras index.tsexportaciones fetchfuncionan. Esta es una interfaz similar a Web Workers . De hecho, es a partir de esta interfaz que se origina el nombre “Cloudflare Workers”. Cloudflare Workers es similar a Web Workers, excepto que se ejecuta en la infraestructura de Cloudflare en lugar de en un navegador.

En el código anterior, la fetchfunción devuelve un nuevo Responseobjeto con "¡Hola mundo!" texto. Entonces, cuando ejecutamos nuestro Worker, fetchse invoca esta función. Luego, la fetchfunción invocada devuelve el mensaje "¡Hola mundo!" respuesta, y esto es lo que recogemos en el navegador (o a través de cualquier herramienta utilizada para invocar al Trabajador).

Bien, hemos aclarado los conceptos básicos de Cloudflare Workers. Podemos seguir adelante con confianza. Si es nuevo en TypeScript, no se preocupe; usaremos sus características solo a la ligera. Imagínese esto como una incorporación ligera al mundo de TypeScript.

¡Genial, sigamos adelante!

Agregar una primera redirección

Comenzaremos a trabajar en nuestra lógica con un comienzo suave. Primero, nuestro acortador de URL redirigirá a un usuario a un sitio web diferente. Esta será la base para cambios posteriores.

Por ahora, haremos que el usuario vaya a una página en el sitio web https://http.cat/ cuando visite nuestro Worker local.

Si no está familiarizado con https://http.cat/ , es un sitio divertido que muestra varias imágenes de gatos para diferentes estados de HTTP. Por ejemplo, si un usuario realiza una solicitud a nuestro Worker a http://localhost:8787/404 , será dirigido a https://http.cat/404 .

Para lograr esta redirección, editaremos el src/index.ts, así:

// src/index.ts
// ...

const basePath = "https://http.cat";

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = basePath + pathname;

    if (pathname === "/") {
      return new Response("Hello World from our awesome Worker!");
    }

    return Response.redirect(redirectURL, 301);
  },
};

Ahora, si visitamos http://localhost:8787 , obtendremos un mensaje actualizado: "¡Hola, mundo, de parte de nuestro increíble trabajador!", como se muestra a continuación:

Hola mundo de Awesome Worker

Trabajador que muestra un mensaje actualizado de "Hola mundo".

Pero, si intentamos ir a http://localhost:8787/404 , seremos redirigidos a https://http.cat/404 .

Usuario redirigido

Se redirige al usuario a la web http.cat/404.

Genial, tenemos nuestro primer redireccionamiento en marcha. Ahora, hagamos que nuestro acortador de URL realmente acorte algunas URL.

Acortar la URL

Por ahora, agregaremos una pequeña estructura de datos para almacenar nuestras URL abreviadas. Podemos hacerlo así:

const shortURLs = {
  "/blog": "https://pragmaticpineapple.com/",
  "/twitter": "https://twitter.com/nikolalsvk",
  "/github": "https://github.com/nikolalsvk",
} as Record<any, string>;

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = shortURLs[pathname];

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

Aquí, agregamos un par de URL abreviadas:

Puedes cambiarlo a lo que quieras solo para verlo funcionar. Ahora, cuando visito http://localhost:8787/blog , se me redirige a una URL más larga donde se encuentra mi blog. Aquí está el resultado:

Redirecciones al blog

Visitar /blog redirige a la página real del blog.

Pero, si solicitamos alguna ruta, como http://localhost:8787/missing , obtenemos el siguiente mensaje de error: “No hay una URL definida para la ruta: '/missing', lo siento :(“.

Falta el mensaje de error

Visiting/missing muestra un mensaje de error.

Impresionante, ahora estamos listos para mover nuestras URL codificadas y sus versiones abreviadas a un lugar de almacenamiento. Afortunadamente, usamos Cloudflare Workers y ofrece un almacenamiento de clave-valor simple llamado KV.

Agregar almacenamiento

Antes de crear el KV para nuestro proyecto, primero debemos iniciar sesión en Cloudflare Workers a través de Wrangler. Esto es necesario porque Wrangler luego deberá comunicarse con Cloudflare para crear una instancia de KV para nosotros.

Iniciar sesión en Cloudflare

Para iniciar sesión en Cloudflare, use el siguiente comando:

$ wrangler login

Se abrirá un navegador que le pedirá que inicie sesión en Cloudflare. No te preocupes; el plan gratuito cubre todo lo que necesitaremos para este tutorial y no se le pedirá que pague. Continúe y regístrese, o inicie sesión si ya tiene una cuenta.

A continuación, Cloudflare le preguntará si desea otorgar autorización a Wrangler. Después de aceptar, debería ver la siguiente pantalla:

Herramienta CLI de Wrangler

La herramienta Wrangler CLI ahora está correctamente conectada.

No debería haber contratiempos durante el proceso de registro. Pero, si se quedó atascado en algún momento, puede seguir la guía de Cloudflare para crear una cuenta .

¡Impresionante! Ahora que está registrado e iniciado sesión, verifiquemos si todo está conectado correctamente.

Usa el siguiente comando:

$ wrangler whoami
  wrangler 2.0.21
--------------------
Getting User settings...
 You are logged in with an OAuth Token, associated with the email 'nikolaseap@gmail.com'!
┌──────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────┼──────────────────────────────────┤
│ Nikola Đuza Personal │ 98a16dfefca0e2ee27e1e79ba590d973 │
└──────────────────────┴──────────────────────────────────┘

Genial, estamos listos para crear un espacio de nombres KV.

Creación de un espacio de nombres KV

Se puede pensar en un espacio de nombres KV como una instancia de KV en la red de Cloudflare. Crearemos dos espacios de nombres KV: uno para producción donde vivirá y funcionará nuestra aplicación y otro para el entorno de vista previa. Usaremos el espacio de nombres de vista previa mientras probamos y desarrollamos nuestro acortador de URL.

Crearemos nuestros espacios de nombres KV a través de Wrangler con los siguientes comandos:

$ wrangler kv:namespace create SHORT_URLS
 Creating namespace with title "short-it-SHORT_URLS"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e" }

$ wrangler kv:namespace create SHORT_URLS --preview
  wrangler 2.0.21
--------------------
 Creating namespace with title "short-it-SHORT_URLS_preview"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", preview_id = "99a72876e5f84cf58de722b1c2080604" }

Después de que se ejecuten estos dos comandos y se creen ambos espacios de nombres, debemos decirle a Wrangler que use estos espacios de nombres cuando ejecutemos wrangler dev.

Agregaremos información sobre los espacios de nombres KV al wrangler.tomlarchivo en la raíz de nuestro proyecto. Debería verse algo como esto:

name = "short-it"
main = "src/index.ts"
compatibility_date = "2022-07-15"

kv_namespaces = [
  { binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", preview_id = "99a72876e5f84cf58de722b1c2080604" }
]

El wrangler.tomlarchivo es un archivo de configuración que dice wranglercierta información sobre nuestro proyecto. Ahora, estamos atados y listos para agregar algunos datos a nuestro KV.

Adición de datos al KV

Nuestro siguiente paso es sembrar los datos en el KV. Recuerde, tenemos dos espacios de nombres, por lo que tendremos que ejecutar dos comandos para tener los datos en ambos lugares. Agreguemos la /blogentrada al KV:

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 99a72876e5f84cf58de722b1c2080604.

Impresionante. Ahora tenemos una entrada en el KV. A continuación, agreguemos lógica que lea desde el KV y redireccione al usuario.

Lectura del KV

Eliminaremos rápidamente nuestras antiguas URL cortas codificadas y agregaremos una llamada al KV, así:

// src/index.ts
export interface Env {
  SHORT_URLS: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = await env.SHORT_URLS.get(pathname);

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

Aquí, agregamos SHORT_URLScomo un KVNamespacetipo. Esto nos permitirá llamar a los métodos KV para obtener los datos adecuados. En lugar del objeto codificado con URL, esta vez usamos await env.SHORT_URLS.get(pathname).

La llamada a env.SHORT_URLS.get(pathname)intenta obtener la clave del KV. Si devuelve una promesa, debemos await. Pero, si hay un valor para el dado pathname, entonces el usuario es redirigido a esa URL.

Ahora, cuando visitemos http://localhost:8787/blog , seremos redirigidos a la URL real del blog que pusimos en el KV. Se verá así:

Aún redirige el blog

Visitar /blog aún nos redirige a la página real del blog.

Pero, si ahora intentamos visitar cualquiera de las otras URL que codificamos, recibiremos un mensaje que dice que a esas URL les falta una redirección:

Redirección de URL faltante

Visitar /twitter da como resultado un mensaje que indica que a la URL le falta una redirección.

Agreguemos rápidamente la URL abreviada de Twitter al KV usando estos comandos:

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
 wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 99a72876e5f84cf58de722b1c2080604.

Ahora, cuando actualicemos http://localhost:8787/twitter , deberíamos ser redirigidos a la cuenta de Twitter.

Cargando Twitter

Twitter se carga después de que agregamos la URL abreviada al KV.

Impresionante, ahora tenemos dos URL cortas: /blogy /twitter. Intentemos implementar nuestro servicio y verlo en producción.

Implementación de trabajadores de Cloudflare

El paso de implementación de Cloudflare Workers es bastante sencillo. Utilizaremos wrangler publish, así:

$ wrangler publish
  wrangler 2.0.21
--------------------
Retrieving cached values for userId from node_modules/.cache/wrangler
Your worker has access to the following bindings:
- KV Namespaces:
  - SHORT_URLS: 029d374ebd984e19b0bb98e37ab1a95e
Total Upload: 0.45 KiB / gzip: 0.29 KiB
Worker ID: short-it
Worker ETag: f8395cab29edf297137631b803b14c32daaae982758c23e3019b700e2468c277
Uploaded short-it (2.14 sec)
Published short-it (6.33 sec)
  short-it.nikolalsvk.workers.dev

Ahora, los servicios están activos en https://short-it.nikolalsvk.workers.dev . ¡Hurra!

Si está siguiendo este tutorial, sus servicios deberían vivir en algún lugar a lo largo de la URL https://short-it.YOUR_SUBDOMAIN.workers.dev , según lo que haya seleccionado YOUR_SUBDOMAIN.

En este punto, nuestro script Worker se implementa en todo el mundo en la red Cloudflare Edge. Esto significa que amigos y extraños de todo el mundo pueden ser redirigidos increíblemente rápido a nuestra cuenta de Twitter si visitan https://short-it.nikolalsvk.workers.dev/twitter .

Terminando

Gracias por seguir el viaje de crear un servicio simple de acortador de URL con Cloudflare Workers. En este artículo, presentamos los conceptos de Worker dentro del contexto de Cloudflare. También demostramos cómo crear y administrar datos en el almacenamiento KV de Cloudflare.

Pudimos ejecutar todo esto sin problemas con Wrangler, que brinda una excelente experiencia de desarrollador. Pero, lo más importante, logramos crear, probar e implementar nuestro pequeño servicio que funciona rápido en todos los rincones del mundo.

Lograr esto en una tecnología o servicio similar puede requerir mucho dinero y esfuerzo. Sin embargo, Cloudflare admite un generoso nivel gratuito de 100 000 solicitudes por día. Por lo tanto, puede acortar muchas URL y tener muchas visitas antes de infringir un plan pago.

Todo el código de este artículo está disponible en el repositorio de GitHub (marcalo con una estrella, si te gusta). El servicio de acortador está disponible en https://short-it.nikolalsvk.workers.dev .

Si te gustó la publicación, considera compartirla con tus amigos y compañeros de trabajo.

Hasta la próxima, ¡salud!

Fuente: https://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

   #cloudflare #url 

Rui  Silva

Rui Silva

1661799600

Crie Um Encurtador De URL Com Cloudflare Workers

Você já usou ferramentas como Bitly ou TinyURL para encurtar links longos? Ou você já se perguntou como esses serviços funcionam? Talvez você quisesse criar um encurtador de URL, mas nunca encontrou tempo ou as ferramentas adequadas para fazê-lo. De qualquer forma, se você está interessado neste tema, este artigo é perfeito para você.

Neste post, demonstraremos como construir um serviço básico de encurtador de URL usando Cloudflare Workers . Forneceremos informações detalhadas sobre como os serviços de encurtador de URL funcionam, apresentaremos vários recursos do Cloudflare Workers e forneceremos instruções passo a passo sobre como começar com o Cloudflare Workers.

Vamos começar!

O que são os Trabalhadores da Cloudflare?

O Cloudflare Workers é um serviço que permite implantar código sem servidor na rede Cloudflare. A rede Cloudflare, ou Edge, é uma rede de servidores web espalhados pelo mundo. Uma grande vantagem dos Cloudflare Workers é que você não precisa se preocupar em dimensionar seu código. Além disso, você não precisa se preocupar com os fusos horários em que seu código reside; seu código no Workers está espalhado pelo mundo segundos depois de implantado.

Além disso, os Cloudflare Workers vêm com um armazenamento de dados de chave-valor simples, chamado KV. Neste tutorial, usaremos uma combinação de Cloudflare Workers e armazenamento KV para criar nossa URL mais curta.

Visão geral do projeto: serviço de encurtador de URL

Começaremos criando um encurtador de URL simples e não dinâmico, onde você codifica os sites para os quais deseja redirecionar. Isso servirá como uma introdução para aprender a usar o Wrangler (ferramenta CLI oficial da Cloudflare) e demonstrará os conceitos básicos do domínio Workers.

Em seguida, vamos apimentar um pouco as coisas e adicionar suporte para URLs dinâmicos. Basicamente, vamos interagir com a loja Cloudflare Workers KV e inserir versões curtas da URL e a URL real para a qual queremos redirecionar. Os dados no armazenamento KV serão semelhantes à seguinte estrutura:

'short-url': 'https://my-cool-website.com'
'submit': 'https://my-cool-site.org/blog/ideas/submit'

Por fim, implantaremos nosso código em produção e o veremos funcionar ao vivo em todo o mundo.

Já está animado? Ótimo, vamos pular!

Configurando o ambiente

Para acompanhar este artigo, você precisará do seguinte:

  • Node.js e npm
  • Peão
  • curl (ou o navegador de sua escolha) para testar o encurtador de URL

Eu uso a ferramenta asdf para gerenciar minhas dependências locais, mas você pode usar qualquer gerenciador de versão que preferir. No momento em que escrevo, aqui está minha versão do Node e do npm:

$ node --version
v18.5.0
$ npm --version
8.12.1

Wrangler é uma ferramenta de linha de comando para construção e, recentemente, ganhou sua versão 2.0. Para os propósitos deste post, o Wrangler atenderá a todas as nossas necessidades. No futuro, podemos usar o Miniflare, um irmão mais robusto e rico em recursos do Wrangler . Mas, por enquanto, vamos instalar o Wrangler globalmente via npm:

$ npm install -g wrangler@2.0.21

No momento em que escrevo, a versão mais recente do Wrangler é 2.0.21, então vamos usar essa.

Legal. Agora que temos todas as dependências em vigor, podemos usar a CLI do Wrangler para gerar nosso Cloudflare Worker inicial.

Gerando o projeto

A ferramenta Wrangler CLI será muito útil aqui.

Para começar, vamos executar um comando para iniciar e configurar nosso projeto corretamente:

$ wrangler init short-it

Este comando fará algumas perguntas. Por enquanto, vamos responder sim (digitando y ) para todos eles:

$ wrangler init short-it
  wrangler 2.0.21
--------------------
Using npm as package manager.
 Created short-it/wrangler.toml
Would you like to use git to manage this Worker? (y/n)
 Initialized git repository at short-it
No package.json found. Would you like to create one? (y/n)
 Created short-it/package.json
Would you like to use TypeScript? (y/n)
 Created short-it/tsconfig.json
Would you like to create a Worker at short-it/src/index.ts?
  None
❯ Fetch handler
  Scheduled handler
 Created short-it/src/index.ts

added 62 packages, and audited 63 packages in 1s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 Installed @cloudflare/workers-types and typescript into devDependencies

To start developing your Worker, run `cd short-it && npm start`
To publish your Worker to the Internet, run `npm run deploy`

Se você respondeu positivamente a todas as perguntas do Wrangler, você terá um nome de projeto short-it, com o seguinte dentro:

  • .gitdiretório em seu projeto, o que significa que você está pronto para enviá-lo ao seu provedor Git
  • package.jsonArquivo
  • tsconfig.jsonarquivo com toda a configuração do TypeScript
  • src/index.tsarquivo com alguma lógica direta para obter uma resposta do nosso Worker

Incrível. Vamos ver se essa coisa funciona!

Vamos cdentrar no short-itdiretório e iniciar o Wrangler no modo de desenvolvimento local:

$ cd short-it
$ wrangler dev --local

Isso deve executar nosso Worker em http://localhost:8787/ . Se visitarmos o localhost, devemos ver um simples “Hello World!” mensagem:

Mensagem Olá Mundo

O trabalhador gerado está exibindo um "Hello World!" mensagem.

Yay! Nós fizemos isso funcionar. Mas como? Vamos olhar mais de perto.

Como funcionam os Cloudflare Workers?

Recebemos nossa primeira mensagem localmente do Worker gerado, mas como exatamente isso funcionou?

Vamos analisar o src/index.tsarquivo gerado para entender melhor o que está acontecendo lá.

// src/index.ts

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
  // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
  // MY_KV_NAMESPACE: KVNamespace;
  //
  // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
  // MY_DURABLE_OBJECT: DurableObjectNamespace;
  //
  // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
  // MY_BUCKET: R2Bucket;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

O código acima inclui uma definição para nosso ambiente (a Envinterface) e alguns comentários relacionados à ENVinterface.

Como a interface está fora do escopo deste artigo, vamos ignorar essa parte do código e focar apenas na lógica principal:

// src/index.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

O que acontece aqui é que nosso index.tsexport uma fetchfunção. Esta é uma interface semelhante ao Web Workers . Na verdade, é dessa interface que se origina o nome “Cloudflare Workers”. O Cloudflare Workers é semelhante ao Web Workers, exceto que é executado na infraestrutura da Cloudflare em vez de em um navegador.

No código acima, a fetchfunção retorna um novo Responseobjeto com a mensagem “Hello World!” texto. Então, quando executamos nosso Worker, essa fetchfunção é invocada. Em seguida, a função invocada fetchretorna o “Hello World!” resposta, e é isso que pegamos no navegador (ou por meio de qualquer ferramenta usada para invocar o Worker).

OK, esclarecemos o básico dos Trabalhadores da Cloudflare. Podemos seguir em frente com confiança. Se você é novo no TypeScript, não se preocupe; usaremos seus recursos apenas levemente. Imagine isso como uma integração leve ao mundo do TypeScript.

Ótimo, vamos em frente!

Adicionando um primeiro redirecionamento

Começaremos a trabalhar em nossa lógica com um início suave. Primeiro, faremos com que nosso encurtador de URL redirecione um usuário para um site diferente. Esta será a base para alterações posteriores.

Por enquanto, faremos com que o usuário acesse uma página no site https://http.cat/ quando visitar nosso Worker local.

Se você não estiver familiarizado com https://http.cat/ , é um site divertido que exibe várias imagens de gatos para diferentes status HTTP. Por exemplo, se um usuário fizer uma solicitação ao nosso Trabalhador para http://localhost:8787/404 , ele será direcionado para https://http.cat/404 .

Para conseguir esse redirecionamento, editaremos o src/index.ts, assim:

// src/index.ts
// ...

const basePath = "https://http.cat";

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = basePath + pathname;

    if (pathname === "/") {
      return new Response("Hello World from our awesome Worker!");
    }

    return Response.redirect(redirectURL, 301);
  },
};

Agora, se visitarmos http://localhost:8787 , receberemos uma mensagem atualizada: “Hello World from our awesome Worker!”, conforme mostrado abaixo:

Olá mundo do trabalhador incrível

Trabalhador exibindo uma mensagem “Hello world” atualizada.

Mas, se tentarmos ir para http://localhost:8787/404 , seremos redirecionados para https://http.cat/404 .

Usuário redirecionado

O usuário é redirecionado para o site http.cat/404.

Ótimo, iniciamos nosso primeiro redirecionamento. Agora, vamos fazer nosso encurtador de URL realmente encurtar alguns URLs.

Encurtando o URL

Por enquanto, adicionaremos uma pequena estrutura de dados para armazenar nossos URLs encurtados. Podemos fazer assim:

const shortURLs = {
  "/blog": "https://pragmaticpineapple.com/",
  "/twitter": "https://twitter.com/nikolalsvk",
  "/github": "https://github.com/nikolalsvk",
} as Record<any, string>;

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = shortURLs[pathname];

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

Aqui, adicionamos alguns URLs abreviados:

Você pode alterá-lo para o que quiser apenas para vê-lo funcionando. Agora, quando visito http://localhost:8787/blog , sou redirecionado para uma URL mais longa onde meu blog está localizado. Aqui está o resultado:

Redirecionamentos para o blog

Visitar /blog redireciona para a página real do blog.

Mas, se solicitarmos algum caminho, como http://localhost:8787/missing , recebemos a seguinte mensagem de erro: “Não há URL definida para o caminho: '/missing', desculpe :(“.

Mensagem de erro ausente

Visitar/ausente exibe uma mensagem de erro.

Incrível, agora estamos prontos para mover nossos URLs codificados e suas versões abreviadas para um armazenamento em algum lugar. Felizmente, estamos usando Cloudflare Workers e ele oferece um armazenamento simples de valor-chave chamado KV.

Adicionando armazenamento

Antes de realmente criarmos o KV para nosso projeto, primeiro precisamos fazer login no Cloudflare Workers via Wrangler. Isso é necessário porque o Wrangler posteriormente precisará entrar em contato com a Cloudflare para criar uma instância KV para nós.

Fazendo login na Cloudflare

Para fazer login na Cloudflare, use o seguinte comando:

$ wrangler login

Um navegador será aberto, solicitando que você faça login na Cloudflare. Não se preocupe; o plano gratuito cobre tudo o que precisamos para este tutorial, e você não precisará pagar. Vá em frente e registre-se ou faça login se você já tiver uma conta.

Em seguida, a Cloudflare perguntará se você deseja conceder autorização ao Wrangler. Após concordar, você deverá ver a seguinte tela:

Ferramenta CLI do Wrangler

A ferramenta Wrangler CLI agora está conectada corretamente.

Não deve haver nenhum soluço durante o processo de inscrição. Mas, se você ficar preso em algum ponto, você pode seguir o guia da Cloudflare sobre como criar uma conta .

Incrível! Agora que você está cadastrado e logado, vamos verificar se tudo está conectado corretamente.

Use o seguinte comando:

$ wrangler whoami
  wrangler 2.0.21
--------------------
Getting User settings...
 You are logged in with an OAuth Token, associated with the email 'nikolaseap@gmail.com'!
┌──────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────┼──────────────────────────────────┤
│ Nikola Đuza Personal │ 98a16dfefca0e2ee27e1e79ba590d973 │
└──────────────────────┴──────────────────────────────────┘

Ótimo, estamos prontos para criar um namespace KV.

Criando um namespace KV

Um namespace KV pode ser considerado como uma instância de KV na rede Cloudflare. Criaremos dois namespaces KV: um para produção onde nosso aplicativo ficará e funcionará e outro para o ambiente de visualização. Usaremos o namespace de visualização enquanto testamos e desenvolvemos nosso encurtador de URL.

Criaremos nossos namespaces KV via Wrangler com os seguintes comandos:

$ wrangler kv:namespace create SHORT_URLS
 Creating namespace with title "short-it-SHORT_URLS"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e" }

$ wrangler kv:namespace create SHORT_URLS --preview
  wrangler 2.0.21
--------------------
 Creating namespace with title "short-it-SHORT_URLS_preview"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", preview_id = "99a72876e5f84cf58de722b1c2080604" }

Depois que esses dois comandos são executados e ambos os namespaces são criados, precisamos dizer ao Wrangler para usar esses namespaces quando executarmos wrangler dev.

Adicionaremos informações sobre namespaces KV ao wrangler.tomlarquivo na raiz do nosso projeto. Deve ser algo assim:

name = "short-it"
main = "src/index.ts"
compatibility_date = "2022-07-15"

kv_namespaces = [
  { binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", preview_id = "99a72876e5f84cf58de722b1c2080604" }
]

O wrangler.tomlarquivo é um arquivo de configuração que informa wranglercertas informações sobre nosso projeto. Agora, estamos amarrados e prontos para adicionar alguns dados ao nosso KV.

Adicionando dados ao KV

Nosso próximo passo é semear os dados para o KV. Lembre-se, temos dois namespaces, então teremos que executar dois comandos para ter os dados em ambos os lugares. Vamos adicionar a /blogentrada ao KV:

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 99a72876e5f84cf58de722b1c2080604.

Incrível. Agora temos uma entrada no KV. Em seguida, vamos adicionar a lógica que lê a partir do KV e redireciona o usuário.

Leitura do KV

Removeremos rapidamente nossos URLs curtos codificados antigos e adicionaremos uma chamada ao KV, assim:

// src/index.ts
export interface Env {
  SHORT_URLS: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = await env.SHORT_URLS.get(pathname);

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

Aqui, adicionamos SHORT_URLScomo um KVNamespacetipo. Isso nos permitirá chamar métodos KV para obter os dados adequados. Em vez do objeto codificado com URLs, desta vez usamos await env.SHORT_URLS.get(pathname).

A chamada para env.SHORT_URLS.get(pathname)tenta obter a chave do KV. Se ele retornar uma promessa, devemos await. Mas, se houver um valor para determinado pathname, o usuário será redirecionado para esse URL.

Agora, quando visitarmos http://localhost:8787/blog , seremos redirecionados para a URL real do blog que colocamos no KV. Isso parecerá assim:

Ainda redireciona o blog

Visitar /blog ainda nos redireciona para a página real do blog.

Mas, se agora tentarmos visitar qualquer um dos outros URLs que codificamos, receberemos uma mensagem informando que esses URLs não têm um redirecionamento:

Redirecionamento de URL ausente

Visitar /twitter resulta em uma mensagem indicando que o URL não tem um redirecionamento.

Vamos adicionar rapidamente o URL encurtado do Twitter ao KV usando estes comandos:

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
 wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 99a72876e5f84cf58de722b1c2080604.

Agora, quando atualizarmos o http://localhost:8787/twitter , devemos ser redirecionados para a conta do Twitter.

Carregando Twitter

O Twitter carrega depois que adicionamos o URL encurtado ao KV.

Incrível, agora temos dois URLs curtos: /bloge /twitter. Vamos tentar implantar nosso serviço e vê-lo em produção.

Como implantar trabalhadores do Cloudflare

A etapa de implantação do Cloudflare Workers é bastante fácil. Vamos utilizar wrangler publish, assim:

$ wrangler publish
  wrangler 2.0.21
--------------------
Retrieving cached values for userId from node_modules/.cache/wrangler
Your worker has access to the following bindings:
- KV Namespaces:
  - SHORT_URLS: 029d374ebd984e19b0bb98e37ab1a95e
Total Upload: 0.45 KiB / gzip: 0.29 KiB
Worker ID: short-it
Worker ETag: f8395cab29edf297137631b803b14c32daaae982758c23e3019b700e2468c277
Uploaded short-it (2.14 sec)
Published short-it (6.33 sec)
  short-it.nikolalsvk.workers.dev

Agora, os serviços estão disponíveis em https://short-it.nikolalsvk.workers.dev . Yay!

Se você estiver seguindo este tutorial, seus serviços devem estar em algum lugar ao longo da URL https://short-it.YOUR_SUBDOMAIN.workers.dev , dependendo do que você selecionou para YOUR_SUBDOMAIN.

Neste ponto, nosso script Worker é implantado em todo o mundo na rede Cloudflare Edge. Isso significa que amigos e estranhos em todo o mundo podem ser redirecionados incrivelmente rápido para nossa conta do Twitter se visitarem https://short-it.nikolalsvk.workers.dev/twitter .

Empacotando

Obrigado por acompanhar a jornada de criação de um serviço simples de encurtador de URL usando Cloudflare Workers. Neste artigo, apresentamos os conceitos de um Worker dentro do contexto Cloudflare. Também demonstramos como criar e gerenciar dados no armazenamento KV da Cloudflare.

Conseguimos executar tudo isso sem problemas usando o Wrangler, que oferece uma ótima experiência ao desenvolvedor. Mas, o mais importante, conseguimos criar, testar e implantar nosso pequeno serviço que roda rápido em todos os cantos do mundo.

Conseguir isso em uma tecnologia ou serviço semelhante pode exigir muito dinheiro e esforço. No entanto, a Cloudflare oferece suporte a um generoso nível gratuito de 100.000 solicitações por dia. Assim, você pode encurtar muitos URLs e ter muitas visitas antes de entrar em um plano pago.

Todo o código deste artigo está disponível no repositório do GitHub (por favor, marque-o com uma estrela, se você gostar). O serviço de encurtador está disponível em https://short-it.nikolalsvk.workers.dev .

Se você gostou do post, considere compartilhá-lo com seus amigos e colegas de trabalho.

Até a próxima, abração!

Fonte: https://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

#cloudflare #url 

How to Get Current URL in Laravel

In this small post we will see how to get current url in laravel, if you want to get current page url in laravel then we can use many method such type current(), full(), request(), url().

Here i will give you all example to get current page url in laravel, in this example i have used helper and function as well as so let’s start example of how to get current url id in laravel.

Read More : How to Get Current URL in Laravel

https://websolutionstuff.com/post/how-to-get-current-url-in-laravel


Read More : Laravel Signature Pad Example

https://websolutionstuff.com/post/laravel-signature-pad-example

#how to get current url in laravel #laravel get current url #get current page url in laravel #find current url in laravel #get full url in laravel #how to get current url id in laravel

joe biden

1617257581

Software de restauración de Exchange para restaurar sin problemas PST en Exchange Server

¿Quiere restaurar los buzones de correo de PST a Exchange Server? Entonces, estás en la página correcta. Aquí, lo guiaremos sobre cómo puede restaurar fácilmente mensajes y otros elementos de PST a MS Exchange Server.

Muchas veces, los usuarios necesitan restaurar los elementos de datos de PST en Exchange Server, pero debido a la falta de disponibilidad de una solución confiable, los usuarios no pueden obtener la solución. Háganos saber primero sobre el archivo PST y MS Exchange Server.

Conozca PST y Exchange Server

PST es un formato de archivo utilizado por MS Outlook, un cliente de correo electrónico de Windows y muy popular entre los usuarios domésticos y comerciales.

Por otro lado, Exchange Server es un poderoso servidor de correo electrónico donde todos los datos se almacenan en un archivo EDB. Los usuarios generalmente guardan la copia de seguridad de los buzones de correo de Exchange en el archivo PST, pero muchas veces, los usuarios deben restaurar los datos del archivo PST en Exchange. Para resolver este problema, estamos aquí con una solución profesional que discutiremos en la siguiente sección de esta publicación.

Un método profesional para restaurar PST a Exchange Server

No le recomendamos que elija una solución al azar para restaurar los datos de PST en Exchange Server. Por lo tanto, al realizar varias investigaciones, estamos aquí con una solución inteligente y conveniente, es decir, Exchange Restore Software. Es demasiado fácil de manejar por todos los usuarios y restaurar cómodamente todos los datos del archivo PST a Exchange Server.

Funciones principales ofrecidas por Exchange Restore Software

El software es demasiado simple de usar y se puede instalar fácilmente en todas las versiones de Windows. Con unos pocos clics, la herramienta puede restaurar los elementos del buzón de Exchange.

No es necesario que MS Outlook restaure los datos PST en Exchange. Todos los correos electrónicos, contactos, notas, calendarios, etc. se restauran desde el archivo PST a Exchange Server.

Todas las versiones de Outlook son compatibles con la herramienta, como Outlook 2019, 2016, 2013, 2010, 2007, etc. La herramienta proporciona varios filtros mediante los cuales se pueden restaurar los datos deseados desde un archivo PST a Exchange Server. El programa se puede instalar en todas las versiones de Windows como Windows 10, 8.1, 8, 7, XP, Vista, etc.

Descargue la versión de demostración del software de restauración de Exchange y analice el funcionamiento del software restaurando los primeros 50 elementos por carpeta.

Líneas finales

No existe una solución manual para restaurar los buzones de correo de Exchange desde el archivo PST. Por lo tanto, hemos explicado una solución fácil e inteligente para restaurar datos de archivos PST en Exchange Server. Simplemente puede usar este software y restaurar todos los datos de PST a Exchange Server.

Más información:- https://www.datavare.com/software/exchange-restore.html

#intercambio de software de restauración #intercambio de restauración #buzón del servidor de intercambio #herramienta de restauración de intercambio

高橋  花子

高橋 花子

1661796000

Cloudflare Workers で URL 短縮サービスを作成する

BitlyTinyURLなどのツールを使用して長いリンクを短縮したことがありますか? または、これらのサービスがどのように機能するのか疑問に思ったことはありませんか? おそらく、URL 短縮サービスを構築したいと思っていましたが、それを行うための時間や適切なツールが見つかりませんでした。いずれにせよ、このトピックに興味がある場合は、この記事が最適です。

この投稿では、Cloudflare Workersを使用して基本的な URL 短縮サービスを構築する方法を紹介します。URL短縮サービスがどのように機能するかについての詳細な情報を提供し、Cloudflare Workersのいくつかの機能を紹介し、Cloudflare Workersを使い始める方法について順を追って説明します.

始めましょう!

Cloudflare ワーカーとは何ですか?

Cloudflare Workers は、サーバーレス コードを Cloudflare ネットワークにデプロイできるサービスです。Cloudflare ネットワークまたは Edge は、世界中に広がる Web サーバーのネットワークです。Cloudflare Workers の素晴らしい点の 1 つは、コードのスケーリングについて心配する必要がないことです。また、コードが存在するタイム ゾーンについて心配する必要はありません。Workers のコードは、デプロイされてから数秒後に世界中に広がります。

その上、Cloudflare ワーカーには、KV と呼ばれる単純なキーと値のデータ ストアが付属しています。このチュートリアルでは、Cloudflare ワーカーと KV ストレージを組み合わせて、URL を短くします。

事業概要:URL短縮サービス

まず、リダイレクト先の Web サイトをハードコーディングする、単純で非動的な URL 短縮サービスを作成します。これは、 Wrangler (Cloudflare の公式 CLI ツール) の使用方法を学習するための入門として機能し、Workers 領域の基本的な概念を示します。

次に、少しスパイスを加えて、動的 URL のサポートを追加します。基本的に、Cloudflare Workers KV ストアと対話し、短いバージョンの URL とリダイレクト先の実際の URL を入力します。KV ストアのデータは、次のような構造になります。

'short-url': 'https://my-cool-website.com'
'submit': 'https://my-cool-site.org/blog/ideas/submit'

最後に、コードを本番環境にデプロイし、世界中で実際に動作することを確認します。

あなたはすでに興奮していますか?よし、飛び込もう!

環境のセットアップ

この記事を進めるには、次のものが必要です。

  • Node.js と npm
  • ラングラー
  • URL 短縮サービスをテストするための curl (または選択したブラウザー)

私はasdf ツールを使用してローカルの依存関係を管理していますが、任意のバージョン マネージャーを使用できます。執筆時点では、これが私の Node と npm のバージョンです。

$ node --version
v18.5.0
$ npm --version
8.12.1

Wrangler はビルド用のコマンドライン ツールで、最近 2.0 バージョンがリリースされました。この投稿では、Wrangler がすべてのニーズを満たします。将来的には、より堅牢で機能豊富な Wrangler の兄弟である Miniflareを使用する可能性があります。しかし、ここでは、npm を介して Wrangler をグローバルにインストールしましょう。

$ npm install -g wrangler@2.0.21

執筆時点で最新の Wrangler バージョンは 2.0.21 であるため、それを使用します。

涼しい。すべての依存関係が整ったので、Wrangler CLI を使用してスターター Cloudflare Worker を生成できます。

プロジェクトの生成

ここでは、Wrangler CLI ツールが非常に役立ちます。

まず、コマンドを実行して、プロジェクトを適切に開始および設定しましょう。

$ wrangler init short-it

このコマンドは、いくつかの質問をします。ここでは、それらすべてに対して( yと入力して) yes と答えます。

$ wrangler init short-it
  wrangler 2.0.21
--------------------
Using npm as package manager.
 Created short-it/wrangler.toml
Would you like to use git to manage this Worker? (y/n)
 Initialized git repository at short-it
No package.json found. Would you like to create one? (y/n)
 Created short-it/package.json
Would you like to use TypeScript? (y/n)
 Created short-it/tsconfig.json
Would you like to create a Worker at short-it/src/index.ts?
  None
❯ Fetch handler
  Scheduled handler
 Created short-it/src/index.ts

added 62 packages, and audited 63 packages in 1s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 Installed @cloudflare/workers-types and typescript into devDependencies

To start developing your Worker, run `cd short-it && npm start`
To publish your Worker to the Internet, run `npm run deploy`

Wrangler からのすべての質問に肯定的に答えた場合はshort-it、次のようなプロジェクト名が表示されます。

  • .gitプロジェクトのディレクトリ。つまり、Git プロバイダーにプッシュする準備ができています。
  • package.jsonファイル
  • tsconfig.jsonすべての TypeScript 構成を含むファイル
  • src/index.tsワーカーから応答を取得するための簡単なロジックを含むファイル

素晴らしい。これが機能するかどうか見てみましょう!

cdディレクトリに入り、Wranglershort-itをローカル開発モードで起動します。

$ cd short-it
$ wrangler dev --local

これにより、ワーカーがhttp://localhost:8787/で実行されます。localhost にアクセスすると、単純な「Hello World!」が表示されるはずです。メッセージ:

ハローワールドメッセージ

生成されたワーカーは「Hello World!」を表示しています。メッセージ。

わーい!私たちはそれを機能させました。しかし、どのように?詳しく見てみましょう。

Cloudflare ワーカーはどのように機能しますか?

生成されたワーカーからローカルで最初のメッセージを取得しましたが、それはどのように機能したのでしょうか?

src/index.ts何が起こっているのかをよりよく理解するために、生成されたファイルを調べてみましょう。

// src/index.ts

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
  // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
  // MY_KV_NAMESPACE: KVNamespace;
  //
  // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
  // MY_DURABLE_OBJECT: DurableObjectNamespace;
  //
  // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
  // MY_BUCKET: R2Bucket;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

上記のコードには、環境 (Envインターフェース) の定義と、インターフェースに関連するいくつかのコメントが含まれていENVます。

インターフェイスはこの記事の範囲外であるため、コードのその部分は無視して、メイン ロジックのみに焦点を当てます。

// src/index.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

ここで何が起こるかというと、関数をindex.tsエクスポートするというfetchことです。これはWeb Workersに似たインターフェースです。実際、「Cloudflare Workers」という名前が由来するのは、このインターフェースからです。Cloudflare Workers は Web Workers と似ていますが、ブラウザーではなく Cloudflare インフラストラクチャで実行される点が異なります。

上記のコードでは、関数は「Hello World!」をfetch含む新しいオブジェクトを返します。Response文章。そのため、Worker を実行すると、このfetch関数が呼び出されます。次に、呼び出されたfetch関数は「Hello World!」を返します。これは、ブラウザーで (またはワーカーの呼び出しに使用される任意のツールを介して) 取得したものです。

OK、Cloudflare Workers の基本を片付けました。自信を持って進むことができます。TypeScript を初めて使用する場合でも、心配する必要はありません。その機能を軽く使用します。これを、TypeScript の世界への軽量のオンボーディングと想像してください。

よし、先に進もう!

最初のリダイレクトの追加

穏やかなスタートでロジックの作業を開始します。まず、URL 短縮サービスでユーザーを別の Web サイトにリダイレクトします。これは、後の変更の基礎となります。

ここでは、ユーザーがローカル ワーカーにアクセスしたときに、 https://http.cat/ Web サイトのページにアクセスするようにします。

https://http.cat/に慣れていない場合は、HTTP ステータスごとにさまざまな猫の写真が表示される楽しいサイトです。たとえば、ユーザーがワーカーにhttp://localhost:8787/404へのリクエストを行うと、リクエストはhttps://http.cat/404に転送されます。

このリダイレクトを実現するには、次のsrc/index.tsようにを編集します。

// src/index.ts
// ...

const basePath = "https://http.cat";

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = basePath + pathname;

    if (pathname === "/") {
      return new Response("Hello World from our awesome Worker!");
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここで、http://localhost:8787にアクセスすると、以下に示すように、「Hello World from our awesome Worker!」という更新されたメッセージが表示されます。

Hello World From Awesome Worker

更新された「Hello world」メッセージを表示するワーカー。

ただし、http://localhost:8787/404にアクセスしようとすると、 https://http.cat/404にリダイレクトされます。

ユーザーがリダイレクトされました

ユーザーは http.cat/404 Web サイトにリダイレクトされます。

よし、最初のリダイレクトを開始しました。では、URL 短縮機能で実際にいくつかの URL を短縮してみましょう。

URL の短縮

ここでは、短縮 URL を保存するための小さなデータ構造を追加します。次のように実行できます。

const shortURLs = {
  "/blog": "https://pragmaticpineapple.com/",
  "/twitter": "https://twitter.com/nikolalsvk",
  "/github": "https://github.com/nikolalsvk",
} as Record<any, string>;

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = shortURLs[pathname];

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここでは、いくつかの短縮 URL を追加しました。

動作を確認するために、好きなように変更できます。今、http://localhost:8787/blogにアクセスすると、ブログのある長い URL にリダイレクトされます。結果は次のとおりです。

ブログにリダイレクト

/blog にアクセスすると、実際のブログ ページにリダイレクトされます。

しかし、 http://localhost:8787/missingのようなパスを要求すると、次のエラー メッセージが表示されます。

エラーメッセージがありません

/missing にアクセスすると、エラー メッセージが表示されます。

これで、ハードコードされた URL とその短縮バージョンをどこかのストレージに移動する準備が整いました。幸いなことに、私たちは Cloudflare Workers を使用しており、KV と呼ばれるシンプルなキーと値のストレージを提供しています。

ストレージの追加

プロジェクトの KV を実際に作成する前に、Wrangler 経由で Cloudflare Workers にログインする必要があります。KV インスタンスを作成するために、後で Wrangler が Cloudflare に連絡する必要があるため、これが必要です。

Cloudflareへのログイン

Cloudflare にログインするには、次のコマンドを使用します。

$ wrangler login

ブラウザーが開き、Cloudflare へのログインを求められます。心配しないで; 無料プランには、このチュートリアルに必要なものがすべて含まれており、支払いを求められることはありません。先に進んで登録するか、すでにアカウントをお持ちの場合はログインしてください。

次に、Cloudflare は、Wrangler に承認を付与するかどうかを尋ねます。同意すると、次の画面が表示されます。

ラングラー CLI ツール

Wrangler CLI ツールが正しく接続されました。

サインアップ プロセス中に問題が発生することはありません。ただし、どこかで行き詰まった場合は、アカウントの作成に関する Cloudflare のガイドに従うことができます。

素晴らしい!サインアップしてログインしたので、すべてが正しく接続されているかどうかを確認しましょう。

次のコマンドを使用します。

$ wrangler whoami
  wrangler 2.0.21
--------------------
Getting User settings...
 You are logged in with an OAuth Token, associated with the email 'nikolaseap@gmail.com'!
┌──────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────┼──────────────────────────────────┤
│ Nikola Đuza Personal │ 98a16dfefca0e2ee27e1e79ba590d973 │
└──────────────────────┴──────────────────────────────────┘

これで、KV 名前空間を作成する準備が整いました。

KV 名前空間の作成

KV 名前空間は、Cloudflare ネットワーク上の KV のインスタンスと考えることができます。2 つの KV 名前空間を作成します。1 つはアプリが存在して動作する本番用で、もう 1 つはプレビュー環境用です。URL 短縮サービスをテストおよび開発する間は、プレビューの名前空間を使用します。

次のコマンドを使用して、Wrangler 経由で KV 名前空間を作成します。

$ wrangler kv:namespace create SHORT_URLS
 Creating namespace with title "short-it-SHORT_URLS"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e" }

$ wrangler kv:namespace create SHORT_URLS --preview
  wrangler 2.0.21
--------------------
 Creating namespace with title "short-it-SHORT_URLS_preview"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", preview_id = "99a72876e5f84cf58de722b1c2080604" }

これら 2 つのコマンドが実行され、両方の名前空間が作成されたら、実行時にこれらの名前空間を使用するように Wrangler に指示する必要がありますwrangler dev

wrangler.tomlプロジェクトのルートにあるファイルに KV 名前空間に関する情報を追加します。次のようになります。

name = "short-it"
main = "src/index.ts"
compatibility_date = "2022-07-15"

kv_namespaces = [
  { binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", preview_id = "99a72876e5f84cf58de722b1c2080604" }
]

このファイルは、プロジェクトに関する特定の情報wrangler.tomlを伝える構成ファイルです。wranglerこれで、KV にデータを追加する準備が整いました。

KV へのデータの追加

次のステップは、データを KV にシードすることです。2 つの名前空間があるため、2 つのコマンドを実行して両方の場所にデータを配置する必要があることを思い出してください。/blogKV にエントリを追加しましょう。

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 99a72876e5f84cf58de722b1c2080604.

素晴らしい。これで、KV に 1 つのエントリができました。次に、KV から読み取ってユーザーをリダイレクトするロジックを追加しましょう。

KV からの読み取り

古いハードコードされた短い URL をすばやく削除し、次のように KV への呼び出しを追加します。

// src/index.ts
export interface Env {
  SHORT_URLS: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = await env.SHORT_URLS.get(pathname);

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここではSHORT_URLS、タイプとして追加しKVNamespaceます。これにより、KV メソッドを呼び出して適切なデータを取得できます。URL でハードコーディングされたオブジェクトの代わりに、今回はawait env.SHORT_URLS.get(pathname).

への呼び出しenv.SHORT_URLS.get(pathname)は、KV からキーを取得しようとします。promise を返す場合は、 する必要がありawaitます。ただし、指定された の値がある場合pathname、ユーザーはその URL にリダイレクトされます。

ここで、http://localhost:8787/blogにアクセスすると、KV に入力した実際のブログ URL にリダイレクトされます。次のようになります。

それでもブログをリダイレクト

/blog にアクセスすると、実際のブログ ページにリダイレクトされます。

しかし、ハードコーディングした他の URL にアクセスしようとすると、それらの URL にリダイレクトがないというメッセージが表示されます。

URL のリダイレクトがありません

/twitter にアクセスすると、URL にリダイレクトがないことを示すメッセージが表示されます。

次のコマンドを使用して、Twitter の短縮 URL を KV にすばやく追加しましょう。

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
 wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 99a72876e5f84cf58de722b1c2080604.

ここで、http://localhost:8787/twitterを更新すると、Twitter アカウントにリダイレクトされるはずです。

読み込み中

短縮 URL を KV に追加すると、Twitter が読み込まれます。

/blogこれでとの 2 つの短い URL ができ/twitterました。サービスをデプロイして、本番環境で確認してみましょう。

Cloudflare ワーカーのデプロイ

Cloudflare Workers の展開手順はかなり簡単です。を次wrangler publishのように利用します。

$ wrangler publish
  wrangler 2.0.21
--------------------
Retrieving cached values for userId from node_modules/.cache/wrangler
Your worker has access to the following bindings:
- KV Namespaces:
  - SHORT_URLS: 029d374ebd984e19b0bb98e37ab1a95e
Total Upload: 0.45 KiB / gzip: 0.29 KiB
Worker ID: short-it
Worker ETag: f8395cab29edf297137631b803b14c32daaae982758c23e3019b700e2468c277
Uploaded short-it (2.14 sec)
Published short-it (6.33 sec)
  short-it.nikolalsvk.workers.dev

現在、サービスはhttps://short-it.nikolalsvk.workers.devで公開されています。わーい!

このチュートリアルに従っている場合、サービスは、選択した内容に応じて、URL https://short-it.YOUR_SUBDOMAIN.workers.devYOUR_SUBDOMAINのどこかに存在するはずです。

この時点で、Worker スクリプトは Cloudflare Edge ネットワーク上で世界中に展開されています。これは、世界中の友人や見知らぬ人がhttps://short-it.nikolalsvk.workers.dev/twitterにアクセスすると、非常に高速に Twitter アカウントにリダイレクトされることを意味します。

まとめ

Cloudflare Workers を使用してシンプルな URL 短縮サービスを作成する旅を続けてくれてありがとう。この記事では、Cloudflare コンテキスト内のワーカーの概念を紹介しました。また、Cloudflare の KV ストレージでデータを作成および管理する方法も示しました。

優れた開発者エクスペリエンスを提供する Wrangler を使用して、これらすべてをスムーズに実行することができました。しかし、最も重要なことは、世界の隅々で高速に動作する小さなサービスを作成、テスト、デプロイすることができたことです。

同様の技術やサービスでこれを実現するには、多額の費用と労力が必要になる場合があります。ただし、Cloudflare は、1 日あたり 100,000 リクエストの寛大な無料利用枠をサポートしています。したがって、有料プランに違反する前に、多くの URL を短縮し、それらに多くの訪問をすることができます.

この記事のすべてのコードは、GitHub リポジトリで入手できます(気に入った場合はスターを付けてください)。短縮サービスはhttps://short-it.nikolalsvk.workers.devで公開されています。

投稿が気に入ったら、友人や同僚と共有することを検討してください。

次回まで、乾杯!

ソース: https://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

BitlyTinyURLなどのツールを使用して長いリンクを短縮したことがありますか? または、これらのサービスがどのように機能するのか疑問に思ったことはありませんか? おそらく、URL 短縮サービスを構築したいと思っていましたが、それを行うための時間や適切なツールが見つかりませんでした。いずれにせよ、このトピックに興味がある場合は、この記事が最適です。

この投稿では、Cloudflare Workersを使用して基本的な URL 短縮サービスを構築する方法を紹介します。URL短縮サービスがどのように機能するかについての詳細な情報を提供し、Cloudflare Workersのいくつかの機能を紹介し、Cloudflare Workersを使い始める方法について順を追って説明します.

始めましょう!

Cloudflare ワーカーとは何ですか?

Cloudflare Workers は、サーバーレス コードを Cloudflare ネットワークにデプロイできるサービスです。Cloudflare ネットワークまたは Edge は、世界中に広がる Web サーバーのネットワークです。Cloudflare Workers の素晴らしい点の 1 つは、コードのスケーリングについて心配する必要がないことです。また、コードが存在するタイム ゾーンについて心配する必要はありません。Workers のコードは、デプロイされてから数秒後に世界中に広がります。

その上、Cloudflare ワーカーには、KV と呼ばれる単純なキーと値のデータ ストアが付属しています。このチュートリアルでは、Cloudflare ワーカーと KV ストレージを組み合わせて、URL を短くします。

事業概要:URL短縮サービス

まず、リダイレクト先の Web サイトをハードコーディングする、単純で非動的な URL 短縮サービスを作成します。これは、 Wrangler (Cloudflare の公式 CLI ツール) の使用方法を学習するための入門として機能し、Workers 領域の基本的な概念を示します。

次に、少しスパイスを加えて、動的 URL のサポートを追加します。基本的に、Cloudflare Workers KV ストアと対話し、短いバージョンの URL とリダイレクト先の実際の URL を入力します。KV ストアのデータは、次のような構造になります。

'short-url': 'https://my-cool-website.com'
'submit': 'https://my-cool-site.org/blog/ideas/submit'

最後に、コードを本番環境にデプロイし、世界中で実際に動作することを確認します。

あなたはすでに興奮していますか?よし、飛び込もう!

環境のセットアップ

この記事を進めるには、次のものが必要です。

  • Node.js と npm
  • ラングラー
  • URL 短縮サービスをテストするための curl (または選択したブラウザー)

私はasdf ツールを使用してローカルの依存関係を管理していますが、任意のバージョン マネージャーを使用できます。執筆時点では、これが私の Node と npm のバージョンです。

$ node --version
v18.5.0
$ npm --version
8.12.1

Wrangler はビルド用のコマンドライン ツールで、最近 2.0 バージョンがリリースされました。この投稿では、Wrangler がすべてのニーズを満たします。将来的には、より堅牢で機能豊富な Wrangler の兄弟である Miniflareを使用する可能性があります。しかし、ここでは、npm を介して Wrangler をグローバルにインストールしましょう。

$ npm install -g wrangler@2.0.21

執筆時点で最新の Wrangler バージョンは 2.0.21 であるため、それを使用します。

涼しい。すべての依存関係が整ったので、Wrangler CLI を使用してスターター Cloudflare Worker を生成できます。

プロジェクトの生成

ここでは、Wrangler CLI ツールが非常に役立ちます。

まず、コマンドを実行して、プロジェクトを適切に開始および設定しましょう。

$ wrangler init short-it

このコマンドは、いくつかの質問をします。ここでは、それらすべてに対して( yと入力して) yes と答えます。

$ wrangler init short-it
  wrangler 2.0.21
--------------------
Using npm as package manager.
 Created short-it/wrangler.toml
Would you like to use git to manage this Worker? (y/n)
 Initialized git repository at short-it
No package.json found. Would you like to create one? (y/n)
 Created short-it/package.json
Would you like to use TypeScript? (y/n)
 Created short-it/tsconfig.json
Would you like to create a Worker at short-it/src/index.ts?
  None
❯ Fetch handler
  Scheduled handler
 Created short-it/src/index.ts

added 62 packages, and audited 63 packages in 1s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 Installed @cloudflare/workers-types and typescript into devDependencies

To start developing your Worker, run `cd short-it && npm start`
To publish your Worker to the Internet, run `npm run deploy`

Wrangler からのすべての質問に肯定的に答えた場合はshort-it、次のようなプロジェクト名が表示されます。

  • .gitプロジェクトのディレクトリ。つまり、Git プロバイダーにプッシュする準備ができています。
  • package.jsonファイル
  • tsconfig.jsonすべての TypeScript 構成を含むファイル
  • src/index.tsワーカーから応答を取得するための簡単なロジックを含むファイル

素晴らしい。これが機能するかどうか見てみましょう!

cdディレクトリに入り、Wranglershort-itをローカル開発モードで起動します。

$ cd short-it
$ wrangler dev --local

これにより、ワーカーがhttp://localhost:8787/で実行されます。localhost にアクセスすると、単純な「Hello World!」が表示されるはずです。メッセージ:

ハローワールドメッセージ

生成されたワーカーは「Hello World!」を表示しています。メッセージ。

わーい!私たちはそれを機能させました。しかし、どのように?詳しく見てみましょう。

Cloudflare ワーカーはどのように機能しますか?

生成されたワーカーからローカルで最初のメッセージを取得しましたが、それはどのように機能したのでしょうか?

src/index.ts何が起こっているのかをよりよく理解するために、生成されたファイルを調べてみましょう。

// src/index.ts

/**
 * Welcome to Cloudflare Workers! This is your first worker.
 *
 * - Run `wrangler dev src/index.ts` in your terminal to start a development server
 * - Open a browser tab at http://localhost:8787/ to see your worker in action
 * - Run `wrangler publish src/index.ts --name my-worker` to publish your worker
 *
 * Learn more at https://developers.cloudflare.com/workers/
 */

export interface Env {
  // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/
  // MY_KV_NAMESPACE: KVNamespace;
  //
  // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
  // MY_DURABLE_OBJECT: DurableObjectNamespace;
  //
  // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
  // MY_BUCKET: R2Bucket;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

上記のコードには、環境 (Envインターフェース) の定義と、インターフェースに関連するいくつかのコメントが含まれていENVます。

インターフェイスはこの記事の範囲外であるため、コードのその部分は無視して、メイン ロジックのみに焦点を当てます。

// src/index.ts

export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    return new Response("Hello World!");
  },
};

ここで何が起こるかというと、関数をindex.tsエクスポートするというfetchことです。これはWeb Workersに似たインターフェースです。実際、「Cloudflare Workers」という名前が由来するのは、このインターフェースからです。Cloudflare Workers は Web Workers と似ていますが、ブラウザーではなく Cloudflare インフラストラクチャで実行される点が異なります。

上記のコードでは、関数は「Hello World!」をfetch含む新しいオブジェクトを返します。Response文章。そのため、Worker を実行すると、このfetch関数が呼び出されます。次に、呼び出されたfetch関数は「Hello World!」を返します。これは、ブラウザーで (またはワーカーの呼び出しに使用される任意のツールを介して) 取得したものです。

OK、Cloudflare Workers の基本を片付けました。自信を持って進むことができます。TypeScript を初めて使用する場合でも、心配する必要はありません。その機能を軽く使用します。これを、TypeScript の世界への軽量のオンボーディングと想像してください。

よし、先に進もう!

最初のリダイレクトの追加

穏やかなスタートでロジックの作業を開始します。まず、URL 短縮サービスでユーザーを別の Web サイトにリダイレクトします。これは、後の変更の基礎となります。

ここでは、ユーザーがローカル ワーカーにアクセスしたときに、 https://http.cat/ Web サイトのページにアクセスするようにします。

https://http.cat/に慣れていない場合は、HTTP ステータスごとにさまざまな猫の写真が表示される楽しいサイトです。たとえば、ユーザーがワーカーにhttp://localhost:8787/404へのリクエストを行うと、リクエストはhttps://http.cat/404に転送されます。

このリダイレクトを実現するには、次のsrc/index.tsようにを編集します。

// src/index.ts
// ...

const basePath = "https://http.cat";

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = basePath + pathname;

    if (pathname === "/") {
      return new Response("Hello World from our awesome Worker!");
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここで、http://localhost:8787にアクセスすると、以下に示すように、「Hello World from our awesome Worker!」という更新されたメッセージが表示されます。

Hello World From Awesome Worker

更新された「Hello world」メッセージを表示するワーカー。

ただし、http://localhost:8787/404にアクセスしようとすると、 https://http.cat/404にリダイレクトされます。

ユーザーがリダイレクトされました

ユーザーは http.cat/404 Web サイトにリダイレクトされます。

よし、最初のリダイレクトを開始しました。では、URL 短縮機能で実際にいくつかの URL を短縮してみましょう。

URL の短縮

ここでは、短縮 URL を保存するための小さなデータ構造を追加します。次のように実行できます。

const shortURLs = {
  "/blog": "https://pragmaticpineapple.com/",
  "/twitter": "https://twitter.com/nikolalsvk",
  "/github": "https://github.com/nikolalsvk",
} as Record<any, string>;

export default {
  async fetch(
    request: Request,
    _env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = shortURLs[pathname];

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここでは、いくつかの短縮 URL を追加しました。

動作を確認するために、好きなように変更できます。今、http://localhost:8787/blogにアクセスすると、ブログのある長い URL にリダイレクトされます。結果は次のとおりです。

ブログにリダイレクト

/blog にアクセスすると、実際のブログ ページにリダイレクトされます。

しかし、 http://localhost:8787/missingのようなパスを要求すると、次のエラー メッセージが表示されます。

エラーメッセージがありません

/missing にアクセスすると、エラー メッセージが表示されます。

これで、ハードコードされた URL とその短縮バージョンをどこかのストレージに移動する準備が整いました。幸いなことに、私たちは Cloudflare Workers を使用しており、KV と呼ばれるシンプルなキーと値のストレージを提供しています。

ストレージの追加

プロジェクトの KV を実際に作成する前に、Wrangler 経由で Cloudflare Workers にログインする必要があります。KV インスタンスを作成するために、後で Wrangler が Cloudflare に連絡する必要があるため、これが必要です。

Cloudflareへのログイン

Cloudflare にログインするには、次のコマンドを使用します。

$ wrangler login

ブラウザーが開き、Cloudflare へのログインを求められます。心配しないで; 無料プランには、このチュートリアルに必要なものがすべて含まれており、支払いを求められることはありません。先に進んで登録するか、すでにアカウントをお持ちの場合はログインしてください。

次に、Cloudflare は、Wrangler に承認を付与するかどうかを尋ねます。同意すると、次の画面が表示されます。

ラングラー CLI ツール

Wrangler CLI ツールが正しく接続されました。

サインアップ プロセス中に問題が発生することはありません。ただし、どこかで行き詰まった場合は、アカウントの作成に関する Cloudflare のガイドに従うことができます。

素晴らしい!サインアップしてログインしたので、すべてが正しく接続されているかどうかを確認しましょう。

次のコマンドを使用します。

$ wrangler whoami
  wrangler 2.0.21
--------------------
Getting User settings...
 You are logged in with an OAuth Token, associated with the email 'nikolaseap@gmail.com'!
┌──────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├──────────────────────┼──────────────────────────────────┤
│ Nikola Đuza Personal │ 98a16dfefca0e2ee27e1e79ba590d973 │
└──────────────────────┴──────────────────────────────────┘

これで、KV 名前空間を作成する準備が整いました。

KV 名前空間の作成

KV 名前空間は、Cloudflare ネットワーク上の KV のインスタンスと考えることができます。2 つの KV 名前空間を作成します。1 つはアプリが存在して動作する本番用で、もう 1 つはプレビュー環境用です。URL 短縮サービスをテストおよび開発する間は、プレビューの名前空間を使用します。

次のコマンドを使用して、Wrangler 経由で KV 名前空間を作成します。

$ wrangler kv:namespace create SHORT_URLS
 Creating namespace with title "short-it-SHORT_URLS"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e" }

$ wrangler kv:namespace create SHORT_URLS --preview
  wrangler 2.0.21
--------------------
 Creating namespace with title "short-it-SHORT_URLS_preview"
 Success!
Add the following to your configuration file in your kv_namespaces array:
{ binding = "SHORT_URLS", preview_id = "99a72876e5f84cf58de722b1c2080604" }

これら 2 つのコマンドが実行され、両方の名前空間が作成されたら、実行時にこれらの名前空間を使用するように Wrangler に指示する必要がありますwrangler dev

wrangler.tomlプロジェクトのルートにあるファイルに KV 名前空間に関する情報を追加します。次のようになります。

name = "short-it"
main = "src/index.ts"
compatibility_date = "2022-07-15"

kv_namespaces = [
  { binding = "SHORT_URLS", id = "029d374ebd984e19b0bb98e37ab1a95e", preview_id = "99a72876e5f84cf58de722b1c2080604" }
]

このファイルは、プロジェクトに関する特定の情報wrangler.tomlを伝える構成ファイルです。wranglerこれで、KV にデータを追加する準備が整いました。

KV へのデータの追加

次のステップは、データを KV にシードすることです。2 つの名前空間があるため、2 つのコマンドを実行して両方の場所にデータを配置する必要があることを思い出してください。/blogKV にエントリを追加しましょう。

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview false
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/blog" "https://pragmaticpineapple.com/" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://pragmaticpineapple.com/" to key "/blog" on namespace 99a72876e5f84cf58de722b1c2080604.

素晴らしい。これで、KV に 1 つのエントリができました。次に、KV から読み取ってユーザーをリダイレクトするロジックを追加しましょう。

KV からの読み取り

古いハードコードされた短い URL をすばやく削除し、次のように KV への呼び出しを追加します。

// src/index.ts
export interface Env {
  SHORT_URLS: KVNamespace;
}

export default {
  async fetch(
    request: Request,
    env: Env,
    _ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    const { pathname } = url;

    const redirectURL = await env.SHORT_URLS.get(pathname);

    if (!redirectURL) {
      return new Response(
        `There is no defined URL for the path: '${pathname}', sorry :(`
      );
    }

    return Response.redirect(redirectURL, 301);
  },
};

ここではSHORT_URLS、タイプとして追加しKVNamespaceます。これにより、KV メソッドを呼び出して適切なデータを取得できます。URL でハードコーディングされたオブジェクトの代わりに、今回はawait env.SHORT_URLS.get(pathname).

への呼び出しenv.SHORT_URLS.get(pathname)は、KV からキーを取得しようとします。promise を返す場合は、 する必要がありawaitます。ただし、指定された の値がある場合pathname、ユーザーはその URL にリダイレクトされます。

ここで、http://localhost:8787/blogにアクセスすると、KV に入力した実際のブログ URL にリダイレクトされます。次のようになります。

それでもブログをリダイレクト

/blog にアクセスすると、実際のブログ ページにリダイレクトされます。

しかし、ハードコーディングした他の URL にアクセスしようとすると、それらの URL にリダイレクトがないというメッセージが表示されます。

URL のリダイレクトがありません

/twitter にアクセスすると、URL にリダイレクトがないことを示すメッセージが表示されます。

次のコマンドを使用して、Twitter の短縮 URL を KV にすばやく追加しましょう。

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview false
 wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 029d374ebd984e19b0bb98e37ab1a95e.

$ wrangler kv:key put --binding SHORT_URLS "/twitter" "https://twitter.com/nikolalsvk" --preview
  wrangler 2.0.21
--------------------
Writing the value "https://twitter.com/nikolalsvk" to key "/twitter" on namespace 99a72876e5f84cf58de722b1c2080604.

ここで、http://localhost:8787/twitterを更新すると、Twitter アカウントにリダイレクトされるはずです。

読み込み中

短縮 URL を KV に追加すると、Twitter が読み込まれます。

/blogこれでとの 2 つの短い URL ができ/twitterました。サービスをデプロイして、本番環境で確認してみましょう。

Cloudflare ワーカーのデプロイ

Cloudflare Workers の展開手順はかなり簡単です。を次wrangler publishのように利用します。

$ wrangler publish
  wrangler 2.0.21
--------------------
Retrieving cached values for userId from node_modules/.cache/wrangler
Your worker has access to the following bindings:
- KV Namespaces:
  - SHORT_URLS: 029d374ebd984e19b0bb98e37ab1a95e
Total Upload: 0.45 KiB / gzip: 0.29 KiB
Worker ID: short-it
Worker ETag: f8395cab29edf297137631b803b14c32daaae982758c23e3019b700e2468c277
Uploaded short-it (2.14 sec)
Published short-it (6.33 sec)
  short-it.nikolalsvk.workers.dev

現在、サービスはhttps://short-it.nikolalsvk.workers.devで公開されています。わーい!

このチュートリアルに従っている場合、サービスは、選択した内容に応じて、URL https://short-it.YOUR_SUBDOMAIN.workers.devYOUR_SUBDOMAINのどこかに存在するはずです。

この時点で、Worker スクリプトは Cloudflare Edge ネットワーク上で世界中に展開されています。これは、世界中の友人や見知らぬ人がhttps://short-it.nikolalsvk.workers.dev/twitterにアクセスすると、非常に高速に Twitter アカウントにリダイレクトされることを意味します。

まとめ

Cloudflare Workers を使用してシンプルな URL 短縮サービスを作成する旅を続けてくれてありがとう。この記事では、Cloudflare コンテキスト内のワーカーの概念を紹介しました。また、Cloudflare の KV ストレージでデータを作成および管理する方法も示しました。

優れた開発者エクスペリエンスを提供する Wrangler を使用して、これらすべてをスムーズに実行することができました。しかし、最も重要なことは、世界の隅々で高速に動作する小さなサービスを作成、テスト、デプロイすることができたことです。

同様の技術やサービスでこれを実現するには、多額の費用と労力が必要になる場合があります。ただし、Cloudflare は、1 日あたり 100,000 リクエストの寛大な無料利用枠をサポートしています。したがって、有料プランに違反する前に、多くの URL を短縮し、それらに多くの訪問をすることができます.

この記事のすべてのコードは、GitHub リポジトリで入手できます(気に入った場合はスターを付けてください)。短縮サービスはhttps://short-it.nikolalsvk.workers.devで公開されています。

投稿が気に入ったら、友人や同僚と共有することを検討してください。

次回まで、乾杯!

ソース: https://blog.logrocket.com/creating-url-shortener-cloudflare-workers/

  #cloudflare #url