වෙබ් යෙදුමක් ගොඩනැගීමේ ප්‍රධාන සංකල්ප පුහුණු වීම සඳහා අපි මෙහිදී Scratch නම් සරල සටහන් තබා ගැනීමේ යෙදුමක් නිර්මාණය කරන්නෙමු. කෙසේ නමුත්, වෙනත් නිබන්ධන මෙන් නොව අපගේ අරමුණ වන්නේ නිකුත් කිරීමට සුදුසු තත්වයේ සම්පූර්ණ අන්ත යෙදුමක් නිර්මාණය කිරීමට අවශ්‍ය වන්නේ මොනවද යන්න පිළිබඳ ගැඹුරින් සොයා බැලීමටයි.

සම්පූර්ණ කළ යෙදුම මේස පරිගණක තිරයකදී දිස්වන අයුරු දැක්වෙන තිර රූපය

සමපුර්ණ කළ යෙදුමේ ජංගම තිර රූපය

එය සම්පූර්ණයෙන් ම JavaScript වලින් රචිත, serverless යෙදුම් ක්‍රමලේඛ අතුරුමුහුණත් මඟින් බලගැන්වෙන තනි පිටුවේ යෙදුමකි. මෙහි ඉදිරි අන්තය සහ පසු අන්තය සඳහා සම්පූර්ණ කේතය අන්තර්ගත ය. එය සාපේක්ෂව සරල යෙදුමක් වන නමුත් අපි පහත අවශ්‍යතා සම්පූර්ණ කිරීමට බලාපොරොත්තු වන්නෙමු.

  • පරිශීලකයන්ට ලියාපදිංචි වීමට සහ තමන්ගේ ගිණුම්වලට පිවිසීමට ඉඩ දිය යුතුය.
  • පරිශීලකයන්ට කිසියම් අන්තර්ගතයක් සහිතව සටහන් නිර්මාණය කළ හැකි විය යුතුය.
  • සෑම සටහනකට ම උඩුගත කල ලේඛනයක්, ඇමුණුමක් ලෙස පැවතිය හැක.
  • පරිශීලකයන්ට තම සටහන් සහ ඇමුණුම් සංස්කරණය කිරීමට ඉඩ දිය යුතුය.
  • පරිශීලකයන්ට තම සටහන් මකා දැමිය හැකිය.
  • මෙම යෙදුම, ණයපත් ගෙවීම් හැසිරවීමට සමත් විය යුතුය
  • අභිරුචි වසම් නාමයක HTTPS ඔස්සේ, යෙදුම පරිශීලකයන්ට පිරිනැමිය යුතුය.
  • පසු අන්තයේ ක්‍රමලේඛ අතුරුමුහුණත් ආරක්ෂාකාරී වීමට අවශ්‍ය ය.
  • යෙදුම විවිධ තිර ප්‍රමාණයන්ට සංවේදී වීමට අවශ්‍ය ය.
  • අප git push කරන විට යෙදුමෙහි නව පිටපතක් නිකුත් වීමට අවශ්‍ය ය.
  • අපට යෙදුම පිළිබඳ පරීක්ෂාවෙන් සිටීමට සහ දෝෂ නිදොස්කරණය කිරීමට හැකි විය යුතුය.

අප මේ සඳහා AWS වේදිකාව භාවිත කරනු ඇත. අපි ඉදිරියේදී තවත් සමහර වේදිකාවන් ද ආවරණය කරනු ඇත, නමුත් AWS වේදිකාව තෝරා ගැනීම හොඳ ආරම්භයක් යයි අපි තීරණය කළෙමු.

තාක්ෂණයන් සහ සේවාවන්

අපේ serverless යෙදුම ගොඩනැගීම සඳහා අපි පහත තාක්ෂණ සහ සේවා සමූහය භාවිත කරනවා.

  • අපගේ serverless යෙදුම් ක්‍රමලේඛ අතුරුමුහුණත සඳහා Lambda & API Gateway
  • අපේ දත්ත ගබඩාව සඳහා DynamoDB
  • පරිශීලක සත්‍යාපනය සහ අපගේ ක්‍රමලේඛ අතුරුමුහුණත් ආරක්ෂාව සඳහා Cognito
  • අපේ යෙදුම රැඳවීමට සහ ලේඛන උඩුගත කිරීම සඳහා S3
  • අපේ යෙදුම බාහිරයට පිරිනැමීම සඳහා CloudFront
  • අපේ වසම් නාමය සඳහා Route 53
  • SSL සඳහා Certificate Manager
  • Lambda සහ ක්‍රමලේඛ අතුරුමුහුණත් ප්‍රවේශ සටහන් සඳහා CloudWatch
  • අපේ තනි පිටුවේ යෙදුම සඳහා React.js
  • මාර්ගනය සඳහා React Router
  • පරිශීලක අතුරුමුහුණත් කට්ටලය සඳහා Bootstrap
  • ණයපත් ගෙවීම් හැසිරවීම සඳහා Stripe
  • නිකුත් කිරීම් ස්වයංක්‍රීයකරණය සඳහා Seed
  • React නිකුත් කිරීම් ස්වයංක්‍රීයකරණය කිරීම සඳහා Netlify
  • අපගේ ව්‍යාපෘති කේතය රඳවා තැබීම සඳහා GitHub
  • දෝෂ වාර්තාකරණය සඳහා Sentry

අපි ඉහත සේවාවන් සඳහා ඒවායේ නොමිල අවධීන් භාවිත කරන්නෙමු. එවිට ඔබට එම සේවාවන් සඳහා නොමිලයේ ලියාපදිංචි විය හැකිය. මෙය ඇත්තෙන්ම ඔබේ යෙදුම රැඳවීම සඳහා නව අභිරුචි වසම් නාමයක් මිල දී ගැනීම කෙරෙහි නම් වලංගු නොවේ. එසේම AWS හි ගිණුමක් සැදීමේදී ඔබට ණයපත් තොරතුරු ඇතුළත් කිරීමට ද සිදුවේ. එමනිසා, ඔබ මෙම නිබන්ධනයෙන් අප ආවරණය කරන ප්‍රමාණයට වඩා AWS සම්පත් ප්‍රමාණයක් භාවිත කරන්නේ නම් ඔබෙන් ගාස්තුවක් අයවිය හැකිය.

ඉහත ලැයිස්තුව මඳක් වික්ෂිප්තකාරී වුවත්, අපි, ඔබ මෙම නිබන්ධනය සම්පූර්ණ කිරීමෙන් සැබෑ ලෝකයේ, ආරක්‍ෂිත සහ පූර්ණ ක්‍රියාකාරී වෙබ් යෙදුම් නිර්මාණය කිරීමට සුදානම් බව සහතික වන්නට උත්සාහ කරන්නෙමු. කණගාටු නොවන්න, අප ඔබට මේ සඳහා සහය වනු ඇත.

අවශ්‍යතා

ඔබට මෙම මාර්ගෝපදේශය අනුගමනය කිරීමට දේවල් කිහිපයක් අවශ්‍ය වේ:

  • Node v8.10+ සහ NPM v5.5+ ඔබේ පරිගණකයේ ස්ථාපනය කර තිබීම
  • නොමිල GitHub ගිණුම ක්.
  • සහ විධාන පෙළ භාවිත කරන්නේ කෙසේද යන්න පිළිබඳ මුලික දැනුම

මෙම මාර්ගෝපදේශය සැකසී ඇත්තේ කෙසේද?

මෙම මාර්ගෝපදේශය දළ වශයෙන් කොටස් කිහිපයකට බෙදා ඇත:

  1. මූලිකාංග

    අපි මෙහි දී ඔබේ පළමු පූර්ණ අන්ත යෙදුම නිර්මාණය කරන්නේ කෙසේදැයි විස්තර කරන්නෙමු. මෙම පරිච්ජේද පසු අන්තය(Serverless) සහ ඉදිරි අන්තය(React) අනුව දළ වශයෙන් බෙදා වෙන්කර තිබේ.තවද අපි මෙහි දී ඔබේ serverless යෙදුම සහ React යෙදුම නිකුත් කරන්නේ කෙසේද යන්න පිළිබඳව ද කතා කරන්නෙමු.

    මාර්ගෝපදේශයේ මෙම කොටස මුළුමුලින් ම සම්පූර්ණ කෙරෙන පරිදි ප්‍රවේශමෙන් සැලසුම් කර ඇත. අපි සෑම පියවරක්ම විස්තරාත්මක ව සාකච්ජා කරන අතර ඔබේ පළමු යෙදුම නිර්මාණය කිරීමට ඔබට සහය වීම සඳහා තිර ජායාරූප විශාල ප්‍රමාණයක් ද සතුව ඇත්තෙමු.

  2. හොඳම භාවිතයන්

    අපි 2017 දී මෙම මාර්ගෝපදේශය පළමු කොටස පමණක් සහිතව නිකුත් කළෙමු. ප්‍රජාව වර්ධනය වී ඇති අතර අපගේ කියවන්නන් බොහෝ දෙනෙක් මෙහි විස්තර කෙරෙන සැකසීම භාවිත කර ඔවුනගේ කටයුතු බලගන්වන යෙදුම් නිර්මාණය කර තිබේ. මෙම කොටසේදී අපි, නිකුත් කළ යෙදුම් සඳහා වන හොඳම භාවිතයන් ආවරණය කරන්නෙමු. මේවා ඔබට ඇත්තෙන්ම වැදගත් වන්නේ ඔබේ යෙදුමේ කේත ප්‍රමාණය වැඩි වන විට හෝ ඔබේ යෙදුමේ ක්‍රමලේඛන කණ්ඩායම වැඩි වන විටදී ය.

    මෙම කොටසේ පරිච්ජේද සාපේක්ෂව ස්වාධීන වන අතර නිශ්චිත මාතෘකා වටා දෝලනය වීමට නැඹුරුවක් දක්වයි.

  3. යොමුව

    අවසානයේ, අප සතුව විවිධ මාතෘකා යටතේ වන පරිච්ජේද එකතුවක් ඇත. අපි මේවාට මාර්ගෝපදේශයේ අතරමැදදී යොමු වනු ඇත. ඉහත සඳහන් කොටස් දෙකටම අත්‍යවශයෙන් අයත් නොවන මාතෘකා ආවරණය කිරීමට අපි මෙය යොදා ගන්නෙමු

ඔබේ පළමු Serverless යෙදුම ගොඩනැගීම

මෙම මාර්ගෝපදේශනයේ පළමු කොටස සටහන් යෙදුම නිර්මාණය කිරීමට සහ එය නිකුත් කිරීමට ඔබට සහය වෙයි. අපි සියලුම මුලිකංග ආවරණය කරන්නෙමු. සෑම සේවාවක්ම ඔබ විසින්ම නිර්මාණය කෙරෙනු ඇත. පහත දැක්වෙන්නේ කුමක් කුමන පිළිවෙලින් ආවරණය වන්නේ ද යන්නයි.

පසු අන්තය සඳහා:

  • ඔබේ AWS ගිණුම ගැළපෙන පරිදි සකසා ගැනීම
  • DynamoDB භාවිතයෙන් ඔබේ දත්ත ගබඩාව සකසා ගැනීම
  • ලේඛන උඩුගත කිරීම සඳහා S3 සකසා ගැනීම
  • පරිශීලක ගිණුම් කළමනාකරණය සඳහා Cognito පරිශීලක තටාක සකසා ගැනීම
  • අපගේ ලේඛන/ගොනු උඩුගත කිරීම් ආරක්ෂා කිරීම සඳහා Cognito අනන්‍යතා තටාකය සකසා ගැනීම
  • Lambda සහ ක්‍රමලේඛ අතුරුමුහුණත් ද්වාරය සමඟ වැඩ කිරීම සඳහා Serverless ක්‍රමලේඛ රාමුව සකසා ගැනීම
  • විවිධ පසු අන්ත ක්‍රමලේඛ අතුරුමුහුණත් රචනා කිරීම
  • බාහිර ක්‍රමලේඛ අතුරුමුහුණත් භාවිත කිරීම (Stripe)
  • විධාන පෙළ ඔස්සේ ඔබේ යෙදුම නිකුත් කිරීම

ඉදිරි අන්තය සඳහා:

  • Create React App භාවිතයෙන් අපේ ව්‍යාපෘතිය සකසා ගැනීම
  • Bootstrap භාවිතයෙන් කැමතිම අයිකන, අකුරු විලාසිතා සහ පරිශීලක අතුරුමුහුණත් කට්ටලයක් එක් කිරීම
  • React-Router භාවිතයෙන් මාර්ග සැකසීම
  • AWS Cognito SDK භාවිතයෙන් පරිශීලකයන් ලියාපදිංචි කිරීම සහ පිවිසවීම
  • අපේ සටහන් කළමනාකරණය කිරීම සඳහා පසු අන්තය සඳහා වන සම්බන්ධකය
  • ලේඛන උඩුගත කිරීම සඳහා AWS JS SDK භාවිත කිරීම
  • React හි ණයපත් ගෙවීම් පිළිගැනීම
  • Create React App හි පරිසරයන්
  • Netlify භාවිතයෙන් ඔබේ ඉදිරි අන්තය නිකුත් කිරීම
  • Netlify ඔස්සේ අභිරුචි වසම් වින්‍යාසකරණය

පසු අන්ත නිකුත් කිරීම් ස්වයංක්‍රීයකරණය කිරීම:

  • කේතය ඔස්සේ DynamoDB සකසා ගැනීම
  • කේතය ඔස්සේ S3 ගැළපෙන පරිදි සකසා ගැනීම
  • කේතය ඔස්සේ Cognito පරිශීලක තටාකය ගැළපෙන පරිදි සකසා ගැනීම
  • කේතය ඔස්සේ Cognito අනන්‍යතා තටාකය ගැළපෙන පරිදි සකසා ගැනීම
  • Serverless ක්‍රමලේඛ රාමුවෙහි පාරිසරික විචල්‍යයන්
  • Serverless ක්‍රමලේඛ රාමුවෙහි රහස්‍ය විචල්‍යයන් සමඟ කටයුතු කිරීම
  • Serverless හි ඒකක පරීක්ෂාවන්
  • Seed භාවිතයෙන් නිකුත් කිරීම් ස්වයංක්‍රීයකරණය කිරීම
  • Seed ඔස්සේ අභිරුචි වසම් නාම ගැළපෙන පරිදි සකසා ගැනීම

Serverless යෙදුම් පරීක්ෂාව සහ නිදොස්කරණය:

  • Sentry භාවිතයෙන් React හි දෝෂ වාර්තාකරණය සකසා ගැනීම
  • React හි දෝෂ සීමාවක් ගැළපෙන පරිදි සකසා ගැනීම
  • අපේ Serverless ක්‍රමලේඛ අතුරුමුහුණත් වලට දෝෂ සටහන්කරණය එකතු කිරීම
  • පොදු Serverless දෝෂ සඳහා නිදොස්කරණ ක්‍රියා පිළිවෙල ආවරණය කිරීම

මෙය ඔබට පිරිපුන් නිමාවෙන් යුත් පූර්ණ අන්ත Serverless යෙදුම් ගොඩනැගීම සඳහා හොඳ පදනමක් වනු ඇතැයි අපි සිතමු. පහත ඒවාට අමතරව අප විසින් ආවරණය කළ යුතු යයි ඔබට හැඟෙන වෙනයම් සංකල්ප හෝ තාක්ෂණයන් වේ නම්, නොපැකිලව අපගේ පර්ෂදයන්හි දී අප වෙත දැනගැනීමට සලස්වන්න.