AWS Lambda və S3 ilə serversiz URL qısaltması necə yaradılır

SAP Scenes Pack-dan qrafika istifadə edin

Bu yazıda Amazon Web Services (AWS) Lambda və S3 istifadə edərək serversiz bir URL qısaldıcı yaradacağıq. AWS haqqında əvvəlcədən biliklərə ehtiyacınız olmasa da, ES6 JavaScript və Node.j ilə tanış olduğunuzu düşünürəm.

Qəribə bir şəkildə, URL qısaldıcımız tərəfindən yaradılan URL'lər, yönləndirildikləri URL-lərdən daha çox olur. Bunun səbəbi, standart S3 bucket veb saytından istifadə etməyimizdir. Yazının sonuna yaxın bu məhdudiyyəti keçmək üçün xüsusi bir domen əlavə edə biləcəyinizi izah edəcəyəm.

Demoya baxın

Github koduna baxın

AWS ilə başlamaq nisbətən asandır, lakin bir az mürəkkəblik qəbul olunur. Mövcud xidmətlərin sayı, bir çoxunun funksionallığı ilə üst-üstə düşdüyü üçün qorxunc ola bilər. Yavaş və qeyri-adi AWS İdarəetmə Konsolu kömək etmir və mətn sıxlığı olan onlayn sənədlər də kömək etmir. Bununla birlikdə, bu yazıda AWS xidmətlərini təqdim etməyin ən yaxşı yolunun artan bir yanaşma olduğunu və əvvəlcə yalnız bir ovuc xidmətdən istifadə edə biləcəyinizi göstərmək istəyirəm.

AWS ilə əlaqə qurmaq üçün Serverless Framework istifadə edirik, beləliklə AWS İdarəetmə Konsoluna daxil olmağınıza ehtiyac yoxdur. Serversiz çərçivə AWS vasitəsilə bir abstraksiya təklif edir və layihə strukturlarını və faydalı konfiqurasiya standartlarını təmin etməyə kömək edir. Başlamadan əvvəl daha çox öyrənmək istəyirsinizsə, əlaqədar sənədləri oxuduğunuzdan əmin olun.

Memarlıq

İnkişafa başlamazdan əvvəl əvvəlcə URL qısaldıcımızı yaratmaq üçün istifadə etdiyimiz AWS xidmətlərinə nəzər salaq.

Veb saytımızı yerləşdirmək üçün Amazon S3 fayl saxlama xidmətindən istifadə edirik. Ən yüksək səviyyəli bir qovluq kimi qəbul edilə bilən S3 çömçəmizi statik bir veb səhifəyə təqdim etmək üçün konfiqurasiya edəcəyik. Veb sayt statik məzmundan və müştəri tərəfindəki skriptlərdən ibarətdir. Server tərəfindəki kodu (məsələn, PHP, Ruby və ya Java) çalıştırmanın bir yolu yoxdur, amma istifadə vəziyyətimizdə yaxşıdır.

S3-in az bilinən bir xüsusiyyətini də istifadə edəcəyik ki, bu da obyektin metaməlumatına bir veb sayt yönləndirmə yeri dəyəri əlavə edərək S3 vedrələrindəki obyektlər üçün yönləndirmə qurmağa imkan verir. Bunun bir URL olaraq qurulması brauzerləri HTTP 301 cavabı və yer başlığı vasitəsilə yönləndirəcəkdir.

Bir S3 obyektinin URL'si S3 bucket ünvanı və obyektin adından ibarətdir.

http: // [bucket name] .s3-website-EU-West-1.amazonaws.com / [object name]

Aşağıdakı nümunə, ab-qərb-1 bölgəsi üçün bir S3 bucket obyektinin formatını göstərir.

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

Yuxarıdakı nümunədəki URL-nin sonunda bu obyekt adı "6GpLcdl" qısaldılmış URL-lərimiz üçün qısa kod olur. Bu xüsusiyyət ilə yerli url yönləndirməsini və saxlama imkanlarını əldə edirik. URL-nin hansı sürətli yığma nöqtələrinin təfərrüatlarını saxlaya bilməsi üçün bir verilənlər bazasına ehtiyacımız yoxdur, çünki bu məlumatlar obyektin özündə saxlanılır.

Bu S3 obyektlərini S3 vedrəmizdəki müvafiq metadata ilə saxlamaq üçün Lambda funksiyası yaradacağıq.

Alternativ olaraq, obyektləri saxlamaq üçün brauzerdəki AWS SDK müştəri səhifəsindən istifadə edə bilərsiniz. Bununla birlikdə, bu funksiyanı ayrı bir xidmət halına gətirmək daha yaxşıdır. Təhlükəsizlik etimadnamələrini görmək barədə narahat olma ehtiyacını ortadan qaldırmaq faydası var və gələcəkdə daha genişlənə bilər. Lambda funksiyasını API çağrısı ilə əldə edilə bilməsi üçün API keçidindəki son nöqtəyə uyğunlaşdırırıq.

Hazır olun

Serverless Framework sənədlərini ziyarət edin və sürətli başlanğıc təlimatını oxuyun. Quraşdırma prosesinin bir hissəsi olaraq AWS CLI-ni quraşdırmalı və AWS etimadnamənizi konfiqurasiya etməlisiniz.

Əvvəlcə layihənin kök qovluğunda pack.json faylı yaradın.

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

AWS SDK-nı istifadə etməli olduğumuzu bilirik. İndi aşağıdakı əmri yazaraq NPM-dən quraşdırın.

npm quraşdırma aws-sdk - saxla

İndi layihə kökündə də config.json faylı yaradın. Bununla, özelleştirilebilir istifadəçi seçimlərini JSON formatında saxlayırıq.

Aşağıdakı düymələri quraşdırma ilə uyğun dəyərlərlə əlavə edin.

  • BUKET - S3 vedrəniz üçün istifadə etmək istədiyiniz ad. Xüsusi bir domen əlavə etmirsinizsə, bu qısa url-in bir hissəsi olur. Çox ümumi seçməməyiniz üçün təmin etdiyiniz bölgəyə xas olmalıdır. Ancaq narahat olmayın, seçdiyiniz vedrə adı artıq istifadə olunarsa, serversiz CLI vasitəsilə yerləşdirərkən xəbərdarlıq ediləcəksiniz.
  • REGION - Yerləşdirmək istədiyiniz AWS Bölgəsi. Performans səbəblərindən istifadəçilərinizə ən yaxın bölgəni seçmək ən yaxşısıdır. Yalnız təlimatı təqib etsəniz, mən eu-west-1 istifadə edəcəyəm.
  • STAGE - tətbiq ediləcək mərhələ. Tipik olaraq, istehsal mühitinizlə eyni konfiqurasiyanı təkrarlayan bir quruluş mühitiniz var. Bu, proqram buraxılışlarını məhv etmədən test etməyə imkan verir. Bu təlimat olduğundan inkişaf mərhələsində təqdim edəcəyəm.

Config.json dosyanız tamamlandıqda buna bənzər bir şey görünməlidir.

{"BUCKET": "your-bucket name", "REGION": "eu-west-1", "STAGE": "dev",}

Sonra, proyekt kökündə başqa bir fayl yaradın, serverless.yml. Bu, YAML biçimlendirme dilində formatlanmış Serverless Framework konfiqurasiyamızı ehtiva edəcəkdir.

Bu sənəddə əvvəlcə ətrafımızı təyin edirik. Əvvəllər config.json-da qeyd olunan dəyişənlərə necə müraciət edə biləcəyimizə diqqət yetirin.

xidmət: serverless-url-shortener Təchizatçı: Ad: aws Runtime: nodejs6.10 mərhələ: $ {file (config.json): STAGE} region: $ {file (config.json): REGION} iamRoleStatements: - Effekt: Fəaliyyətə icazə verin : - s3: PutObject Resurs: "arn: aws: s3 ::: $ {file (config.json): BUCKET} / *"

İamRoleStatements bölməsi, Lambda icazələrini qurmaq üçün istifadə olunan Kimlik və Giriş İdarəetmə ilə əlaqədardır. Burada Lambda-ya S3 kovamıza yazma imkanı veririk.

Obyektləri xilas etmək üçün s3: PutObject əməliyyatını icra etmək üçün icazəyə ehtiyacımız var. Layihəniz üçün tələb olunarsa, digər icazələr buraya əlavə edilə bilər. Mövcud digər tədbirlər üçün S3 sənədlərinə baxın.

Resurs dəyəri, müəyyən bir AWS qaynağını unikal şəkildə müəyyənləşdirmək üçün istifadə olunan S3 vedrənin Amazon qaynaq adına qoyulur. Bu identifikatorun formatı istinad olunan AWS xidmətindən asılıdır. Lakin ümumiyyətlə aşağıdakı formata malikdirlər.

arn: bölüm: xidmət: bölgə: hesab id: mənbə

Təchizatçı altında funksiya konfiqurasiyamızı əlavə edin.

Funksiyalar: iş: işləyici: api.handle hadisələri: - http: yol: / metod: post cors: true

Burada API konfiqurasiyasını təyin edirik və Lambda-nı API-nin əsas URL-i altında bir HTTP POST hadisəsinə təyin edirik. "Api.handle" dəyəri olan işləyici "api.js" dən ixrac olunan "tutacaq" adlı bir funksiyaya istinad edir.

Lambda hadisə əsaslı olduğundan, funksiyalar yalnız əvvəlcədən təyin edilmiş tetikleyicilərə əsaslanaraq icra olunur. Burada bir HTTP hadisəsi təyin etdik, ancaq bu da bir DynamoDB cədvəli və ya bir SQS növbəsi tərəfindən tetiklenen bir hadisə ola bilər.

Sonra, CloudFormation ilə yerləşdirildikdə bizim üçün hazırlanmalı olan serverless.yml-də AWS qaynaqlarını təyin edirik. Qeyd etmək lazımdır ki, resursları bu şəkildə qurmaq məcburiyyətində deyilsiniz, bunları yaratmaq üçün AWS İdarəetmə Konsolundan istifadə edə bilərsiniz. Doğru giriş icazələri ilə, qaynaqların necə yaradılmasının əhəmiyyəti yoxdur. Bununla yanaşı, serverless.yml-də ehtiyac duyduğunuz xidmətləri müəyyənləşdirdiyiniz zaman "infrastrukturunuzu kod kimi" müəyyənləşdirir və bu müddətdə bir sıra üstünlüklər əldə edirsiniz.

“Kod kimi infrastruktur, kompüter və şəbəkə infrastrukturunu mənbə kodu vasitəsi ilə müəyyənləşdirmək üçün bir yanaşmadır və daha sonra hər hansı bir proqram sistemi kimi qəbul edilə bilər. Bu kod, sınaq tətbiqetmələrinə və ContinuousDelivery-in tam intizamına tabe olması şərtilə, dinlənilə bilənlik və təkrarlana bilən quruluşlar üçün mənbə nəzarətində saxlanıla bilər. "
- Martin Fowler

Davam edin və resurs konfiqurasiyasını əlavə edin.

Resurslar: Resources: ServerlessRedirectS3Bucket: Type: AWS :: S3 :: Bucket Properties: BucketName: $ {file (config.json): BUCKET} AccessControl: PublicRead Website Configuration: IndexDocument: index.html ServerlessRedirectS3BucketPolicy: Enter: AWS :: S3 :: BucketPolicy Xüsusiyyətləri: Kova: $ {file (config.json): BUCKET} Siyasət sənədi: Bəyanat: - Fəaliyyət: - s3: GetObject Təsiri: Resurs İcazə Verin: - arn: aws: s3 ::: $ {file ( config.json): BUCKET} / * Direktor: "*"

Kök sənəd olaraq index.html ilə statik sayt barmağından istifadə etmək üçün konfiqurasiya edilmiş bir S3 bucket mənbəyi tələb edirik. S3 buketler yaxşı bir səbəbə görə varsayılan olaraq özəldir. Beləliklə, ictimaiyyətin ona girişinə imkan verəcək bir S3 bucket siyasətini yaratmalıyıq. Bu siyasət olmadan veb sayt ziyarətçiləri təsdiqlənməmiş bir səhv mesajı alacaqlar.

API qurun

Lambda funksiyamız dörd şeyi edir.

  1. İstifadəçinin formasından qısaltmaq üçün URL alın.
  2. URL üçün unikal bir qısa kod yaradın.
  3. Müvafiq dönmə obyektini S3-də saxlayın.
  4. Müştəriyə obyektin yolunu qaytarın.

İşləyicini yaradın

Api.js adlı yeni bir fayl yaradın və üç arqument götürən sap adlı bir ox funksiyası ixrac edin: hadisə, kontekst və geri çağırış. Bunlar işləyici çağırıldıqda AWS tərəfindən təmin edilir. Bu fayl Node.js skriptidir. Ok funksiyasını ixrac etmək üçün onu module.exports-a əlavə etməlisiniz.

module.exports.handle = (hadisə, kontekst, geri zəng) => {
}

Bu işləyici son nöqtəyə bir HTTP POST istəyi göndərildikdə çağırılır. API cavabını qaytarmaq üçün təqdim edilmiş geri çağırma funksiyasını üçüncü ox funksiyası arqumenti kimi istifadə etməlisiniz. İki arqument tələb edən ilk səhvdən sonra geri çağırma. Sorğu uğurla başa çatdıqda, ilk dəlil kimi sıfır qəbul edilməlidir. İkinci arqument kimi ötürülən cavab obyekti istifadəçiyə qaytarılacaq cavab növünü təyin edir. Cavab yaratmaq, aşağıdakı nümunədə göstərildiyi kimi statusCode və bədən təmin etmək qədər sadədir.

const response = {statusCode: 201, body: JSON.stringify ({"shortUrl": "http://example.com"})}
Geri zəng (sıfır, cavab)

İşləyiciyə ikinci arqument kimi ötürülən kontekst obyekti bu təlim üçün daxil olmağımız lazım olmayan iş vaxtı məlumatlarını ehtiva edir. Lakin qısaldılacaq URL ilə forma təqdimatını ehtiva etdiyi üçün ilk arqument kimi qəbul edilmiş hadisəni istifadə etməliyik.

İstəyi təhlil edin

Aşağıdakı bir istifadəçi forma təqdim edərkən işləyicimizə ötürülən bir API Gateway hadisəsinə bir nümunədir. URL qısaldıcımızı tək tərəfli bir tətbiq olaraq yaratdığımız üçün formanı JavaScript istifadə edərək təqdim edəcəyik. Bu səbəbdən, məzmun növü application / json və application / x-www-form-urlencoded deyil.

{Resurs: '/', Yol: '/', httpMethod: 'POST', Başlıqlar: {Qəbul et: '* / *', 'Qəbul-Kodlama': 'gzip, deflate', 'cache-control': 'yox -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:' ' , 'İstifadəçi-Agent': '', 'X-Amz-Cf-Id': '', 'X-Amzn-Trace-ID': '', 'X-Forwarded-For': '', 'X- Yönləndirilmiş Port ':' 443 ',' X-Yönləndirilmiş Proto ':' https '}, queryStringParameters: null, pathParameters: {}, stageVariables: null, requestContext: {Path:' / dev ', accountId:' ', resourceId: '', mərhələ: 'dev', istək ID: '', şəxsiyyət: {ognitoIdentityPoolId: null, accountId: null ,ognitoIdentityId: null, zəng edən: null, API açarı: '', mənbə IP: '', accessKey: null ,ognitoAuthenticationType: null ,ognitoAuthenticationProvider: null, userArn: null, user agent: '', user: null}, resourcePath: '/', httpMethod: 'POST', apiId: ''}, gövdə: '{"url": "http://example.com"}', isBase64Encoded: false}

Sadəcə, tələbə baxdığımızda tədbirdən aldığımız formadır. İstək mətni, işləyicimizə JSON.parse () ilə müraciət edə biləcəyimiz bir simli JavaScript obyekti kimi saxlanılır. JavaScript qısa qapanma qiymətləndirməsindən istifadə edərək URL-in forma təqdim edilməsinin bir hissəsi kimi təqdim edilmədiyi hallar üçün boş bir simli üçün standart dəyəri təyin edə bilərik. Bu, URL-in itkin olduğu və URL-in boş bir simli olduğu halları eyni dərəcədə müalicə etməyə imkan verir.

module.exports.handle = (hadisə, kontekst, geri çağırış) => {let longUrl = JSON.parse (event.body) .url || ''}

Url yoxlayın

Təqdim olunan URL-in qanuni olduğunu təsdiqləmək üçün əsas doğrulama əlavə edin. Buna nail olmaq üçün bir neçə yanaşma var. Bununla birlikdə, bu təlimat onu sadə saxlayacaq və daxili URL modulu Node.js.-dan istifadə edəcəkdir. Doğrulamamızı etibarlı bir URL-də həll edilmiş bir vəd və etibarsız bir URL-də rədd edilmiş bir vədi qaytarmaq üçün quracağıq. JavaScript-dəki vədlər ardıcıl olaraq zəncirləndirilə bilər ki, bir vədin qərarı sonrakı uğur işləyicisinə ötürülsün. İşləyicimizi qurmaq üçün bu vəd atributundan istifadə edəcəyik. Təsdiqləmə funksiyasını vədlərlə yazaq.

const url = tələb ('url')
Funksiya təsdiqlənir (longUrl) {if (longUrl === '') {return Promise.reject ({statusCode: 400, mesaj: 'URL tələb olunur'})}
parsedUrl = url.parse (longUrl) if (parsedUrl.protocol === null || parsedUrl.host === null) {return Promise.reject ({statusCode: 400, mesaj: 'URL səhvdir'})}
qayıt Promise.resolve (longUrl)}

Doğrulama funksiyamızda əvvəlcə URL-in boş bir sətrə qoyulmadığını yoxlayırıq. Bu vəziyyətdə rədd edilmiş bir vədi qaytaracağıq. Rədd edilmiş dəyərin vəziyyət kodu və mesajı olan bir obyekt olduğunu unutmayın. Müvafiq bir API cavabı yaratmaq üçün bundan sonra istifadə edəcəyik. Node.js URL modulunda ayrıştırmaya zəng vurmaq, sətir arqumenti kimi ötürülən URL-dən çıxarıla bilən məlumatlarla bir URL obyektini qaytarır. Əsas URL doğrulamamızın bir hissəsi olaraq, yalnız bir protokolun (məsələn, "http") və bir hostun (məsələn, "example.com") çıxarılmasını yoxlayırıq. Bu dəyərlərdən biri qaytarılmış URL obyekti üçün boşdursa, URL-in etibarsız olduğu qəbul edilir. URL etibarlıdırsa, verilmiş bir vədin bir hissəsi olaraq geri göndərəcəyik.

Cavabı geri göndər

İstəkdən URL aldıqdan sonra, tələb olunan hər bir əlavə işləyici addımı üçün əvvəlki öhdəliyin müvəffəqiyyət işləyicisində yeni bir öhdəliyi təsdiqləyirik və qaytarırıq. Son müvəffəqiyyət işləyicisi sapı geri çağırma arqumenti vasitəsilə API cavabını qaytarmağa cavabdehdir. Rədd edilmiş vədlərdən və uğurlu API cavablarından yaranan həm səhv API cavabları üçün çağırılır.

module.exports.handle = (hadisə, kontekst, geri çağırış) => {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 (cavab)}). sonra (funksiya (cavab) {geri çağırış (sıfır, cavab)})}
Funksiya buildResponse (statusCode, message, path = false) {let body = {message} if (path) body ['path'] = path return {başlıqlar: {'Access-Control-Allow-Origin': '*'}, statusCode: statusCode, gövdə: JSON.stringify (gövdə)}}

URL qısa kodu yaradın

API, S3 bucket-də fayl adları kimi təmsil olunan unikal URL qısa kodları yarada bilməli. Qısa kod yalnız bir fayl adı olduğundan, tərkibi son dərəcə çevikdir. Qısa kodumuz üçün həm böyük, həm də kiçik hərflərdən ibarət 7 rəqəmli əlifba və rəqəmdən istifadə edirik. Bu, hər bir xarakter üçün 62 mümkün kombinasiyaya uyğundur. Yeddi seçilənə qədər hər bir simvol seçərək qısa kodu yaratmaq üçün rekursiyadan istifadə edəcəyik.

GeneratePath funksiyası (yol = '') {let characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789' let position = Math.floor (Math.random () * characters.length) let character = characters.charAt (position)
əgər (path.length === 7) {geri qayıt}
Returns generatePath (yol + simvol)}

Eyni qısa kodun təsadüfən yaranma şansı az olsa da (əslində iki qısa kodun eyni olması ehtimalı var, biri 0.0000000000000000000000008063365516), yaradılan qısa kodun artıq istifadə olunduğunu yoxlamaq lazımdır. Bunu AWS SDK ilə edə bilərik. S3 xidmətində bir obyektin meta məlumatlarını yükləmək üçün istifadə olunan bir headObject metodu var. Bununla eyni adlı bir obyektin artıq mövcud olub olmadığını yoxlaya bilərik. Bir obyekt üçün "NotFound" kodu ilə bir söz tapılmadıqda, rədd ediləcəkdir. Bu rədd edilmiş söz, qısa kodun pulsuz olduğunu və istifadə edilə biləcəyini göstərir. HeadObject-ə zəng etmək, obyektin bütün obyekti yükləyən getObject vasitəsilə mövcud olub olmadığını yoxlamaqdan daha effektivdir.

const AWS = tələb ('aws-sdk') const S3 = yeni AWS.S3 ()
Funksiya isPathFree (yol) {qayıt S3.headObject (buildRedirect (yol)). word () .then (() => Promise.resolve (false)) .catch (function (err) {if (err.code == 'NotFound') {return Promise.resolve (true)} else {return Promise). rədd et (səhv)}})}
BuildRedirect funksiyası (yol, longUrl = yalan) {let redirect = {'Bucket': config.BUCKET, 'key': path}
if (longUrl) {redirect ['WebsiteRedirectLocation'] = longUrl}
Geri yönləndirmə}

Rekursiv şəkildə unikal bir obyekt yolunu tapmaq üçün isPathFree istifadə edə bilərik.

GetPath () funksiyası {yeni vəd qaytar (funksiya (həll et, rədd et) {let path = generatePath () isPathFree (path) .then (function (isFree)) return isFree? Resolve (path): həll (getPath ())}) })}

Vədləri birləşdirmək qabiliyyətindən istifadə edərək, isPathFree yalnış qayıtdıqda getPath-a yeni bir zəng göndəririk.

Bənzərsiz bir qısa kod tapıldıqdan sonra bir obyekt saxlamaq üçün AWS SDK S3 xidmətindəki putObject metodunu çağırmalıyıq. PutObject metoduna edilən zəng müvəffəq olduqda qısa kodu həll edən və çatmadıqda API reaksiyası yaratmaq üçün bir səhv obyektini qaytaran bir funksiyaya bağlayaq.

SaveRedirect (yönləndirmə) funksiyası {return S3.putObject (redirect) .promise () .then (() => Promise.resolve (redirect ['Key']))) .catch (() => Promise.reject ({statusCode: 500, mesaj: "Yenidən yönləndirməni saxlama xətası"})}

Yuxarıdakı xüsusiyyətlərdən istifadə edərək API son nöqtəmizi dəqiqləşdirmək üçün iki yeni vəd uğuru işləyicisi əlavə edə bilərik. Benzersiz bir URL qısa kodunu həll edən ilk Promise Uğur İşleyicisindən getPath'ı qaytarmalıyıq. SaveRedirect-i ikinci müvəffəqiyyət işləyicisindəki bu bənzərsiz qısa koddan istifadə edərək yaradılmış bir yönləndirmə obyekti ilə qaytararsanız, obyekt S3 vedrəsində qeyd olunur. Bu obyektin yolu daha sonra API cavabının bir hissəsi kimi müştəriyə qaytarıla bilər. İşləyicimiz artıq tam olmalıdır.

module.exports.handle = (hadisə, kontekst, geri çağırış) => {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, 'success', path) return Promise.resolve (response)}) .catch (function (err) {let response = buildResponse (err.statusCode, err.message) return Promise.resolve (response sonra) (funksiya (cavab) {geri zəng (sıfır, cavab)})}

API yerləşdirin

API-ni AWS-ə yerləşdirmək üçün terminalınızda serversiz yerləşdirməni işə salın. Bu, S3 çömçəmizi quracaq və son nöqtənin URL-sini qaytaracaqdır. Son nöqtənin URL-ini daha sonra ehtiyacımız olduğu üçün hazırlayın.

Serversiz: qablaşdırma xidməti ... Server olmadan: inkişaf asılılığı olmadan ... server olmadan: CloudFormation faylı S3-ə yüklənir ... server olmadan: əsərlər yüklənir ... server olmadan: xidmət poçt faylı S3-ə yüklənir (5-ci , 44 MB) ... Server olmadan: Şablon yoxlanılır ... Serversiz: Yığın yenilənir ... Serversiz: Toplu yeniləmənin gedişi yoxlanılır ... .............. Serversiz: Yığın yeniləməsi bitdi ... Xidmət Məlumat xidməti: serverless-url-shortener Mərhələ: dev region: eu-west-1 stack: serverless-url-shortener-dev API açarı: Yoxdur Bitiş nöqtələri: POST - https: // t2fgbcl26h. execute-api.eu-west-1.amazonaws.com/dev/ functions: save: serverless-url-shortener-dev-store serverless: köhnə xidmət versiyaları silinəcək ...

Ön ucunu yaradın

Ön dizaynı dəstəkləmək üçün PaperCSS çərçivəsini istifadə edirik. DOM ilə işləməyi və AJAX sorğularını asanlaşdırmaq üçün jQuery-dən də istifadə edirik. Qeyd etmək lazımdır ki, bir istehsal mühiti üçün, ehtimal ki, daha yüngül iki asılılıq daxil etmək istərdiniz, ancaq bu yalnız bir təlimat olduğundan, bunun məqbul olduğunu düşünürəm.

Statik bir qovluq yaradın ki, ön kodumuzu bir yerdə saxlaya bilək.

Asılılıqları yükləyin

Paper.min.css və jquery-3.2.1.min.js surətini yeni yaradılan statik qovluğumuza yazın. Bunlar PaperCSS çərçivəsinin və ya jQuery kitabxanasının miniatür versiyalarıdır.

HTML əlavə edin

Statik qovluğa index.html adlı yeni bir fayl yaradın və lazımi HTML kodunu əlavə edin. Url girişi olan bir forma və formanı təqdim etmək üçün bir düyməyə ehtiyacımız var. API çağırışlarının nəticəsini bir yerdə saxlamalıyıq, bu da uğurlu bir API çağırışı üçün qısaldılmış URL və uğursuz bir API çağırışı üçün səhv mesajı olacaqdır.

Serversiz URL qısaldıcısı </ title> <link href = "paper.min.css" rel = "stylesheet"> </ head> <style> * {Text alignment: middle; }</pre><pre>#Message {display: none; } Serversiz url qısaldıcı <label for = "url">Qısaldılacaq URL daxil edin</label> <a href="https://git.io/vbS8I">Bu layihəni Github-da nəzərdən keçirin</a></pre><p>Formasızlığı yuxarıdakı kod blokunda sadalanmasa da, serversiz yerləşdirməni çalıştırdığınız zaman göstərilən API son nöqtəsinə uyğunlaşdırdığınızdan əmin olun. Bu yerləşdirmə vasitəsi ilə terminal çıxışınıza artıq girişiniz yoxdursa, son nöqtə URL'sini serversiz məlumat əmri ilə təyin edə bilərsiniz.</p><h4>API tələbləri edin</h4><p>API-yə dərhal bir skript etiketi qoyaraq sorğu göndərmək üçün JavaScript yazmadan əvvəl jQuery yükləyin və əvvəllər endirilmiş minimallaşdırılmış sənədə müraciət edin.</p><pre><script src = "jquery-3.2.1.min.js"> </ script></pre><p>İndi altına başqa bir cüt skript etiketi əlavə edin və istifadəçiyə mesaj göstərmək üçün istifadə edilə bilən bir funksiya yaradın. Bunu etmək üçün şablon yüklənəndə səhifə yüklənəndə standart olaraq "Yox" olaraq təyin olunan div mesajını istifadə edin. Bir mesajı göstərmək üçün sadəcə bu divdəki mətni () ilə mətn qura və ekranı show () ilə dəyişə bilərik.</p><pre><script>
  Funktion addMessage (Text) {
    $ ('# message'). text (text) .show ()
  }
</ script></pre><p>JQuery-nin API-yə sorğu vermək üçün istifadə etdiyi eyni skript etiketlərini ehtiva edən başqa bir funksiya yazaq.</p><pre>Funksiya ShortLink (apiUrl, longUrl) {$ .ajax (apiUrl, {type: "POST", data: JSON.stringify ({url: longUrl})}) .done (function (responseJSON) {varocol = window.location. protokol + '//' var host = window.location.host + '/' var shortUrl = protokol + host + responseJSON.path addMessage (shortUrl)}). uğursuz (funksiya (məlumat) {if (data.status === 400) {addMessage (data.responseJSON.message)} başqa {addMessage ('gözlənilməz səhv baş verdi')}})}</pre><p>Bu funksiya bir POST istəyi yaradır və sorğu gövdəsini qısaldılacaq URL-i ehtiva edən bir JSON obyektinə qoyur. İstək uğurla başa çatdıqda və bir HTTP 2XX vəziyyət kodu qaytarıldıqda, qısa kod cavabdakı yol düyməsindən alınır və əvvəllər yaradılmış addMessage funksiyasından istifadə edərək istifadəçiyə təqdim olunan tam ixtisaslı qısa URL yaradılır. Sorğu alınmadısa, bir səhv mesajı görünəcəkdir.</p><p>Nəhayət, bir təqdimat işləyicisi əlavə edərək formumuza əlavə edə bilərik. API son nöqtəsi url forma fəaliyyət atributundan və url forma girişindən qısaltmaq üçün url-dən əldə edilir.</p><pre>$ ('form'). təqdim edin (function (event) {event.preventDefault () mesaj əlavə edin ('...') ShortenLink (event.target.action, event.target.url.value)})</pre><h4>Veb saytı yerləşdirin</h4><p>Veb saytının yerləşdirilməsi üçün statik qovluğun içindəkiləri S3 kovamıza yükləmək üçün AWS CLI senkronizasiya əmrini istifadə edirik. Terminalınızda aws s3 sync static s3: // [Bucket] düyməsini işə salın və config.json-da seçilmiş vedrə adınızla [Bucket] əvəz edin. Bu prosesi tamamladıqdan sonra URL qısaldıcısının fəaliyyətdə olduğunu görmək üçün brauzerdə S3 bucket adresinizə gedə bilməlisiniz. S3 paketləri üçün ümumi URL'lər aşağıdakı formanı alır.</p><pre>http: // [bucket] .s3-website- [region] .amazonaws.com</pre><p>Çömçə adınızı və bölgənizi əlavə etdikdən sonra URL qısaldıcı ünvanınız belə olmalıdır.</p><pre>http://serverless-url-shortener.s3-website-eu-west-1.amazonaws.com</pre><p>Kovanıza xüsusi bir domen əlavə etmək üçün bu AWS dəstək məqaləsindəki istiqamətlərdən birini izləyin. Ən sadə seçim üçün, vedrə adını etki alanınızın www alt domeninə (məsələn www.example.com) qoymalısınız. Daha sonra DNS konfiqurasiyanızda WWW alt domeni üçün bir CNAME qeydini əlavə edib S3 bucket adresinizə təyin etsəniz, veb saytınıza domeniniz vasitəsilə çatmaq lazımdır. Mövcud A qeydlərini də silin və bunun kök domeninizdən www alt domeninə yönləndirmə qurmayacağını unutmayın. Bunu AWS məqaləsində təsvir olunduğu kimi bir neçə yol var.</p><h3>Bükün</h3><p>Bu təlimatı faydalı tapdığınızı ümid edirəm. Reallıq budur ki, AWS inanılmaz dərəcədə çevikdir. Bu yazıda, URL qısaldıcısı yaratmaq üçün Lambda və S3-dən necə istifadə edə biləcəyinizin bir yolunu izah etdik. Bununla birlikdə, eyni prosesi həyata keçirə biləcək müxtəlif yollar var.</p><p>Əgər bu sizə maraqlı gəlsə, əvvəllər məqalələrimdən birini bəyənə bilərsiniz ki, AWS Lambda-dan forma təqdim etmə xidməti yaratmaq üçün istifadə etdim.</p></div><div class="neighbor-articles"><h4 class="ui header">Həmçinin bax</h4><a href="/question/how-to-end-a-phone-conversation/" title="bir telefon danışığını necə bitirmək olar">bir telefon danışığını necə bitirmək olar</a><a href="/question/how-to-lighten-jeans-with-salt/" title="cinsləri duzla necə yüngülləşdirmək olar">cinsləri duzla necə yüngülləşdirmək olar</a><a href="/question/how-to-say-unfortunately-in-french/" title="təəssüf ki, fransız dilində necə deyərlər">təəssüf ki, fransız dilində necə deyərlər</a><a href="/question/how-to-smoke-meth-off-foil/" title="necə folqa off meth çəkmək">necə folqa off meth çəkmək</a><a href="/question/how-to-reheat-a-casserole-from-the-fridge/" title="soyuducudan bir güveç necə qızdırılır">soyuducudan bir güveç necə qızdırılır</a><a href="/question/how-to-connect-two-monitors-to-one-dvr/" title="iki monitoru bir dvr-a necə bağlamaq olar">iki monitoru bir dvr-a necə bağlamaq olar</a><a href="/question/how-to-mix-olive-drab-paint/" title="zeytun zərif boya necə qarışdırılır">zeytun zərif boya necə qarışdırılır</a><a href="/question/how-to-make-textbox-transparent-in-word/" title="mətn qutusunu sözlə necə şəffaf etmək">mətn qutusunu sözlə necə şəffaf etmək</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Həmçinin bax</h4><a href="/article/how-to-convince-strangers-to-help-you-get-a-job-f29294/" title="Yadları iş tapmaq üçün necə inandırmaq olar">Yadları iş tapmaq üçün necə inandırmaq olar</a><a href="/article/does-facebook-even-know-how-to-control-facebook-a02f09/" title="Facebook hətta Facebook-a necə nəzarət edəcəyini bilirmi?">Facebook hətta Facebook-a necə nəzarət edəcəyini bilirmi?</a><a href="/article/how-to-prevent-burnout-in-the-workplace-aa2954/" title="İş yerində tükənmənin qarşısını necə almaq olar">İş yerində tükənmənin qarşısını necə almaq olar</a><a href="/article/flowchart-how-to-deal-with-rejection-db3cb4/" title="Akış şeması: İmtina ilə məşğul olmaq.">Akış şeması: İmtina ilə məşğul olmaq.</a><a href="/article/how-es6-classes-really-work-and-how-to-build-your-own-1a7d5a/" title="ES6 sinifləri həqiqətən necə işləyir və öz siniflərinizi necə qurursunuz">ES6 sinifləri həqiqətən necə işləyir və öz siniflərinizi necə qurursunuz</a><a href="/article/how-to-use-webgl-shaders-in-webassembly-ec0fb7/" title="WebGL kölgəldicilərin WebAssembly-də istifadəsi">WebGL kölgəldicilərin WebAssembly-də istifadəsi</a><a href="/article/requirement-analysis-how-to-use-this-startup-friendly-approach-a-case-study-2bcf59/" title="Tələblər Analizi: Bu Başlanğıc Dostu Yanaşma + Bir Tədqiqat istifadə">Tələblər Analizi: Bu Başlanğıc Dostu Yanaşma + Bir Tədqiqat istifadə</a><a href="/article/how-to-build-a-react-and-gatsby-powered-blog-in-about-10-minutes-608f8f/" title="Təxminən 10 dəqiqə ərzində reaksiya və Gatsby ilə işləyən bloq necə yaradılır">Təxminən 10 dəqiqə ərzində reaksiya və Gatsby ilə işləyən bloq necə yaradılır</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://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://ca.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://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>