Com es crea un reductor d’URL sense servidor amb AWS Lambda i S3

Utilitzeu gràfics de SAP Scenes Pack

En aquesta publicació, crearem un reductor d’URL sense servidor mitjançant Amazon Web Services (AWS) Lambda i S3. Tot i que no necessiteu cap coneixement previ d’AWS, suposo que esteu familiaritzat amb ES6 JavaScript i Node.j.

Irònicament, els URL generats pel nostre reductor d’URL sovint són més llargs que els URL als quals es redirigeix. Això es deu al fet que estem utilitzant l'adreça del lloc web predeterminada S3. Cap al final de la publicació, examinaré com podeu afegir un domini personalitzat per evitar aquesta limitació.

Veure la demostració

Consulteu el codi a Github

Començar a utilitzar AWS és relativament fàcil, però es percep certa complexitat. El nombre de serveis disponibles pot ser descoratjador, ja que molts d’ells es superposen en la funcionalitat. La consola d’administració d’AWS, lenta i poc intuïtiva, no ajuda, i tampoc la documentació en línia de text intensiu. Tanmateix, en aquest missatge vull demostrar que la millor manera d’adoptar serveis AWS és utilitzar un enfocament incremental i que al principi només podeu utilitzar un grapat de serveis.

Utilitzem el Framework sense servidor per interactuar amb AWS, de manera que no cal que inicieu la sessió a la consola d’administració d’AWS. El marc sense servidor ofereix una abstracció mitjançant AWS i ajuda a proporcionar estructures de projecte i estàndards de configuració útils. Si voleu obtenir més informació abans de començar, no oblideu llegir els documents relacionats.

Arquitectura

Abans d’iniciar el desenvolupament, primer fem una ullada als serveis d’AWS que fem servir per crear el nostre reductor d’URL.

Utilitzem el servei d’emmagatzematge de fitxers Amazon S3 per allotjar el nostre lloc web. Configurarem el nostre dipòsit S3, que es pot considerar com una carpeta de nivell superior, per publicar un lloc web estàtic. El lloc web consta de contingut estàtic i scripts del costat del client. No hi ha manera d’executar codi del servidor (per exemple, PHP, Ruby o Java), però està bé en el nostre cas d’ús.

També farem servir una característica poc coneguda de S3 que us permetrà configurar la redirecció per a objectes als dipòsits S3 simplement afegint un valor d’ubicació de redirecció de lloc web a les metadades de l’objecte. Si ho configureu com a URL, es redirigiran els navegadors mitjançant una resposta HTTP 301 i la capçalera de la ubicació.

L'URL d'un objecte S3 es compon de l'adreça del dipòsit S3 i el nom de l'objecte.

http: // [nom del dipòsit] .s3-website-EU-West-1.amazonaws.com / [nom de l'objecte]

L'exemple següent mostra el format d'un objecte de dipòsit S3 per a la regió eu-west-1.

http://serverless-url-shortener.s3-website-eu-west-1.amazonaws.com/6GpLcdl

Aquest nom d'objecte "6GpLcdl" al final de l'URL de l'exemple anterior es converteix en el codi abreujat dels nostres URL escurçats. Amb aquesta característica obtenim la redirecció d’URL nativa i les capacitats d’emmagatzematge. No necessitem una base de dades per emmagatzemar els detalls de quins URL de marcatge ràpid, ja que la informació s’emmagatzema amb l’objecte mateix.

Crearem una funció Lambda per emmagatzemar aquests objectes S3 amb les metadades corresponents al nostre dipòsit S3.

Com a alternativa, podeu utilitzar la pàgina del client AWS SDK al navegador per desar els objectes. No obstant això, és millor extreure aquesta funcionalitat en un servei diferent. Té l’avantatge d’eliminar la necessitat de preocupar-se per la visualització de les credencials de seguretat i és més extensible en el futur. Mapem la funció Lambda a un punt final de la passarel·la API perquè s’hi pugui accedir mitjançant una trucada API.

Prepara’t

Visiteu els documents Serverless Framework i llegiu la seva guia d'inici ràpid. Com a part del procés d’instal·lació, heu d’instal·lar l’AWS CLI i configurar les vostres credencials d’AWS.

Primer, creeu un fitxer package.json al directori arrel del projecte.

{"name": "shortless-url-serverless", "scripts": {}, "dependencies": {}}

Sabem que hem d’utilitzar l’SDK d’AWS. Ara instal·leu-lo des de NPM escrivint l'ordre següent.

npm install aws-sdk --save

Ara també creeu un fitxer config.json a l'arrel del projecte. D’aquesta manera desem opcions d’usuari personalitzables en format JSON.

Afegiu les claus següents amb valors que coincideixin amb la vostra configuració.

  • BUCKET: el nom que voleu utilitzar per al vostre compartiment S3. Això passa a formar part de l'URL curt si no afegiu un domini personalitzat. Ha de ser exclusiu de la regió que proporcioneu perquè no trieu massa genèricament. Però no us preocupeu, si el nom del dipòsit que trieu ja s’utilitza, se us avisarà quan es desplegui mitjançant la CLI sense servidor.
  • REGION: la regió AWS on voleu desplegar-vos. Per motius de rendiment, és millor triar la regió més propera als vostres usuaris. Si seguiu el tutorial, faré servir eu-west-1.
  • ETAPA: escenari on es desplegarà. Normalment, teniu un entorn de prova que replica la mateixa configuració que el vostre entorn de producció. D'aquesta manera, podeu provar versions de programari de manera no destructiva. Com que es tracta d’un tutorial, el proporcionaré a la fase de desenvolupament.

El fitxer config.json hauria de tenir un aspecte semblant a això quan estigui complet.

{"BUCKET": "nom del vostre bucket", "REGION": "eu-west-1", "STAGE": "dev",}

A continuació, creeu un altre fitxer a l'arrel del projecte, serverless.yml. Això contindrà la nostra configuració de Serverless Framework formatada en el llenguatge de marques YAML.

En aquest fitxer primer definim el nostre entorn. Fixeu-vos en com podem referir-nos a variables desades prèviament a config.json.

service: serverless-url-shortener Proveïdor: Nom: aws Temps d'execució: nodejs6.10 stage: $ {file (config.json): STAGE} region: $ {file (config.json): REGION} iamRoleStatements: - Efecte: Permet l'acció : - s3: recurs PutObject: "arn: aws: s3 ::: $ {file (config.json): BUCKET} / *"

La secció iamRoleStatements es relaciona amb la Gestió d’identitats i accessos, que s’utilitza per configurar els permisos Lambda. Aquí donem accés a l'escriptura Lambda al nostre dipòsit S3.

Per desar objectes necessitem l'autorització per executar l'acció s3: PutObject. Aquí es poden afegir altres permisos si són necessaris per al vostre projecte. Consulteu els documents S3 per a altres accions disponibles.

El valor del recurs s’estableix al nom del recurs d’Amazon del dipòsit S3, que s’utilitza per identificar de manera única un recurs AWS concret. El format d’aquest identificador depèn del servei AWS referenciat. Tot i així, solen tenir el format següent.

arn: partició: servei: regió: identificador del compte: recurs

Adjunteu la configuració de la nostra funció a Proveïdor.

Funcions: business: handler: api.handle events: - http: path: / method: post cors: true

Aquí definim la configuració de l'API i assignem la nostra Lambda a un esdeveniment HTTP POST a l'URL base de l'API. Un controlador amb el valor "api.handle" fa referència a una funció anomenada "handle" que s'exporta des de "api.js".

Com que Lambda es basa en esdeveniments, les funcions només s’executen basant-se en activadors predefinits. Aquí hem definit un esdeveniment HTTP, però també podria ser un esdeveniment generat per una taula DynamoDB o una cua SQS.

A continuació, definim els recursos AWS a serverless.yml que ens haurien d’instanciar quan es desplegin amb CloudFormation. Val a dir que no necessàriament heu de configurar recursos d’aquesta manera, podeu utilitzar la consola d’administració d’AWS per crear-los. Amb els permisos d'accés adequats, no importa com es creen els recursos. Tot i això, definint els serveis necessaris a serverless.yml, definiu la vostra "infraestructura com a codi" i obtindreu diversos avantatges en fer-ho.

“La infraestructura com a codi és l'enfocament per definir la infraestructura de l'ordinador i de la xarxa a través del codi font, que després es pot tractar com qualsevol sistema de programari. Aquest codi es pot mantenir en control de font per a audibilització i compilacions reproduïbles, sempre que estigui subjecte a pràctiques de proves i a la disciplina completa de ContinuousDelivery. "
- Martin Fowler

Seguiu endavant i afegiu la configuració del recurs.

Recursos: Recursos: ServerlessRedirectS3Bucket: Tipus: AWS :: S3 :: Propietats del bucket: BucketName: $ {file (config.json): BUCKET} AccessControl: PublicRead Configuració del lloc web: IndexDocument: index.html ServerlessRedirectS3BucketPolicy: Introduïu el següent: AWS :: S3 :: Propietats de BucketPolicy: Dipòsit: $ {file (config.json): BUCKET} Document de política: Declaració: - Acció: - s3: Efecte GetObject: Permet recurs: - arn: aws: s3 ::: $ {file ( config.json): BUCKET} / * Director: "*"

Sol·licitem un recurs de dipòsit S3 configurat per utilitzar l'allotjament estàtic de llocs amb index.html com a document arrel. Els compartiments S3 són privats per defecte per una bona raó. Per tant, hem de crear una política de dipòsit S3 que permeti l’accés públic a la mateixa. Sense aquesta política, els visitants del lloc web rebrien un missatge d'error no autenticat.

API de compilació

La nostra funció lambda fa quatre coses.

  1. Obteniu l'URL per escurçar-la des del formulari de l'usuari.
  2. Genereu un codi curt únic per a l'URL.
  3. Deseu l'objecte de desviació corresponent a S3.
  4. Torneu la ruta de l'objecte al client.

Creeu el controlador

Creeu un fitxer nou anomenat api.js i exporteu una funció de fletxa anomenada handle que accepti tres arguments: esdeveniment, context i devolució de trucada. Aquests els proporciona AWS quan es crida al controlador. Aquest fitxer és un script Node.js. Per exportar la funció de fletxa, l’heu d’afegir a module.exports.

module.exports.handle = (esdeveniment, context, devolució de trucada) => {
}

Es diu aquest gestor quan s’envia una sol·licitud HTTP POST al nostre punt final. Per retornar una resposta de l'API, heu d'utilitzar la funció de devolució de trucada proporcionada com a tercer argument de funció de fletxa. És una devolució de trucada després del primer error que pren dos arguments. Si la sol·licitud s'ha completat correctament, s'hauria de passar nul com a primer argument. L'objecte de resposta passat com a segon argument determina el tipus de resposta que s'ha de retornar a l'usuari. Generar una resposta és tan senzill com proporcionar un statusCode i un cos, com es mostra a l'exemple següent.

resposta de resposta = {statusCode: 201, body: JSON.stringify ({"shortUrl": "http://example.com"})}
Devolució de trucada (zero, resposta)

L'objecte de context passat com a segon argument al controlador conté informació d'execució a la qual no necessitem accedir per aquest tutorial. Tot i això, hem d’utilitzar l’esdeveniment passat com a primer argument, ja que conté l’enviament del formulari amb l’URL que s’ha d’escurçar.

Analitzeu la sol·licitud

El següent és un exemple d’un esdeveniment de passarel·la API que es passa al nostre gestor quan un usuari envia un formulari. Com que estem creant el nostre reductor d’URL com a aplicació unidireccional, enviarem el formulari mitjançant JavaScript. Per tant, el tipus de contingut és application / json i no application / x-www-form-urlencoded.

{Recurs: '/', Camí: '/', httpMethod: 'POST', Encapçalaments: {Accept: '* / *', 'Accept-Coding': 'gzip, deflate', 'cache-control': 'no -cache ',' CloudFront-Forwarded-Proto ':' https ',' CloudFront-Is-Desktop-Viewer ':' true ',' CloudFront-Is-Mobile-Viewer ':' false ',' CloudFront-Is-SmartTV -Viewer ':' false ',' CloudFront-Is-Tablet-Viewer ':' false ',' CloudFront-Viewer-Land ':' GB ',' content-type ':' application / json ', host:' ' , 'User-Agent': '', 'X-Amz-Cf-Id': '', 'X-Amzn-Trace-ID': '', 'X-Forwarded-For': '', 'X- Forwarded-Port ':' 443 ',' X-Forwarded-Proto ':' https '}, queryStringParameters: null, pathParameters: {}, stageVariables: null, requestContext: {Path:' / dev ', accountId:' ', resourceId: '', stage: 'dev', ID de sol·licitud: '', identitat: {cognitoIdentityPoolId: null, accountId: null, cognitoIdentityId: null, trucant: nul, clau API: '', IP font: '', accessKey: null, cognitoAuthenticationType: null, cognitoAuthenticationProvider: null, userArn: null, agent d'usuari: '', usuari: null}, resourcePath: '/', httpMethod: 'POST', apiId: ''}, body: '{"url": "http://example.com"}', isBase64Encoded: false}

Tot el que necessitem és el formulari que rebem de l’esdeveniment quan examinem la sol·licitud. El text de la sol·licitud s’emmagatzema com un objecte JavaScript stringificat que podem cridar al nostre gestor amb JSON.parse (). Mitjançant l'avaluació de curtcircuits de JavaScript, podem establir un valor per defecte per a una cadena buida per als casos en què no s'hagi enviat cap URL com a part de l'enviament del formulari. Això ens permet tractar els casos en què falta l'URL i en què l'URL és una cadena buida per igual.

module.exports.handle = (esdeveniment, context, devolució de trucada) => {let longUrl = JSON.parse (event.body) .url || ''}

Comproveu l'URL

Afegiu una verificació bàsica per verificar que l'URL proporcionat sigui legítim. Hi ha diversos enfocaments per aconseguir-ho. No obstant això, aquest tutorial ho farà senzill i utilitzarà el mòdul d'URL Node.js integrat. Construirem la nostra validació per retornar una promesa resolta en un URL vàlid i una promesa rebutjada en un URL no vàlid. Les promeses de JavaScript es poden encadenar de manera seqüencial de manera que la resolució d'una promesa es transmeti al gestor d'èxit de la següent. Utilitzarem aquest atribut de promesa per estructurar el nostre gestor. Escrivim la funció de validació amb promeses.

const url = require ('url')
Funció validate (longUrl) {if (longUrl === '') {return Promise.reject ({statusCode: 400, missatge: 'URL is required'})}
deixem que parsedUrl = url.parse (longUrl) if (parsedUrl.protocol === null || parsedUrl.host === null) {return Promise.reject ({statusCode: 400, missatge: 'URL no és vàlid'})}
torna Promise.resolve (longUrl)}

A la nostra funció de validació, primer comprovem que l’URL no estigui establert en una cadena buida. En aquest cas, tornarem una promesa rebutjada. Tingueu en compte que el valor rebutjat és un objecte que conté un codi d'estat i un missatge. Ho farem servir més endavant per crear una resposta API adequada. L'anàlisi de trucades al mòdul URL Node.js retorna un objecte URL amb informació que es pot extreure de l'URL que es passa com a argument de cadena. Com a part de la nostra validació bàsica d’URL, només comprovem si es poden extreure un protocol (per exemple, "http") i un amfitrió (per exemple, "example.com"). Si qualsevol d'aquests valors és nul per a l'objecte URL retornat, se suposa que l'URL no és vàlid. Si l'URL és vàlid, el tornarem a enviar com a part d'una promesa feta.

Envia la resposta de nou

Després d'obtenir l'URL de la sol·licitud, anomenem validar i retornar una nova promesa al gestor d'èxit de la promesa anterior per a cada pas de gestor addicional que es requereixi. El controlador d’èxit final és el responsable de retornar una resposta de l’API mitjançant l’argument de devolució de trucada del gestor. Es demana tant respostes d'API d'error generades a partir de promeses denegades com respostes d'API reeixides.

module.exports.handle = (esdeveniment, context, devolució de trucada) => {let longUrl = JSON.parse (event.body) .url || "validate (longUrl). then (function (path) {let response = buildResponse (200, 'success', path) return Promise.resolve (response)}) .catch (function (err) {let response = buildResponse (err .statusCode, err.message) return Promise.resolve (response)}) .then (function (response) {callback (zero, response)})}
Funció buildResponse (statusCode, message, path = false) {let body = {message} if (path) body ['path'] = path return {headings: {'Access-Control-Allow-Origin': '*'}, statusCode: statusCode, cos: JSON.stringify (cos)}}

Creeu un codi curt d'URL

L'API ha de poder generar codis curts d'URL únics que es representin com a noms de fitxer al dipòsit S3. Com que un codi curt és només un nom de fitxer, la seva composició és extremadament flexible. Per al nostre codi curt, fem servir una cadena alfanumèrica de 7 dígits que consta tant de majúscules com de minúscules. Això correspon a 62 combinacions possibles per a cada personatge. Utilitzarem la recursivitat per crear el codi curt escollint un caràcter a la vegada fins que se n’hagin seleccionat set.

Funció generatePath (path = '') {let characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789' let position = Math.floor (Math.random () * characters.length) let character = characters.charAt (position)
if (path.length === 7) {el camí de tornada}
Retorna generatePath (ruta + caràcter)}

Tot i que és probable que es generi el mateix codi curt (de fet, hi ha la possibilitat que dos codis curts siguin iguals, un 0,0000000000000000000000008063365516), hem de comprovar si el codi curt generat ja està en ús. Ho podem fer amb AWS SDK. Hi ha un mètode headObject al servei S3 que s’utilitza per carregar les metadades d’un objecte. Amb això podem provar si ja existeix un objecte amb el mateix nom. Si no s'ha trobat cap promesa amb el codi "No trobat" per a un objecte, es rebutjarà. Aquesta promesa denegada indica que el codi curt és gratuït i es pot utilitzar. Cridar a headObject és més eficient que comprovar si l’objecte està disponible mitjançant getObject, que carrega l’objecte sencer.

const AWS = require ('aws-sdk') const S3 = AWS.S3 nou ()
La funció isPathFree (ruta) {return S3.headObject (buildRedirect (ruta)). promise () .then (() => Promise.resolve (false)) .catch (function (err) {if (err.code == 'NotFound') {return Promise.resolve (true)} else {return Promise. rebutjar (errar)}})}
Funció buildRedirect (path, longUrl = false) {let redirect = {'Bucket': config.BUCKET, 'key': path}
if (longUrl) {redirect ['WebsiteRedirectLocation'] = longUrl}
Reenviament enrere}

Podem utilitzar isPathFree per trobar recursivament un camí d'objecte únic.

Funció getPath () {retornar una nova promesa (funció (resoldre, rebutjar) {deixar ruta = generarPath () ésPathFree (camí). Llavors (funció (isFree) {retorn isFree? Resolve (path): resolve (getPath ())}) })}

Aprofitant la possibilitat de concatenar promeses, retornem una nova trucada a getPath quan isPathFree retorni fals.

Per desar un objecte després de trobar un codi curt únic, només hem de trucar al mètode putObject al servei AWS SDK S3. Completem això amb una funció que resol el codi curt quan la trucada al mètode putObject té èxit i retorna un objecte d'error per crear una resposta de l'API quan no ho fa.

Funció saveRedirect (redirect) {return S3.putObject (redirect) .promise () .then (() => Promise.resolve (redirect ['Key']))) .catch (() => Promise.reject ({statusCode: 500, missatge: "Error en desar la redirecció"})}

Mitjançant les funcions anteriors, podem afegir dos gestors de Promise Success nous per finalitzar el nostre punt final de l’API. Hem de retornar getPath des del primer Gestor d’èxits de promeses que resol un codi curt d’URL únic. Si torneu saveRedirect amb un objecte de redirecció creat amb aquest codi curt únic al segon controlador d’èxit, l’objecte es desa al dipòsit S3. El camí d'aquest objecte es pot retornar al client com a part d'una resposta de l'API. El nostre gestor hauria d'estar complet.

module.exports.handle = (esdeveniment, context, devolució de trucada) => {let longUrl = JSON.parse (event.body) .url || '' validate (longUrl) .then (function () {return getPath ()}) .then (function (path) {let redirect = buildRedirect (path, longUrl) return saveRedirect (redirect)}) .then (function (path) {let response = buildResponse (200, 'exit', path) return Promise.resolve (response)}) .catch (function (err) {let response = buildResponse (err.statusCode, err.message) return Promise.resolve (response) )}) .then (funció (resposta) {devolució de trucada (zero, resposta)})}

Desplegueu l'API

Executeu el desplegament sense servidor al vostre terminal per desplegar l'API a AWS. Això configurarà el nostre dipòsit S3 i retornarà l'URL del punt final. Teniu a punt l'URL del punt final, ja que el necessitarem més endavant.

Sense servidor: servei d’empaquetament ... Sense servidor: sense dependències de desenvolupament ... Sense servidor: el fitxer CloudFormation es penja a S3 ... Sense servidor: es carreguen els artefactes ... Sense servidor: El fitxer ZIP del servei es carrega a S3 (cinquè , 44 MB) ... Sense servidor: la plantilla està marcada ... Sense servidor: la pila s’actualitza ... Sense servidor: es comprova el progrés de l’actualització per lots ... ........... Sense servidor: S'ha acabat l'actualització de la pila ... Servei d'informació del servei: serverless-url-shortener Etapa: dev region: eu-west-1 stack: serverless-url-shortener-dev Clau API: Cap Punt final: POST - https: // t2fgbcl26h. funcions execute-api.eu-west-1.amazonaws.com/dev/: save: serverless-url-shortener-dev-store serverless: s'eliminaran les versions de servei antigues ...

Creeu el frontal

Per donar suport al disseny del frontal, fem servir el marc PaperCSS. També fem servir jQuery per facilitar el treball amb el DOM i la creació de consultes AJAX. Val a dir que, per a un entorn de producció, és probable que vulgueu incloure dues dependències més lleugeres, però com que aquest és només un tutorial, crec que és acceptable.

Creeu una carpeta estàtica perquè puguem emmagatzemar el nostre codi frontal en algun lloc.

Descarregueu les dependències

Deseu una còpia de paper.min.css i jquery-3.2.1.min.js a la nostra carpeta estàtica de nova creació. Es tracta de versions miniaturitzades del framework PaperCSS o de la biblioteca jQuery.

Afegiu l’HTML

Creeu un fitxer nou anomenat index.html a la carpeta estàtica i afegiu el codi HTML necessari. Necessitem un formulari amb una entrada d’URL i un botó per enviar el formulari. També hem d’emmagatzemar el resultat de les trucades a l’API en algun lloc, que seria l’URL escurçat per a una trucada a l’API satisfactòria i el missatge d’error per a una trucada a l’API que no ha tingut èxit.

Escurçador d'URL sense servidor </ title> <link href = "paper.min.css" rel = "sheetheet"> </ head> <style> * {text alignement: middle; }</pre><pre>#Messatge {display: none; } Escurçador d'URL sense servidor <label for = "url">Introduïu l'URL que voleu escurçar</label> <a href="https://git.io/vbS8I">Mireu aquest projecte a Github</a></pre><p>Assegureu-vos de definir l'acció del formulari al punt final de l'API que es va mostrar quan es va executar el desplegament sense servidor, fins i tot si no apareix al bloc de codi anterior per brevetat. Si ja no teniu accés a la sortida del terminal mitjançant aquest desplegament, podeu determinar l'URL del punt final amb l'ordre d'informació sense servidor.</p><h4>Feu sol·licituds d'API</h4><p>Carregueu jQuery abans d’escriure JavaScript per enviar sol·licituds a la nostra API col·locant una etiqueta de script immediatament abans i consulteu el fitxer minimitzat descarregat anteriorment.</p><pre><script src = "jquery-3.2.1.min.js"> </ script></pre><p>Ara afegiu un altre parell d’etiquetes de script a sota i creeu una funció que es pugui utilitzar per mostrar un missatge a l’usuari. Per fer-ho, utilitzeu el missatge div de la nostra plantilla, que es defineix com a "Cap" per defecte quan es carrega la pàgina. Per mostrar un missatge, simplement podem configurar el text d’aquesta div amb text () i canviar la pantalla amb show ().</p><pre><script>
  Funktion addMessage (Text) {
    $ ('# message'). text (text) .show ()
  }
</ script></pre><p>Escrivim una altra funció que conté el mateix conjunt d'etiquetes de seqüències que jQuery utilitza per fer sol·licituds a la nostra API.</p><pre>Funció ShortLink (apiUrl, longUrl) {$ .ajax (apiUrl, {type: "POST", data: JSON.stringify ({url: longUrl})}) .done (function (responseJSON) {var protocol = window.location. protocol + '//' var host = window.location.host + '/' var shortUrl = protocol + host + responseJSON.path addMessage (shortUrl)}) .fail (function (data) {if (data.status === 400) {addMessage (data.responseJSON.message)} else {addMessage ("s'ha produït un error inesperat")}})}</pre><p>Aquesta funció crea una sol·licitud POST i defineix el cos de la sol·licitud en un objecte JSON que conté l'URL que s'ha de reduir. Si la sol·licitud es completa correctament i es torna un codi d’estat HTTP 2XX, el codi curt s’obté a partir de la clau de camí de la resposta i es crea un URL curt complet qualificat que es presenta a l’usuari mitjançant la funció addMessage creada anteriorment. Si la sol·licitud no ha tingut èxit, es mostrarà un missatge d'error.</p><p>Finalment, podem adjuntar-ho al nostre formulari afegint un controlador de presentació. L’URL del punt final de l’API s’obté de l’atribut d’acció del formulari i l’URL que s’ha d’escurçar des de l’entrada de l’URL del formulari.</p><pre>$ ('formulari'). submit (function (event) {event.preventDefault () add message ('...') ShortenLink (event.target.action, event.target.url.value)})</pre><h4>Desplegueu el lloc web</h4><p>Per al desplegament de llocs web, fem servir l'ordre de sincronització de AWS CLI per penjar el contingut de la carpeta estàtica al nostre dipòsit S3. Executeu aws s3 sync static s3: // [Dipòsit] al vostre terminal i substituïu [Dipòsit] pel nom del dipòsit seleccionat a config.json. Després de completar aquest procés, hauríeu de ser capaç de navegar fins a l'adreça del vostre dipòsit S3 en un navegador per veure l'accionador d'URL en acció. Els URL públics dels cubs S3 adopten la forma següent.</p><pre>http: // [cub] .s3-website- [region] .amazonaws.com</pre><p>Un cop hàgiu afegit el nom i la regió del dipòsit, l'adreça de l'escurçador d'URL hauria de ser així.</p><pre>http://serverless-url-shortener.s3-website-eu-west-1.amazonaws.com</pre><p>Per afegir un domini personalitzat al vostre dipòsit, seguiu una de les instruccions d'aquest article d'assistència d'AWS. Per a l'opció més senzilla, heu d'establir el nom del dipòsit al subdomini www del vostre domini (per exemple, www.example.com). Si després afegiu un registre CNAME per al subdomini WWW a la configuració de DNS i el definiu a l'adreça del dipòsit S3, el lloc web hauria de ser accessible al vostre domini. Traieu també els registres A existents i recordeu que això no configurarà una redirecció des del vostre domini arrel al subdomini www. Hi ha diverses maneres de fer-ho, tal com es descriu a l'article AWS.</p><h3>Embolicar</h3><p>Espero que aquest tutorial us sigui útil. La realitat és que AWS és increïblement flexible. En aquest article, només hem descrit una manera de fer servir Lambda i S3 per crear un reductor d’URL. No obstant això, hi ha diverses altres maneres en què es podria haver dut a terme el mateix procés.</p><p>Si heu trobat això interessant, potser us agradaria un dels meus articles anteriors en què vaig utilitzar AWS Lambda per crear un servei d’enviament de formularis.</p></div><div class="neighbor-articles"><h4 class="ui header">Vegeu també</h4><a href="/question/how-to-end-a-phone-conversation/" title="com acabar una conversa telefònica">com acabar una conversa telefònica</a><a href="/question/how-to-lighten-jeans-with-salt/" title="com aclarir els texans amb sal">com aclarir els texans amb sal</a><a href="/question/how-to-say-unfortunately-in-french/" title="com es diu malauradament en francès">com es diu malauradament en francès</a><a href="/question/how-to-smoke-meth-off-foil/" title="com fumar metanfetamina">com fumar metanfetamina</a><a href="/question/how-to-reheat-a-casserole-from-the-fridge/" title="com escalfar una cassola de la nevera">com escalfar una cassola de la nevera</a><a href="/question/how-to-connect-two-monitors-to-one-dvr/" title="com connectar dos monitors a un dvr">com connectar dos monitors a un dvr</a><a href="/question/how-to-mix-olive-drab-paint/" title="com barrejar pintura tosca d’oliva">com barrejar pintura tosca d’oliva</a><a href="/question/how-to-make-textbox-transparent-in-word/" title="com fer que el quadre de text sigui transparent en word">com fer que el quadre de text sigui transparent en word</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Vegeu també</h4><a href="/article/how-to-convince-strangers-to-help-you-get-a-job-f29294/" title="Com convèncer els desconeguts de trobar feina">Com convèncer els desconeguts de trobar feina</a><a href="/article/does-facebook-even-know-how-to-control-facebook-a02f09/" title="Fins i tot Facebook sap controlar Facebook?">Fins i tot Facebook sap controlar Facebook?</a><a href="/article/how-to-prevent-burnout-in-the-workplace-aa2954/" title="Com prevenir l’esgotament al lloc de treball">Com prevenir l’esgotament al lloc de treball</a><a href="/article/flowchart-how-to-deal-with-rejection-db3cb4/" title="Diagrama de flux: fer front al rebuig.">Diagrama de flux: fer front al rebuig.</a><a href="/article/how-es6-classes-really-work-and-how-to-build-your-own-1a7d5a/" title="Com funcionen realment les classes d’ES6 i com es construeixen les vostres">Com funcionen realment les classes d’ES6 i com es construeixen les vostres</a><a href="/article/how-to-use-webgl-shaders-in-webassembly-ec0fb7/" title="Ús de shaders WebGL a WebAssembly">Ús de shaders WebGL a WebAssembly</a><a href="/article/requirement-analysis-how-to-use-this-startup-friendly-approach-a-case-study-2bcf59/" title="Anàlisi de requisits: utilitzar aquest enfocament amigable d'inici + un cas pràctic">Anàlisi de requisits: utilitzar aquest enfocament amigable d'inici + un cas pràctic</a><a href="/article/how-to-build-a-react-and-gatsby-powered-blog-in-about-10-minutes-608f8f/" title="Com es crea un bloc React i Gatsby Powered en uns 10 minuts">Com es crea un bloc React i Gatsby Powered en uns 10 minuts</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="is flag"></i></a><a href="https://az.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="az flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="sa flag"></i></a><a href="https://bn.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="in flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="cn flag"></i></a><a href="https://hr.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="hr flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="fi flag"></i></a><a href="https://fr.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="fr flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-build-a-serverless-url-shortener-using-aws-lambda-and-s3-da940b/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>