Kuidas luua serverita URL-i lühendaja, kasutades AWS Lambda ja S3

SAP Scenes Packi graafika kasutamine

Selle postituse vältel ehitame serverivaba URL-i lühendaja, kasutades Amazon Web Services (AWS) Lambda ja S3. Ehkki te ei nõua eelnevat kogemust AWS-iga, eeldan, et nad on ES6 JavaScripti ja Node.js tuttavad.

Irooniline on see, et meie URL-i lühendajast genereeritavad URL-id on sageli pikemad kui URL-id, kuhu nad ümbersuunamiseks suunatakse - selle põhjuseks on see, et kasutame S3 kopa vaikimisi veebisaidi aadressi. Postituse lõpupoole arutlen, kuidas saaksite kohandatud domeeni lisada, et sellest piirangust mööda pääseda.

Vaadake demo

Vaadake koodi Githubis

AWS-iga on suhteliselt lihtne alustada, kuid selle keerukus on kindlasti olemas. Saadaolevate teenuste arvu võib olla hirmutav valida, kuna paljud neist kattuvad funktsionaalsusega. Aeglasest ja mitte-intuitiivsest AWS-i halduskonsoolist ei aita ka tekstimahukas veebidokumendid. Kuid loodan kogu selle postituse vältel näidata, et parim viis AWS-teenuste kasutuselevõtmiseks on kasutada järkjärgulist lähenemisviisi ja võite alustada, kui kasutate vaid käputäis teenuseid.

Kasutame AWS-iga suhtlemiseks serverita raamistikku ja seega pole vaja AWS-i halduskonsooli sisse logida. Serverita raamistik pakub AWS-i abstraktsiooni ja aitab pakkuda projekti struktuuri ning mõistlikke vaikimisi konfiguratsiooni. Kui soovite enne alustamist rohkem teada saada, peaksite lugema nende dokumente.

Arhitektuur

Enne arendamisse asumist vaatame kõigepealt AWS-i teenuseid, mida kasutame oma URL-i lühendaja ehitamiseks.

Meie veebisaidi majutamiseks kasutame Amazon S3 failisalvestusteenust. Seadistame oma S3-kopa, mida võib pidada tipptasemel kaustaks, staatilise veebisaidi teenindamiseks. Veebisait koosneb staatilisest sisust ja kliendipõhistest skriptidest. Serveripoolset koodi (nt PHP, Ruby või Java) käivitada pole võimalik, kuid meie juhtumi puhul on see korras.

Kasutame ka S3 vähetuntud funktsiooni, mis võimaldab teil seadistada S3 koppides olevate objektide edastamist, lihtsalt lisades objekti metaandmetele väärtuse Veebisaidi ümbersuunamine-asukoht. Selle URL-i määramisel suunatakse brauserid läbi HTTP 301 vastuse ja asukoha päise.

S3 objekti URL koosneb S3 kopa aadressist, millele järgneb objekti nimi.

http: // [kopa nimi] .s3-veebisait-eu-lääs-1.amazonaws.com / [objekti nimi

Järgnev on näide e3-lääne-1 piirkonna S3 koppobjekti vormingust.

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

Sellest objektinimest „6GpLcdl” ülaltoodud näite URL-i lõpus saab meie lühendatud URL-ide lühikood. Seda funktsiooni kasutades saame loomuliku URL-i ümbersuunamise ja salvestusvõimalused. Me ei vaja andmebaasi, et salvestada üksikasjad, millised lühikoodid suunavad millisele URL-ile, kuna see teave salvestatakse selle asemel koos objektiga ise.

Loome funktsiooni Lambda nende S3-objektide koos sobivate metaandmetega S3-ämbrisse salvestamiseks.

Objektide salvestamiseks võite kasutada ka brauseris AWS SDK kliendi poolt. Kuid parem on see funktsioon eraldi teenuseks eraldada. Selle eeliseks on see, et te ei pea muretsema turvalisuse mandaadi paljastamise pärast ja see on tulevikus veelgi laiendatav. Kaardistame funktsiooni Lambda API-lüüsi lõpp-punktini, nii et sellele oleks juurdepääs API-kõne kaudu.

Alustamine

Minge edasi Serverless Frameworki dokumentide juurde ja lugege läbi nende kiire juhend. Seadistamisprotsessi osana peate installima AWS CLI ja konfigureerima oma AWS mandaadi.

Alustage faili package.json loomisega projekti juurest.

{
  "nimi": "serverless-url-shortener",
  "skriptid": {},
  "sõltuvused": {}
}

Teame, et peame kasutama AWS SDK-d, nii et jätkake ja installige see nüüd NPM-ist, sisestades järgmise käsu.

npm install aws-sdk --save

Nüüd looge faili config.json ka projekti juur. Kasutame seda kohandatavate kasutajavalikute salvestamiseks JSON-vormingus.

Lisage järgmised seadistusele vastavate väärtustega klahvid.

  • BUCKET - nimi, mida soovite kasutada oma S3 ämbri jaoks. See muutub lühikese URL-i osaks, kui otsustate kohandatud domeeni mitte lisada. See peab olema teie piirkonna jaoks ainulaadne, nii et ärge valige midagi liiga üldist. Kuid ärge muretsege, kui teie valitud ämbri nimi on juba kasutusel, hoiatatakse teid juurutamisel serverivaba CLI kaudu.
  • REGIOON - AWS-i piirkond, kuhu soovite kasutada. Toimivuse tagamiseks on kõige parem valida kasutajatele kõige lähemal asuv piirkond. Kui jälgite lihtsalt õpetust, siis kasutan eu-west-1.
  • Etapp - lava, kuhu paigutada. Tavaliselt on teil lavastuskeskkond, mis kordab sama konfiguratsiooni kui teie tootmiskeskkond. See võimaldab teil tarkvara väljalaskeid testida mittepurustavalt. Kuna see on õpetus, siis võtan kasutusele dev etapi.

Pärast konfigureerimist peaks teie fail config.json sarnanema järgmisega.

{
  "BUCKET": "teie-kopp-nimi",
  "PIIRKOND": "eu-lääs-1",
  "STAGE": "dev",
}

Järgmisena looge projekti juure juurde teine ​​fail serverless.yml. See hoiab meie Serverless Framework konfiguratsiooni vormindatud YAML-i märgistuskeeles.

Selles failis tutvustame kõigepealt oma keskkonda. Pange tähele, kuidas saame viidata muutujatele config.json varem talletatud muutujatele.

teenus: serverless-url-shortener

pakkuja:
  nimi: aws
  käitusaeg: nodejs6.10
  etapp: $ {fail (config.json): STAGE}
  piirkond: $ {fail (config.json): REGION}
  iamRoleStatements:
    - Efekt: lubada
      Tegevus:
        - s3: PutObject
      Allikas: "arn: aws: s3 ::: $ {fail (config.json): BUCKET} / *"

Jaotis iamRoleStatements viitab identiteedi ja juurdepääsuhaldusele, mida kasutatakse Lambda õiguste seadistamiseks. Siinkohal anname Lambda-le juurdepääsu S3-ämbrile.

Objektide salvestamiseks vajame luba s3: PutObject toimingu käivitamiseks. Muid õigusi saab siia lisada, kui need on teie projektiga nõutavad. Muude saadaolevate toimingute kohta lugege S3-dokumente.

Ressursi väärtuseks on seatud S3 kopa Amazoni ressursi nimi, mida kasutatakse konkreetse AWS-i ressursi ainulaadseks tuvastamiseks. Selle identifikaatori vorming sõltub AWS-teenusest, millele viidatakse, kuid üldiselt on neil järgmine vorming.

arn: partitsioon: teenus: piirkond: konto-id: ressurss

Pakkuja all on meie funktsioonide konfiguratsioon.

funktsioonid:
  kauplus:
    käitleja: api.käepide
    sündmused:
      - http:
          tee: /
          meetod: post
          korsikad: tõsi

Siin määratleme API konfiguratsiooni ja kaardistame oma Lambda HTTP POST-i sündmuseni API põhilisel URL-il. Käitleja, mille väärtus on api.handle, viitab funktsioonile nimega käepide, mis eksporditakse api.js-st (me ei vaja faililaiendit js, kuna varem määrasime serverless.yml-is käitusajaks nodejs6.10).

Lambda põhineb sündmusel ja funktsioone täidetakse ainult etteantud päästikute põhjal. Siin määratlesime HTTP-sündmuse, kuid see võis olla ka sündmus, mille käivitas DynamoDB-tabel või SQS-järjekord.

Järgmisena määratleme serverless.yml-is AWS-i ressursid, mida CloudFormationi abil meie jaoks kasutusele võetakse. Väärib märkimist, et te ei pea tingimata ressursse sel viisil seadistama, saate neid luua ka AWS-i halduskonsooli abil. Õigete juurdepääsulubade olemasolu korral pole vahet, kuidas ressursid luuakse. Kuid määratledes serverless.ymlis nõutavaid teenuseid, määratlete oma infrastruktuuri koodina ja saate seda tehes mitmeid eeliseid.

Infrastruktuur koodina on lähenemisviis andmetöötluse ja võrgu infrastruktuuri määratlemisele lähtekoodi kaudu, mida saab seejärel käsitleda nagu iga tarkvarasüsteemi. Sellist koodi saab allikakontrollis hoida, et võimaldada auditeeritavust ja ReproducibleBuilds'i, vastavalt testimispraktikale ja pideva tarnimise täielikule distsipliinile. ”
- Martin Fowler

Minge edasi ja lisage ressursside konfiguratsioon.

ressursid:
  Ressursid:
    ServerlessRedirectS3Bucket:
      Tüüp: AWS :: S3 :: Kopp
      Omadused:
        BucketName: $ {fail (config.json): BUCKET}
        AccessControl: PublicRead
        Veebisaidi konfiguratsioon:
          IndexDocument: index.html
    ServerlessRedirectS3BucketPolicy:
      Tüüp: AWS :: S3 :: BucketPolicy
      Omadused:
        Kopp: $ {fail (config.json): BUCKET}
        PolicyDocument:
          Avaldus:
          - tegevus:
            - s3: GetObject
            Efekt: lubada
            Allikas:
            - arn: aws: s3 ::: $ {fail (config.json): BUCKET} / *
            Põhiline: "*"

Palume S3-koppressurssi, mis on konfigureeritud kasutama staatilist saidimajutust koos juurdokumendina index.html. Mõjuval põhjusel olevad S3-ämbrid on vaikimisi privaatsed ja seetõttu peame looma S3-ämbri poliitika, mis võimaldab sellele üldsusele juurdepääsu. Ilma selle eeskirjata näeksid veebisaidi külastajad autentimata tõrketeadet.

API loomine

Meie Lambda funktsioon vastutab nelja ülesande eest.

  1. Kasutaja vormi esitamisest lühendamiseks haarake URL.
  2. URL-i kordumatu lühikoodi genereerimine.
  3. Sobiva ümbersuunamisobjekti salvestamine S3-sse.
  4. Objekti tee tagastamine kliendile.

Loo käitleja

Looge uus fail nimega api.js ja eksportige käepidemega noolefunktsioon, mis võtab vastu kolm argumenti: sündmus, kontekst ja tagasihelistamine. Neid pakub AWS, kui käitlejale kutsutakse. See fail on Node.js skript ja noolefunktsiooni eksportimiseks peate selle lisama moodulile.exports.

module.exports.handle = (sündmus, kontekst, tagasihelistamine) => {
}

Sellele käitlejale viidatakse siis, kui meie lõpp-punktile on esitatud HTTP POST-päring. API vastuse tagastamiseks peame kasutama kaasasolevat tagasihelistamisfunktsiooni, mis on toodud kolmanda noole funktsiooni argumendina. See on vea esimene tagasihelistamine, millel on kaks argumenti. Kui taotlus on edukalt täidetud, tuleks esimese argumendina sisestada null. Teise argumendina edastatud vastuseobjekt määrab kasutajale tagastatava vastuse tüübi. Vastuse genereerimine on sama lihtne kui olekukoodi ja keha loomine, nagu on näidatud allolevas näites.

const response = {
  olekukood: 201,
  body: JSON.stringify ({"shortUrl": "http://example.com"})
}
tagasihelistamine (null, vastus)

Teise argumendina käitlejale edastatud kontekstiobjekt sisaldab käitusaja teavet, millele me selle õpetuse jaoks juurdepääsu ei vaja. Esimese argumendina peame siiski kasutama möödunud sündmust, kuna see sisaldab vormi esitamist koos URL-iga lühendamiseks.

Sõeluge taotlus

Allpool on toodud näide API-lüüsi sündmusest, mis edastatakse meie käitlejale, kui kasutaja esitab vormi. Kuna me ehitame oma URL-i lühendajat ühe lehe rakendusena, saadame vormi JavaScripti abil ja seetõttu on sisutüübiks pigem rakendus / json, mitte rakendus / x-www-vorm-urlencoded.

{
   ressurss: '/',
   tee: '/',
   http: metoodika: 'POST',
   päised: {
      Nõustu: '* / *',
      'Accept-Encoding': 'gzip, deflate',
      'vahemälu juhtimine': 'vahemälu puudub',
      'CloudFront-Forward-Proto': 'https',
      'CloudFront-Is-Desktop-Viewer': 'true',
      'CloudFront-is-Mobile-Viewer': 'vale',
      'CloudFront-Is-SmartTV-Viewer': 'vale',
      'CloudFront-is-Tablet-Viewer': 'vale',
      'CloudFront-Viewer-Country': 'GB',
      'content-type': 'application / json',
      Host: '',
      'Kasutaja agent':'',
      'X-Amz-Cf-Id': '',
      'X-Amzn-Trace-Id': '',
      'X-Forward-For': '',
      'X-Forward-Port': '443',
      'X-Forward-Proto': 'https'
   },
   queryStringParameters: null,
   pathParameters: {},
   stageVariables: null,
   requestContext: {
      tee: '/ dev',
      Konto ID:'',
      ressursi ID: '',
      etapp: 'dev',
      requestId: '',
      identiteet: {
         cognitoIdentityPoolId: null,
         konto ID: null,
         cognitoIdentityId: null,
         helistaja: null,
         apiKey: '',
         sourceIp: '',
         accessKey: null,
         cognitoAuthenticationType: null,
         cognitoAuthenticationProvider: null,
         userArn: null,
         kasutaja agent:'',
         kasutaja: null
      },
      resourcePath: '/',
      http: metoodika: 'POST',
      apiId: ''
   },
   body: '{"url": "http://example.com"}',
   isBase64Encoded: vale
}

Vajame üritusest ainult vormi esitamist, mille saame taotluskeha vaadates. Taotluse sisu salvestatakse stringitud JavaScripti objektina, mille saame käitleja JSON.parse () abil haarata. Kasutades JavaScripti lühise hindamist, saame tühja stringi vaikeväärtuse määrata juhtudeks, kui URL-i ei ole vormi esitamise käigus saadetud. See võimaldab meil käsitleda võrdselt ka juhtumeid, kus URL puudub või kus URL on tühi string.

module.exports.handle = (sündmus, kontekst, tagasihelistamine) => {
  lase longUrl = JSON.parse (sündmus.keha) .url || ''
}

Kinnitage URL

Lisage mõni põhiline kinnitus, et kontrollida, kas pakutav URL näib seaduslik. Selle saavutamiseks võiks kasutada mitut lähenemisviisi. Kuid selle õpetuse jaoks hoiame selle lihtsana ja kasutame sisseehitatud Node.js URL-moodulit. Ehitame välja oma valideerimise, et tagastada kehtivale URL-ile kinnitatud lubadus ja kehtetule URL-ile tagasilükatud lubadus. JavaScripti lubadusi saab järjestikku aheldada, nii et ühe lubaduse lahendamine läheb järgmise edukäitlejale. Kasutame seda lubaduste omadust oma käitleja ülesehitamiseks. Kirjutagem kinnitusfunktsioon lubaduste abil.

const url = vaja ('url')
funktsiooni valideerimine (longUrl) {
  if (longUrl === '') {
    tagasta Promise.reject ({
      olekukood: 400,
      teade: 'URL on kohustuslik'
    })
  }
lase parsedUrl = url.parse (longUrl)
  if (parsedUrl.protocol === null || parsedUrl.host === null) {
    tagasta Promise.reject ({
      olekukood: 400,
      teade: 'URL on vale'
    })
  }
naase Promise.resolve (longUrl)
}

Valideerimisfunktsioonis kontrollime kõigepealt, kas URL pole määratud tühjale stringile. Kui see on nii, tagastame tagasilükatud lubaduse. Pange tähele, kuidas tagasilükatud väärtus on olekukoodi ja sõnumit sisaldav objekt. Kasutame seda hiljem sobiva API vastuse loomiseks. URL-i mooduli Node.js parsimiseks helistamine tagastab URL-i objekti koos teabega, mida saab eraldada stringi argumendina edastatud URL-ist. Oma põhilise URL-i valideerimise käigus kontrollime lihtsalt, kas protokolli (näiteks „http”) ja hostit (nt „example.com”) saab kaevandada. Kui üks neist väärtustest on tagastatud URL-i objektil null, eeldame, et URL on vale. Kui URL on õige, tagastame selle lahendatud lubaduse osana.

Vastuse tagastamine

Pärast päringu URL-i haaramist helistame valideerimisele ja iga nõutava käitleja sammu jaoks anname uue lubaduse eelmises lubaduste edukäitlejas. Lõplik edukäitleja vastutab API-vastuse tagastamise eest käepideme tagasihelistamisargumendi kaudu. Seda kutsutakse nii tõrkendatud lubadustest genereeritud tõrgete API-vastuste kui ka edukate API-vastuste jaoks.

module.exports.handle = (sündmus, kontekst, tagasihelistamine) => {
  lase longUrl = JSON.parse (sündmus.keha) .url || ''
  valideerima (longUrl)
    . seejärel (funktsioon (tee) {
      lase vastus = buildResponse (200, 'edu', tee)
      return Promise.resolve (vastus)
    })
    .catch (funktsioon (ekslik) {
      lase vastus = buildResponse (err.statusCode, err.message)
      return Promise.resolve (vastus)
    })
    . seejärel (funktsioon (vastus) {
      tagasihelistamine (null, vastus)
    })
}
funktsioon buildResponse (statusCode, teade, tee = vale) {
  lase keha = {teade}
  if (tee) keha ['tee'] = tee
  
  tagastama {
    päised: {
      'Juurdepääsukontroll-luba-päritolu': '*'
    },
    statusCode: statusCode,
    keha: JSON.stringify (body)
  }
}

Genereerige URL-i lühikood

API peab olema võimeline genereerima unikaalseid URL-i lühikoode, mis on S3-koppis esitatud failinimedena. Kuna lühinumber on vaid failinimi, on selle koostamisel palju paindlikkust. Lühikoodis kasutame seitsmekohalist tähtnumbrilist stringi, mis koosneb nii suurtähtedest kui ka väiketähtedest. See tähendab 62 tähemärki iga märgi jaoks. Lühikoodi moodustamiseks kasutame rekursiooni, valides ühe tähe korraga, kuni seitse on valitud.

funktsioon generatorPath (tee = '') {
  lase tähtedega = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
  lase positsioon = Math.põrand (Math.random () * tähemärki.pikkus)
  las märk = tähed.charAt (positsioon)
if (tee pikkus === 7) {
  tagasitee
}
return GenePath (tee + märk)
}

Ehkki sama lühikese koodi juhusliku genereerimise võimalus on väike (tegelikult on 0,0000000000000000000000008063365516 võimalus, et kaks lühikoodi on ühesugused), peame kontrollima, kas genereeritud lühikood on juba kasutusel, mida saame teha AWS SDK abil. S3-teenuses on olemas meetod headObject, mis laadib objekti metaandmed. Selle abil saame kontrollida, kas sama nimega objekt on juba olemas, kui objekt ei leia lubadust koodiga NotFound tagasi lükata. See tagasilükatud lubadus näitab, et lühinumber on tasuta ja seda saab kasutada. HeadObjekti kutsumine on tulemuslikum kui katsetamine, kas objekt eksisteerib kogu objekti laadiva getObjekti kaudu.

const AWS = nõuda ('aws-sdk')
const S3 = uus AWS.S3 ()
funktsioon isPathFree (tee) {
  tagasi S3.headObject (buildRedirect (tee)). lubadus ()
    . then (() => Promise.resolve (false))
    .catch (funktsioon (ekslik) {
      if (err.code == 'NotFound') {
        return Promise.resolve (tõene)
      } veel {
        return Promise.reject (viga)
      }
    })
}
funktsioon buildRedirect (tee, longUrl = vale) {
  lase suunata = {
    'Kopp': config.BUCKET,
    'Võti': tee
  }
if (longUrl) {
    ümbersuunamine ['WebsiteRedirectLocation'] = longUrl
  }
tagasi ümbersuunamine
}

IsPathFree abil saame kordumatu objekti tee leida.

funktsioon getPath () {
  tagasta uus lubadus (funktsioon (lahenda, lükka tagasi) {
    lase tee = genereerima rada ()
    isPathFree (tee)
      . seejärel (funktsioon (isFree) {
        tagastada on tasuta? lahenda (tee): lahenda (getPath ())
      })
  })
}

Lubaduste aheldamise võimaluse ärakasutamine tagastab uue getPathi kutsumise, kui isPathFree tagastab vale.

Objekti salvestamiseks pärast unikaalse lühikoodi leidmist peame lihtsalt AWS SDK S3-teenuses kutsuma välja PutObject-meetodi. Paneme selle funktsiooni, mis lahendab lühikoodi, kui putObject-meetodi kõne oli edukas, ja tagastab veaobjekti, et luua API-vastus, kui seda ei tehtud.

funktsioon saveRedirect (ümbersuunamine) {
  return S3.putObject (ümbersuunamine) .promise ()
    . then (() => Promise.resolve (suunake ümber ['võti']))
    .catch (() => Promise.reject ({
      olekukood: 500,
      teade: 'Viga ümbersuunamise salvestamisel'
  })
}

Ülaltoodud funktsioone kasutades saame lisada kaks uut lubaduste edukäitlejat, et viia meie API lõpp-punkt lõpule. Peame tagastama getPathi esimesest lubaduste käitlejast, mis lahendab kordumatu URL-i lühikoodi. SaveRedirecti tagastamine ümbersuunamisobjektiga, mis on loodud selle kordumatu lühikoodi abil, teises edukäitlejas, salvestab objekti S3-ämbrisse. Selle objekti tee saab seejärel API-vastuse osana kliendile tagasi saata. Meie koerajuht peaks nüüd täielik olema.

module.exports.handle = (sündmus, kontekst, tagasihelistamine) => {
  lase longUrl = JSON.parse (sündmus.keha) .url || ''
  valideerima (longUrl)
    . seejärel (funktsioon () {
      tagasi getPath ()
    })
    . seejärel (funktsioon (tee) {
      lase suunata = buildRedirect (tee, longUrl)
      tagastama saveRedirect (ümbersuunamine)
    })
    . seejärel (funktsioon (tee) {
      lase vastus = buildResponse (200, 'edu', tee)
      return Promise.resolve (vastus)
    })
    .catch (funktsioon (ekslik) {
      lase vastus = buildResponse (err.statusCode, err.message)
      return Promise.resolve (vastus)
    })
    . seejärel (funktsioon (vastus) {
      tagasihelistamine (null, vastus)
    })
}

Juurutage API

Käivitage oma terminalis serveriteta juurutamine API juurutamiseks AWS-i. See seadistab meie S3 kopa ja tagastab lõpp-punkti URL-i. Hoidke näitaja URL käepärast, kuna seda vajame hiljem.

Serverita: pakenditeenus ...
Serverita: arendussõltuvuste välistamine ...
Serverita: CloudFormation-faili üleslaadimine S3-sse ...
Serverita: artefaktide üleslaadimine ...
Serverita: teenuse ZIP-faili üleslaadimine S3-sse (5,44 MB) ...
Serverita: malli kontrollimine ...
Serverita: virna värskendamine ...
Serverita: korstna värskenduse käigu kontrollimine ...
..............
Serverita: virna värskendus on lõpetatud ...
Teeninduse teave
teenus: serverless-url-shortener
etapp: dev
piirkond: eu-lääs-1
pinu: serverless-url-shortener-dev
api võtmed:
  Puudub
lõpp-punktid:
  POST - https://t2fgbcl26h.execute-api.eu-west-1.amazonaws.com/dev/
funktsioonid:
  pood: serverless-url-shortener-dev-store
Serverita: vanade teenusversioonide eemaldamine ...

Esipaneeli loomine

Esipinna kujunduse abistamiseks kasutame PaperCSS raamistikku. Haarame ka jQuery, et lihtsustada DOM-iga töötamist ja AJAX-i päringute tegemist. Väärib märkimist, et tootmiskeskkonna jaoks tahaksite arvatavasti tõmmata kaks kergemat sõltuvust, kuid kuna see on vaid õpetus, on see minu arvates vastuvõetav.

Looge staatiline kaust, nii et meil oleks kuskil oma esikoodi salvestada.

Laadige sõltuvused alla

Salvestage paper.min.css ja jquery-3.2.1.min.js koopia meie vastloodud staatilisse kausta - need on vastavalt PaperCSS raamistiku ja jQuery teegi miniteeritud versioonid.

Lisage HTML

Looge staatilises kaustas uus fail nimega index.html ja lisage vajalik HTML. Vormi esitamiseks vajame URL-i sisestamise ja nupuga vormi. Peame kuskile panema ka kõigi API-kõnede tulemused, mis eduka API-kõne puhul oleks lühendatud URL ja ebaõnnestunud API-kõne puhul see veateade.




  
  
   Serverivaba URL-i lühendaja 
  


  * {
    teksti joondamine: keskel;
  }
  #mess {
    kuva: puudub;
  }


  
    
      

Serverita URL-i lühendaja

               
                              
        
                      

                   Vaadake seda projekti Githubis                

    
  

Ehkki ülaltoodud koodiplokis seda lühiduse tõttu ei näidata, määrake kindlasti vormi toiminguks API lõpp-punkt, mis kuvati serverivaba juurutamise ajal. Kui te ei saanud selle juurutamise kaudu enam juurdepääsu oma terminaliväljundile, saate lõpp-punkti URL-i teada serverivaba teabe käsu kaudu.

Tehke API-taotlusi

Enne JavaScripti kirjutamist meie API-le päringute tegemiseks laadige esmalt jQuery, lisades skriptisildi vahetult enne ja viidates eelnevalt alla laaditud minifailile.

Nüüd lisage veel üks paar skriptisilte all ja sees. Loome funktsiooni, mida saab kasutada kasutajale sõnumi kuvamiseks, kasutades meie malli sõnumit div, mis on seatud kuvama: lehe laadimisel pole vaikimisi ühtegi. Sõnumi kuvamiseks saame selle jaotise teksti teksti () abil lihtsalt sättida ja kuva kuva () abil ümber lülitada.


  funktsioon addMessage (tekst) {
    $ ('# teade'). tekst (tekst) .show ()
  }

Kirjutame veel ühe funktsiooni, et minna samasse skriptisiltide komplekti, mis kasutab jQuery abil meie API-le päringuid.

funktsioon shortenLink (apiUrl, longUrl) {
  $ .ajax (apiUrl, {
    tüüp: 'POST',
    andmed: JSON.stringify ({url: longUrl})})
    .done (funktsioon (responseJSON) {
      var Protocol = window.location.protocol + '//'
      var host = window.location.host + '/'
      var shortUrl = protokoll + host + vastusJSON.path
      addMessage (lühikeUrl)
    })
    .fail (funktsioon (andmed) {
      if (data.status === 400) {
        addMessage (data.responseJSON.message)
      } veel {
        addMessage ('ilmnes ootamatu tõrge')
      }
    })
}

See funktsioon loob POST-i päringu ja seab päringu sisu JSON-i objektile, mis sisaldab URL-i lühendamiseks. Kui päring õnnestus edukalt ja HTTP 2XX-i olekukood tagastati, haarab see vastuse teevõtmelt lühinumbri ja loob täielikult kvalifitseeritud lühikese URL-i, mille kasutaja saab kasutada varem loodud funktsiooni addMessage abil. Kui päring ebaõnnestus, kuvatakse tõrketeade.

Lõpuks saame selle oma vormi külge siduda, lisades edastamise käitleja. Saame API-tulemusnäitaja URL-i vormi atribuudilt ja URL-i vormi sisestusest lühendame.

$ ('vorm'). Submit (funktsioon (sündmus) {
  event.preventDefault ()
  addMessage ('...')
  shortenLink (sündmus.target.reaktsioon, sündmus.target.url.väärtus)
})

Juurutage veebisait

Veebisaidi juurutamiseks kasutame staatilise kausta sisu üleslaadimiseks meie S3 ämbrisse AWS CLI sünkroonimiskäsku. Käivitage oma terminalis aws s3 sync static s3: // [bucket], asendades [bucket] oma ämbri nimega, mis on valitud konfig.json. Pärast selle lõpulejõudmist peaksite saama brauseris suunata S3 ämbri aadressile, et näha URL-i lühendajat töös. S3-ämbrite avalikud URL-id on järgmisel kujul.

http: // [ämber] .s3-veebisait- [piirkond] .amazonaws.com

Nii et pärast kopa nime ja piirkonna lisamist peaks teie URL-i lühendaja aadress välja nägema sarnane allolevaga.

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

Kohandatud domeeni lisamiseks oma ämbrisse peaksite järgima ühte selle AWS-i tugiartikli juhistest. Lihtsaima valiku jaoks peaksite määrama kopa nime oma domeeni www alamdomeeniks (näiteks www.example.com). Kui lisate seejärel alamdomeeni DNS-i konfiguratsiooni CNAME-kirje ja seate selle oma S3 kopaadressile, peaks veebisait olema juurdepääsetav teie domeeni kaudu. Eemaldage kindlasti ka kõik olemasolevad A-kirjed ja pidage meeles, et see ei seadista teie juurdomeenist ümbersuunamist alamdomeeni www. Selle lahendamiseks on paar võimalust, mida on kirjeldatud AWS-i artiklis.

Tõmba otsad kokku

Loodetavasti leidsite selle õpetuse kasulikuks. Reaalsus on see, et AWS on uskumatult paindlik ja selles artiklis tutvustasime vaid ühte viisi, kuidas saate Lambda ja S3 abil luua URL-i lühendaja. Kuid sama protsessi oleks võinud läbi viia ka mitmel muul viisil.

Kui leiate selle huvitava, võiksite nautida ühte minu eelmist artiklit, kus lõin vormi edastamise teenuse AWS Lambda abil.