paint-brush
ምስ ተለዋዋጢ ከባቢ ኣብ ፍሮንቴንድ ኣፕሊኬሽን ሪሊዝ ምስራሕ@egorgrushin
ሓድሽ ታሪኽ

ምስ ተለዋዋጢ ከባቢ ኣብ ፍሮንቴንድ ኣፕሊኬሽን ሪሊዝ ምስራሕ

Egor Grushin11m2024/10/30
Read on Terminal Reader

ኣዝዩ ነዊሕ፤ ንምንባብ

ናይ ፍሮንትኤንድ መተግበሪታት ብባህሊ ንነፍሲ ወከፍ ከባቢ (ምዕባለ፣ መድረኽ፣ ምፍራይ) ዝተፈላለየ ህንጸት የድልዮም ምኽንያቱ ተለዋዋጢ ከባቢ ኣብ ግዜ ህንጸት ስለዝተሰረቱ፣ እዚ ድማ ናብ ምውሳኽ ናይ ምፍናው ግዜ ይመርሕ። ነቲ ናይ ቅድሚት መተግበሪ ሓንሳብ ንምህናጽን ኣብ እዋን ምዝርጋሕ ንከባቢ ዝምልከቱ ተለዋዋጢ መርፍእ ንምውጋእን ኣብ ግዜ ምዝርጋሕ ቦታታትን ስክሪፕትን ብምጥቃም ብጭቡጥ ክብርታት ንምትካእ መፍትሒ እእምት። እዚ ኣገባብ እዚ ንመስርሕ ምፍናው የቃልሎ፣ ናይ ህንጸት ግዜ ይንክዮ፣ ኣብ መላእ ከባቢታት ቅኑዕነት የረጋግጽ፣ ከምኡ’ውን ምስ ህንጸት ዝተኣሳሰሩ ስሕተታት ሓደጋ የጉድል። ብተወሳኺ ድሕሪ ተለዋዋጢ መርፍእ ምፍሳስ ስም ፋይል ብምምሕዳር እቲ ኣገባብ ውጽኢታዊ መኽዘን መርበብ ሓበሬታን ሓፈሻዊ ኣፈጻጽማ መተግበሪን ይሕሉ።
featured image - ምስ ተለዋዋጢ ከባቢ ኣብ ፍሮንቴንድ ኣፕሊኬሽን ሪሊዝ ምስራሕ
Egor Grushin HackerNoon profile picture
0-item


ብሚልዮናት ዝቑጸሩ ናይ ቅድሚት መተግበሪታት ንከባቢ ዝምልከት ህንጻታት የመሓድሩ ኣለዉ። ንነፍሲ ወከፍ ከባቢ — ምዕባለ ይኹን፡ መድረኽ፡ ወይ ምፍራይ — ፍሉይ ህንጸት ናይቲ ቅድመ-መተግበሪ ክፍጠር ኣለዎ፡ ቅኑዕ ናይ ከባቢ ተለዋዋጢ ድማ ክቐውም ኣለዎ። ብዙሓት ኣፕታት እንተተሳቲፎም ቁጽሪ ህንጻታት ይባዛሕ፡ እዚ ድማ ነቲ ብስጭት ይውስኸሉ። እዚ ንነዊሕ እዋን ልሙድ ጸገም ኮይኑ ጸኒሑ'ዩ፡ እንተኾነ ግን ንተለዋዋጢ ከባቢ ንምሕላው ዝሓሸ መንገዲ ኣሎ። ነዚ መስርሕ ንምምሕያሽ ዝሕግዝ መንገዲ ረኺበ ኣለኹ፣ ኣብዚ ጽሑፍ ድማ፣ ንጊዜ ህንጸት ዝቕንስን ኣብ ፕሮጀክትታትካ ኣብ መላእ ከባቢታት ቅኑዕነት ንምርግጋጽ ዝሕግዘካን ስሉጥ መስርሕ ንምፍጣር ደረጃ ብደረጃ ክመርሓካ እየ።


ተለዋዋጢ ከባቢታት ምርዳእ

ቅድሚ ምጅማርና ዳግመ-ርእይቶ ክንገብር ይግባእ ይመስለኒ። ዌብ ኣፕሊኬሽናት ዳርጋ ኩሉ ግዜ ኣብ "ተለዋዋጢ ከባቢ " ተባሂሎም ዝፍለጡ ተቐያየርቲ ይምርኮሱ፣ እዚኦም መብዛሕትኡ ግዜ ውሽጣዊ ናይ ስርዓት መወዳእታ ነጥብታት፣ ናይ ውህደት ስርዓታት፣ ናይ ክፍሊት ስርዓት መፍትሕታት፣ ናይ ምፍናው ቁጽርታትን ካልእን ዘጠቓልሉ እዮም። ባህርያዊ እዩ፡ ክብርታት ናይዞም ተቐያየርቲ ከከምቲ እቲ መተግበሪ ዝተዋፈረሉ ሃዋህው ይፈላለ እዩ።


ንኣብነት ምስ ናይ ክፍሊት ኣፍደገ ዝራኸብ ኣፕሊኬሽን እሞ ሕሰብ። ኣብ ሃዋህው ምዕባለ፡ እቲ ናይ ክፍሊት ኣፍደገ URL ንፈተነ ዝኸውን ሳንድቦክስ (https://sandbox.paymentgateway.com) ከመልክት ይኽእል እዩ፡ ኣብ ሃዋህው ምፍራይ ድማ፡ ናብቲ ቀጥታዊ ኣገልግሎት (https://live.paymentgateway.com) የመልክት። ). ብተመሳሳሊ ንነፍሲ ወከፍ ከባቢ ዝተፈላለዩ መፍትሕታት ኤፒኣይ ወይ ካልእ ንከባቢ ዝምልከት ቅጥዒ ይጥቀሙ፣ ድሕነት ዳታ ንምርግጋጽን ከባቢታት ንኸይትሕወሱን።


ኣብ ምዕባለ ፍሮንትኤንድ ብድሆታት

When building backend applications , እዚ ጉዳይ ኣይኮነን። ክብርታት ናይዞም ተለዋዋጢ ዋጋታት ኣብቲ ድሕረ-ገጽ ዝዝርጋሓሉ ናይ ኣገልጋሊ ሃዋህው ስለዝኽዘኑ ነዞም ተለዋዋጢ ዋጋታት ኣብቲ ናይ መተግበሪ ኮድ ምእዋጅ እኹል እዩ። በዚ መንገዲ እዚ እቲ ናይ ድሕሪት መተግበሪ ኣብ ምጅማር ይበጽሖም።


ይኹን እምበር ምስ ፍሮንትኤንድ ኣፕሊኬሽናት ነገራት ብመጠኑ ይተሓላለኹ። ኣብ መርበብ ሓበሬታ ተጠቃሚ ስለ ዝሰርሑ፡ ንፍሉያት ናይ ከባቢ ተለዋዋጢ ክብርታት ምብጻሕ የብሎምን። ነዚ ንምምካት፡ ክብርታት ናይዞም ተቐያየርቲ ብተለምዶ ኣብ ግዜ ህንጸት ናብቲ ናይ ቅድሚት መተግበሪ "ዝጥበሱ" እዮም። በዚ መንገዲ እዚ እቲ መተግበሪ ኣብ መርበብ ሓበሬታ ናይቲ ተጠቃሚ ክሰርሕ ከሎ፡ ኩሎም ኣድለይቲ ክብርታት ድሮ ኣብቲ ናይ ቅድሚት መተግበሪ ተሰዂዖም ኣለዉ።


እዚ ኣገባብ እዚ ከም ብዙሓት ካልኦት መጠንቀቕታ ሒዙ ይመጽእ፡ ንነፍሲ ወከፍ ከባቢ ናይ ሓደ ዓይነት ቅድመ-መተግበሪ ፍሉይ ህንጻ ክትፈጥር ኣለካ፡ ምእንቲ ነፍሲ ወከፍ ህንጻ ነናቱ ክብርታት ክሕዝ።


ንኣብነት ፡ ሰለስተ ከባቢታት ኣለዉና ንበል፤

  • ንውሽጣዊ ፈተነ ዝኸውን ምዕባለ፤

  • ንፈተነ ውህደት ዝኸውን መድረኽ፤

  • ከምኡ’ውን ንዓማዊል ዝኸውን ምፍራይ።


ስራሕካ ንፈተነ ንምቕራብ፡ ነቲ ኣፕ ሃኒጽካ ናብቲ ናይ ምዕባለ ሃዋህው ትዝርግሖ። ውሽጣዊ ፈተነ ምስተዛዘመ፡ ነቲ ኣፕ ናብ መድረኽ ንምዝርጋሕ ዳግማይ ክትሃንጾ ኣለካ፡ ድሕሪኡ ድማ ዳግማይ ክትሃንጾ ኣለካ ንምዝርጋሕ ናብ ምፍራይ። እቲ ፕሮጀክት ካብ ሓደ ንላዕሊ ናይ ቅድሚት መተግበሪ ዝሓዘ እንተኾይኑ፡ ቁጽሪ ናይ ከምዚኦም ዝኣመሰሉ ህንጻታት ብዓቢኡ ይውስኽ። ተወሳኺ፡ ኣብ መንጎ እዞም ህንጻታት፡ እቲ ኮድቤዝ ኣይቅየርን ኣሎ — እቲ ካልኣይን ሳልሳይን ህንጻታት ኣብ ሓደ ምንጪ ኮድ ዝተመርኮሰ እዩ።


እዚ ኩሉ ነቲ መስርሕ ምፍናው ዓቢ፣ ቀስ ዝበለን ብዙሕ ወጻኢታት ዝሓትትን ይገብሮ፣ ከምኡ’ውን ንሓደጋ ምርግጋጽ ጽሬት የስዕብ። ምናልባት እቲ ህንጸት ኣብ ሃዋህው ምዕባለ ጽቡቕ ተፈቲኑ ክኸውን ይኽእል እዩ፡ እቲ ናይ መድረኽ ህንጸት ግን ብቴክኒካዊ መዳይ ሓድሽ እዩ፡ ማለት ሕጂ ሓድሽ ናይ ጌጋ ተኽእሎ ኣሎ።


ኣብነት ፡ ክልተ ኣፕሊኬሽናት ኣለዉኻ፡ ናይ ህንጸት ግዜኦም Xን Yን ካልኢት እዩ። ነቶም ሰለስተ ከባቢታት፡ ክልቲኦም ኣፕስ ኣብ ናይ ህንጸት ግዜ 3X + 3Y ምወሰዱ። ይኹን እምበር፡ ነፍሲ ወከፍ ኣፕ ሓንሳብ ጥራይ ክትሃንጾን ኣብ ኩሉ ከባቢታት ተመሳሳሊ ህንጸት እንተትጥቀምን፡ እቲ ጠቕላላ ግዜ ናብ X + Y ካልኢት ጥራይ ምወረደ፡ እዚ ድማ ነቲ ናይ ህንጸት ግዜ ብሰለስተ ዕጽፊ ምቖረጾ።

እዚ ኣብ ፍሮንትኤንድ ሻምብቆታት ዓቢ ለውጢ ከምጽእ ይኽእል እዩ፣ ኣብዚ ጸጋታት ድሩት ኮይኑ ናይ ህንጸት ግዜ ካብ ውሑዳት ደቓይቕ ጥራይ ክሳብ ልዕሊ ሓደ ሰዓት ክኸውን ይኽእል። እቲ ጉዳይ ዳርጋ ኣብ ኩሉ ፍሮንትኤንድ ኣፕሊኬሽን ብዓለም ደረጃ ይርከብ፣ መብዛሕትኡ ግዜ ድማ ዝፍታሓሉ መንገዲ የለን። እዚ ግን ብፍላይ ብዓይኒ ንግዲ ከቢድ ጸገም እዩ።

ኣብ ክንዲ ሰለስተ ዝተፈላለዩ ህንጻታት ምፍጣር፡ ሓደ ጥራይ ሰሪሕካ ኣብ ኩሉ ከባቢታት እንተትዝርግሖ ጽቡቕ ኣይምኾነን? ጽቡቕ ልክዕ ከምኡ ዝገብረሉ መንገዲ ረኺበ ኣለኹ።


ምምሕያሽ ናይ ቅድሚት ምዝርጋሕ። እቲ ማንዋል

ምድላው ተለዋዋጢ ከባቢ


  1. መጀመርታ ኣብ መኽዘን ናይ ቅድመ-ገጽ ፕሮጀክትካ ፋይል ክትፈጥር ኣለካ ኣብኡ ድማ እቶም ዘድልዩ ተለዋዋጢ ከባቢ ክዝርዘሩ እዮም። እዚኦም እቲ ዲቨሎፐር ኣብ ውሽጢ ዓዲ ክጥቀመሉ እዩ። ከም ልሙድ፡ እዚ ፋይል .env.local ይበሃል፡ መብዛሕትኦም ዘመናውያን ፍሬምዎርክታት ቅድመ-መወዳእታ ከንብብዎ ይኽእሉ። ኣብነት ናይ ከምዚ ዓይነት ፋይል እንሆ፤


     CLIENT_ID='frontend-development' API_URL=/api/v1' PUBLIC_URL='/' COMMIT_SHA=''


    መተሓሳሰቢ፡ ዝተፈላለዩ ማዕቀፋት ንተለዋዋጢ ከባቢ ዝተፈላለየ ናይ ምጽዋዕ ውዕላት ይጠልቡ። ንኣብነት ኣብ React ቅድሚ REACT_APP_ ናይቶም ተለዋዋጢ ኣስማት ክትገብር ኣለካ። እዚ ፋይል እዚ ነቲ መተግበሪ ብቐጥታ ዝጸልዉ ተለዋዋጢ ነገራት ከጠቓልል ናይ ግድን ኣየድልዮን እዩ፤ ሓጋዚ ናይ ምእራም ሓበሬታ እውን ክሕዝ ይኽእል እዩ። እቲ COMMIT_SHA ተለዋዋጢ ወሲኸሉ ኣለኹ፣ ድሒርና ካብቲ ናይ ህንጻ ስራሕ ክንስሕቦ ኢና፣ እዚ ህንጸት ዝተመርኮሰሉ commit ንምክትታል።


  2. ቀጺልና environment.js ዝበሃል ፋይል ንፍጠር፣ ኣብኡ ኣየኖት ተለዋዋጢ ከባቢ ከም ዘድልዩኻ ክትገልጽ ትኽእል። እቲ ናይ ቅድሚት ፍሬምዎርክ ነዚኦም ክወግኣካ እዩ። ንኣብነት ንReact ኣብቲ process.env ዝብል ነገር ይኽዘኑ፤


     const ORIGIN_ENVIRONMENTS = window.ORIGIN_ENVIRONMENTS = { CLIENT_ID: process.env.CLIENT_ID, API_URL: process.env.API_URL, PUBLIC_URL: process.env.PUBLIC_URL, COMMIT_SHA: process.env.COMMIT_SHA }; export const ENVIRONMENT = { clientId: ORIGIN_ENVIRONMENTS.CLIENT_ID, apiUrl: ORIGIN_ENVIRONMENTS.API_URL, publicUrl: ORIGIN_ENVIRONMENTS.PUBLIC_URL ?? "/", commitSha: ORIGIN_ENVIRONMENTS.COMMIT_SHA, };


  1. ኣብዚ፡ ኩሎም ናይ መጀመርታ ክብርታት ናይቶም ተለዋወጥቲ ኣብቲ window.ORIGIN_ENVIRONMENTS object ትረኽቦም፡ እዚ ድማ ኣብ ኮንሶል ናይቲ መርበብ ሓበሬታ ክትሪኦም የኽእለካ። ተወሳኺ፡ ናብቲ ENVIRONMENT object ክትቅድሖም ኣለካ፡ ኣብኡ ገለ ነባሪታት እውን ከተቐምጥ ትኽእል ኢኻ፡ ንኣብነት: publicUrl / ብነባሪ እዩ ኢልና ንሓስብ። ኣብቲ መተግበሪ እዞም ተቐያየርቲ ኣብ ዘድልዩሉ ቦታ ENVIRONMENT ዝብል ነገር ተጠቐም።


    ኣብዚ ደረጃ እዚ፡ ንኹሉ ድሌታት ንልምዓት ከባቢ ኣማሊእካዮ ኣለኻ። እቲ ዕላማ ግን ዝተፈላለየ ሃዋህው ምሕላው እዩ።


  2. ነዚ ንምግባር ድማ ከምዚ ዝስዕብ ትሕዝቶ ዘለዎ .env ፋይል ንፍጠር፤

 CLIENT_ID='<client_id>' API_URL='<api_url>' PUBLIC_URL='<public_url>' COMMIT_SHA=$COMMIT_SHA

ኣብዚ ፋይል፡ ነቶም ኣብ ከባቢ ዝምርኮሱ ተቐያየርቲ ቦታታት ክትገልጽ ትደሊ። ፍሉያት ክሳብ ዝኾኑን ብዝኾነ ይኹን መንገዲ ምስ ምንጪ ኮድካ ክሳብ ዘይተደራረቡን፡ ዝደለኻዮ ክኾኑ ይኽእሉ። ንተወሳኺ መረጋገጺ፡ ዋላ ክትጥቀመሉ ትኽእል ኢኻ። UUIDs ዝበሃሉ ትካላት – ኣድማሳዊ ፍሉያት መለለዪታት።


ነቶም ኣብ መላእ ከባቢታት ዘይቅየሩ ተለዋዋጢ ዋጋታት (ንኣብነት፡ እቲ commit hash)፡ ወይ ነቶም ጭቡጣት ክብርታት ብቐጥታ ክትጽሕፎም ትኽእል ወይ ድማ ኣብ እዋን ስራሕ ህንጸት ዝህልዉ ክብርታት ክትጥቀም ትኽእል ኢኻ (ከም $COMMIT_SHA )። እቲ ናይ ቅድሚት ፍሬምዎርክ ነዞም ቦታታት ብጭቡጥ ክብርታት ኣብ መስርሕ ህንጸት ክቕይሮም እዩ፤


መዝገብ
መዝገብ

  1. ሕጂ ኣብ ክንዲ እቶም ቦታታት ዝሕዙ ናይ ብሓቂ ክብርታት ከተእቱ ዕድል ትረክብ። ነዚ ንምግባር ድማ inject.py ፋይል ንፍጠር (ፓይቶን መሪጸ ኣለኹ፡ ነዚ ዕላማ ግን ዝኾነ መሳርሒ ክትጥቀም ትኽእል ኢኻ)፡ እዚ ድማ መጀመርታ ካርታ ናይ ቦታታት ናብ ተለዋዋጢ ኣስማት ክሕዝ ኣለዎ፤


 replacement_map = { "<client_id>": "CLIENT_ID", "<api_url>": "API_URL", "<public_url>": "PUBLIC_URL", "%3Cpublic_url%3E": "PUBLIC_URL" }

public_url ክልተ ግዜ ከም ዝተዘርዘረ ኣስተውዕል፣ እቲ ካልኣይ ምእታው ድማ ካብ ሓጹር ከም ዘምለጠ። እዚ ንኹሎም ኣብ CSSን HTMLን ፋይላት ዝጥቀሙ ተለዋዋጢ የድልየካ።


  1. ሕጂ ዝርዝር ናይቶም ክንቅይሮም እንደሊ ፋይላት ንውስኽ (እዚ ንNginx ኣብነት ምኾነ)፤


 base_path = 'usr/share/nginx/html' target_files = [ f'{base_path}/static/js/main.*.js', f'{base_path}/static/js/chunk.*.js', f'{base_path}/static/css/main.*.css', f'{base_path}/static/css/chunk.*.css', f'{base_path}/index.html' ]


  1. ብድሕሪኡ injector.py ፋይል ንፈጥር፡ ኣብኡ ድማ ናይ ማፒንግን ዝርዝርን ናይ ህንጻ ኣርቲፋክት ፋይላት (ከም JS, HTML, ከምኡ’ውን CSS ፋይላት) ክንቅበል ኢና፡ ነቶም ቦታታት ድማ ብኽብርታት ናይቶም ካብቲ ሕጂ ዘለናዮ ከባቢ ተለዋወጥቲ ክንትክኦም ኢና፤


 import os import glob def inject_envs(filename, replacement_map): with open(filename) as r: lines = r.read() for key, value in replacement_map.items(): lines = lines.replace(key, os.environ.get(value) or '') with open(filename, "w") as w: w.write(lines) def inject(target_files, replacement_map, base_path): for target_file in target_files: for filename in glob.glob(target_file.glob): inject_envs(filename, replacement_map)


ድሕሪኡ ድማ፡ ኣብቲ inject.py ፋይል፡ ነዚ መስመር ወስኸሉ ( injector.py ምእታው ኣይትረስዑ)፤

 injector.inject(target_files, replacement_map, base_path)


  1. ሕጂ እቲ inject.py ስክሪፕት ኣብ እዋን ምዝርጋሕ ጥራይ ከም ዝሰርሕ ከነረጋግጽ ኣለና።ድሕሪ ፓይቶን ምጽዓንን ኩሉ ኣርቲፋክት ምቕዳሕን ኣብ CMD ትእዛዝ ናብ Dockerfile ክትውስኾ ትኽእል ኢኻ፤
 RUN apk add python3 COPY nginx/default.conf /etc/nginx/conf.d/default.conf COPY --from=build /app/ci /ci COPY --from=build /app/build /usr/share/nginx/html CMD ["/bin/sh", "-c", "python3 ./ci/inject.py && nginx -g 'daemon off;'"]That's it! This way, during each deployment, the pre-built files will be used, with variables specific to the deployment environment injected into them.


ንሱ እዩ! በዚ መንገዲ እዚ፡ ኣብ ነፍሲ ወከፍ ምዝርጋሕ፡ እቶም ቅድሚ ሕጂ ዝተሃንጹ ፋይላት ክጥቀሙ እዮም፡ ንሃዋህው ምዝርጋሕ ፍሉያት ተለዋዋጢ ነገራት ድማ ኣብ ውሽጦም ይውግኡ።


መዝገብ፥ መዝገብ


ንግቡእ ምዕቃብ መርበብ ሓበሬታ ምፍራስ ስም ፋይል ምሕላው

ሓደ ነገር – ናይ ህንጻ ኣርቲፋክትታትካ ኣብ ኣስማት ፋይላቶም ትሕዝቶ ሃሽ እንተድኣ ኣእትዮም፡ እዚ መርፍእ ነቶም ኣስማት ፋይላት ኣይጸልዎምን እዩ፡ እዚ ድማ ኣብ ምዕቃብ መርበብ ሓበሬታ ጸገም ከስዕብ ይኽእል። ነዚ ንምእራም፡ ነቶም ፋይላት ብዝተወግኡ ተለዋዋጢ ዋጋታት ድሕሪ ምቕያርካ፡ ክትገብሮም ከድልየካ እዩ፤


  1. ንዝተመሓየሹ ፋይላት ሓድሽ ሃሽ ምፍጣር።
  2. ነዚ ሓድሽ ሃሽ ኣብቶም ኣስማት ፋይላት ወስኾም፣ ስለዚ እቲ መርበብ ሓበሬታ ከም ሓደስቲ ፋይላት ይሕዞም።
  3. ዝኾነ መወከሲታት ናይቶም ኣብ ኮድካ ዘለዉ ናይ ቀደም ኣስማት ፋይላት (ከም መግለጺታት ምእታው) ምስቶም ሓደስቲ ኣስማት ፋይላት ንኽሰማማዕ ኣዘምን።


ነዚ ንምትግባር ድማ ሃሽ ላይብረሪ import ( import hashlib )ን እዞም ዝስዕቡ ተግባራትን ኣብቲ inject.py ፋይል ንውስኸሉ።


 def sha256sum(filename): h = hashlib.sha256() b = bytearray(128 * 1024) mv = memoryview(b) with open(filename, 'rb', buffering=0) as f: while n := f.readinto(mv): h.update(mv[:n]) return h.hexdigest() def replace_filename_imports(filename, new_filename, base_path): allowed_extensions = ('.html', '.js', '.css') for path, dirc, files in os.walk(base_path): for name in files: current_filename = os.path.join(path, name) if current_filename.endswith(allowed_extensions): with open(current_filename) as f: s = f.read() s = s.replace(filename, new_filename) with open(current_filename, "w") as f: f.write(s) def rename_file(fullfilename): dirname = os.path.dirname(fullfilename) filename, ext = os.path.splitext(os.path.basename(fullfilename)) digest = sha256sum(fullfilename) new_filename = f'{filename}.{digest[:8]}' new_fullfilename = f'{dirname}/{new_filename}{ext}' os.rename(fullfilename, new_fullfilename) return filename, new_filename


ይኹን እምበር፡ ኵሎም ፋይላት ስሞም ምቕያር ኣየድልዮምን እዩ። ንኣብነት፡ እቲ index.html ዝብል ስም ፋይል ከይተቐየረ ክጸንሕ ኣለዎ ነዚ ንምዕዋት ድማ፡ ምቕያር ስም ኣድላዪ እንተኾይኑ ዝሕብር ሰንደቕ ዕላማ ዝዕቅብ TargetFile ክፍሊ ምፍጣር፤


 class TargetFile: def __init__(self, glob, should_be_renamed = True): self.glob = glob self.should_be_renamed = should_be_renamed


ሕጂ ኣብ inject.py ዘሎ ስርርዕ ናይ ፋይል መንገድታት ብናይ TargetFile class objects ስርርዕ ክትትክኦ ጥራይ እዩ ዘለካ፤

 target_files = [ injector.TargetFile(f'{base_path}/static/js/main.*.js'), injector.TargetFile(f'{base_path}/static/js/chunk.*.js'), injector.TargetFile(f'{base_path}/static/css/main.*.css'), injector.TargetFile(f'{base_path}/static/css/chunk.*.css'), injector.TargetFile(f'{base_path}/index.html', False) ]


ከምኡ ውን ኣብ injector.py ዘሎ inject function update ብምግባር እቲ ሰንደቕ ዕላማ እንተተሰሪዑ ነቲ ፋይል ዳግማይ ምቕያር ከጠቓልል፤


 def inject(target_files, replacement_map, base_path): for target_file in target_files: for filename in glob.glob(target_file.glob): inject_envs(filename, replacement_map) if target_file.should_be_renamed: filename, new_filename = rename_file(filename) replace_filename_imports(filename, new_filename, base_path)


ከም ውጽኢቱ ድማ እቶም ኣርቲፋክት ፋይላት ነዚ ናይ ምጽዋዕ ቅርጺ ክኽተሉ እዮም <origin-file-name><injection-hash> . <extension> .


ቅድሚ መርፍእ ምውጋእ ስም ፋይል፤

ቅድሚ መርፍእ ምውጋእ ስም ፋይል


ድሕሪ መርፍእ ስም ፋይል፤ ድሕሪ መርፍእ ስም ፋይል


ተመሳሳሊ ናይ ከባቢ ተለዋዋጢ ሓደ ዓይነት ስም ፋይል ይህቡ፣ እዚ ድማ ናይቲ ተጠቃሚ መርበብ ሓበሬታ ነቲ ፋይል ብትኽክል ክዕቅቦ የኽእሎ። ሕጂ ቅኑዕ ክብርታት ናይዞም ተለዋዋጢ ዋጋታት ኣብቲ ናይ መርበብ ሓበሬታ መኽዘን ከም ዝኽዘኑ ውሕስነት ኣሎ፣ ከም ውጽኢቱ - ዝሓሸ ኣፈጻጽማ ንዓሚል።


ንዝተመጣጠነ ምውፋር ዝኸውን መፍትሒ

እቲ ንነፍሲ ወከፍ ሃዋህው ዝተፈላለየ ህንጻታት ምፍጣር ዝብል ባህላዊ ኣገባብ ውሑዳት ወሳኒ ዘይብቕዓት ኣስዒቡ ኣሎ፡ እዚ ድማ ንውሱን ጸጋታት ዘለወን ጋንታታት ጉዳይ ክኸውን ይኽእል።


ሕጂ ንዝተናውሐ ናይ ምዝርጋሕ ግዜ፡ ካብ መጠን ንላዕሊ ህንጸት፡ ከምኡ’ውን ንዝወሰኸ ሓደጋታት ኣብ ምርግጋጽ ጽሬት ንፍሮንትኤንድ ኣፕሊኬሽናት ክፈትሕ ዝኽእል መስርሕ ምፍናው ፕላን ኣለካ - እዚ ኩሉ። ኩሉ ኣብ ኩሉ ከባቢታት ሓድሽ ደረጃ ውሕስነት ዘለዎ ቅኑዕነት እናተኣታተወ።


ኣብ ክንዲ N builds ዘድልየካ ሓደ ጥራይ እዩ ዘድልየካ። ንዝመጽእ ምውጻእ፡ ብቐሊሉ ነቲ ድሮ ዝተፈተነ ህንጻ ከተዋፍሮ ትኽእል ኢኻ፡ እዚ ውን ሓደ ዓይነት ህንጻ ኣብ ኩሉ ከባቢታት ስለ ዝጥቀም፡ ክህልዉ ዝኽእሉ ናይ ስሕተት ጸገማት ንምፍታሕ ይሕግዝ። ተወሳኺ፡ ፍጥነት ምፍጻም ናይዚ ስክሪፕት ካብቲ ኣዝዩ ዝተመቻቸወ ህንጸት ከይተረፈ ብዘይመወዳድርቲ ዝቐልጠፈ እዩ። ንኣብነት ኣብ MacBook 14 PRO, M1, 32GB ዝርከቡ local benchmarks እዞም ዝስዕቡ እዮም፤


ናተይ ኣቀራርባ ንመስርሕ ምፍናው የቃልሎ፣ ውጽኢታዊ ስትራተጂታት ምዕቃብ ብምፍቃድ ኣፈጻጽማ መተግበሪ ይሕሉ፣ ምስ ህንጸት ዝተኣሳሰሩ ስሕተታት ናብቲ ከባቢታት ከምዘይኣትዉ የረጋግጽ። ተወሳኺ፡ ኩሉ እቲ ቅድሚ ሕጂ ኣብ ኣድካሚ ዕማማት ህንጸት ዘሕለፍናዮ ግዜን ጻዕርን ሕጂ ኣብ ምፍጣር ዝያዳ ዝሓሸ ተመክሮ ተጠቃሚ ከድህብ ይኽእል። እንታይ'ዩ ዘይፍቅር?


ምስ ህንጸት ዝተኣሳሰሩ ስሕተታት ንኻልኦት ከባቢታት ናብቲ ኣፕ ከምዘይስሕቡ ነረጋግጽ። ኣብ ስርዓታት ህንጻ ብሰንኪ ዘይፍጽምና ዝረኣዩ ፋንቶም ባግ ክህልዉ ይኽእሉ። እቲ ዕድል ቀጢን እዩ፡ ግን ኣሎ።