ආයුබෝවන් සියල්ලටම! Red Hat OpenShift මත නවීන වෙබ් යෙදුම් යෙදවිය යුතු ආකාරය පෙන්වන අපගේ ලිපි මාලාවේ දෙවන සටහන මෙයයි.
පෙර සටහනේදී, අපි OpenShift වේදිකාවේ නවීන වෙබ් යෙදුම් තැනීම සහ යෙදවීම සඳහා නිර්මාණය කර ඇති නව S2I (මූලාශ්රය-පින්තූරය) ගොඩනැගීමේ රූපයේ හැකියාවන් තරමක් ස්පර්ශ කළෙමු. එවිට අපි යෙදුමක් ඉක්මනින් යෙදවීමේ මාතෘකාව ගැන උනන්දු වූ අතර, අද අපි S2I රූපයක් “පිරිසිදු” සාදන්නාගේ රූපයක් ලෙස භාවිතා කරන්නේ කෙසේද සහ එය අදාළ OpenShift එකලස් කිරීම් සමඟ ඒකාබද්ධ කරන්නේ කෙසේදැයි සොයා බලමු.
පිරිසිදු සාදන්නාගේ රූපය
අපි XNUMX කොටසේ සඳහන් කළ පරිදි, බොහෝ නවීන වෙබ් යෙදුම්වල ඊනියා ගොඩනැගීමේ අදියරක් ඇත, එය සාමාන්‍යයෙන් කේත සම්ප්‍රේෂණය, බහු ගොනු සංයුක්ත කිරීම සහ කුඩා කිරීම වැනි මෙහෙයුම් සිදු කරයි. මෙම මෙහෙයුම් වල ප්‍රතිඵලයක් ලෙස ලබාගත් ගොනු - සහ මෙය ස්ථිතික HTML, JavaScript සහ CSS - ප්‍රතිදාන ෆෝල්ඩරයේ ගබඩා කර ඇත. මෙම ෆෝල්ඩරයේ පිහිටීම සාමාන්‍යයෙන් රඳා පවතින්නේ කුමන ගොඩනැගීමට මෙවලම්ද යන්න මත වන අතර, ප්රතික්රියා කිරීම සඳහා මෙය ./build ෆෝල්ඩරය වනු ඇත (අපි මෙයට වඩාත් විස්තරාත්මකව පහතින් පැමිණෙමු).
මූලාශ්‍රයෙන් රූපයට (S2I)
මෙම ලිපියෙන් අපි “S2I යනු කුමක්ද සහ එය භාවිතා කරන්නේ කෙසේද” යන මාතෘකාව ස්පර්ශ නොකරමු (ඔබට මේ ගැන වැඩිදුර කියවිය හැකිය ), නමුත් Web App Builder රූපයක් කරන්නේ කුමක්ද යන්න තේරුම් ගැනීමට මෙම ක්‍රියාවලියේ පියවර දෙක පිළිබඳව පැහැදිලි වීම වැදගත් වේ.
එකලස් කිරීමේ අදියර
එකලස් කිරීමේ අදියර ඔබ ඩොකර් ගොඩනැගීම ධාවනය කර නව ඩොකර් රූපයක් සමඟ අවසන් වූ විට සිදුවන දෙයට බොහෝ දුරට සමාන වේ. ඒ අනුව, OpenShift වේදිකාවේ ගොඩනැගීම ආරම්භ කිරීමේදී මෙම අදියර සිදු වේ.
Web App Builder රූපයක් සම්බන්ධයෙන්, එය ඔබගේ යෙදුමේ පරායත්තතා ස්ථාපනය කිරීම සහ ගොඩනැගීම ධාවනය කිරීම සඳහා වගකිව යුතුය. . පෙරනිමියෙන්, බිල්ඩර් රූපය npm ධාවන ගොඩනැගීමේ නිර්මිතය භාවිතා කරයි, නමුත් මෙය NPM_BUILD පරිසර විචල්‍යය හරහා ප්‍රතික්‍ෂේප කළ හැක.
අප කලින් කී පරිදි, නිමි, දැනටමත් ගොඩනගා ඇති යෙදුමේ පිහිටීම ඔබ භාවිතා කරන මෙවලම් මත රඳා පවතී. උදාහරණයක් ලෙස, ප්රතික්රියා කිරීමේදී මෙය ./build ෆෝල්ඩරය වන අතර කෝණික යෙදුම් සඳහා එය project_name/dist ෆෝල්ඩරය වනු ඇත. තවද, පෙර පෝස්ටුවෙහි දැනටමත් පෙන්වා ඇති පරිදි, පෙරනිමියෙන් ගොඩනැගීමට සකසා ඇති ප්‍රතිදාන නාමාවලියෙහි පිහිටීම, OUTPUT_DIR පරිසර විචල්‍යය හරහා අභිබවා යා හැක. හොඳයි, ප්‍රතිදාන ෆෝල්ඩරයේ පිහිටීම රාමුවෙන් රාමුවට වෙනස් වන බැවින්, ඔබ විසින් ජනනය කරන ලද ප්‍රතිදානය රූපයේ ඇති සම්මත ෆෝල්ඩරයට පිටපත් කරන්න, එනම් /opt/apt-root/output. මෙම ලිපියේ ඉතිරි කොටස අවබෝධ කර ගැනීම සඳහා මෙය වැදගත් වේ, නමුත් දැන් අපි ඉක්මනින් ඊළඟ අදියර - ධාවන අදියර දෙස බලමු.
ධාවන අදියර
එකලස් කිරීමේ අදියරේදී සාදන ලද නව රූපය මත ඩොකර් ධාවනය සඳහා ඇමතුමක් ලබා දෙන විට මෙම අදියර සිදු වේ. OpenShift වේදිකාවේ යෙදවීමේදීද එයම සිදුවේ. පෙරනිමිය භාවිතා කරයි ඉහත සම්මත නිමැවුම් නාමාවලියෙහි පිහිටා ඇති ස්ථිතික අන්තර්ගතයන් සැපයීමට.
යෙදුම් ඉක්මනින් යෙදවීම සඳහා මෙම ක්‍රමය හොඳ වේ, නමුත් සාමාන්‍යයෙන් ස්ථිතික අන්තර්ගතය මේ ආකාරයෙන් සැපයීම නිර්දේශ නොකරයි. හොඳයි, යථාර්ථයේ දී අපි ස්ථිතික අන්තර්ගතය පමණක් සපයන බැවින්, අපගේ රූපය තුළ Node.js ස්ථාපනය කිරීම අපට අවශ්‍ය නොවේ - වෙබ් සේවාදායකයක් ප්‍රමාණවත් වේ.
වෙනත් වචන වලින් කිවහොත්, එකලස් කිරීමේදී අපට එකක් අවශ්‍ය වේ, ක්‍රියාත්මක කිරීමේදී අපට තවත් දෙයක් අවශ්‍ය වේ. මෙම තත්වය තුළ, දම්වැල් සහිත ගොඩනැඟිලි ප්රයෝජනවත් වේ.
දම්වැල් ඉදි කිරීම්
ඔවුන් ලියන්නේ මෙයයි OpenShift ලියකියවිලි තුළ:
"එකලස් දෙකක් එකට සම්බන්ධ කළ හැකි අතර, එකක් සම්පාදනය කරන ලද වස්තුවක් ජනනය කරන අතර අනෙක එම ආයතනය ධාවනය කිරීමට භාවිතා කරන වෙනම රූපයක එම ආයතනය සත්කාරකත්වය සපයයි."
වෙනත් වචන වලින් කිවහොත්, අපට අපගේ ගොඩනැගීම ක්‍රියාත්මක කිරීමට Web App Builder රූපය භාවිතා කළ හැක, පසුව අපගේ අන්තර්ගතයට සේවය කිරීමට එම NGINX වෙබ් සේවාදායක රූපය භාවිතා කළ හැක.
මේ අනුව, අපට Web App Builder රූපය “පිරිසිදු” සාදන්නෙකු ලෙස භාවිතා කළ හැකි අතර ඒ සමඟම කුඩා ධාවන කාල රූපයක් ඇත.
දැන් අපි මෙය නිශ්චිත උදාහරණයක් සමඟ බලමු.
පුහුණුව සඳහා අපි භාවිතා කරන්නෙමු , create-react-app විධාන රේඛා මෙවලම භාවිතයෙන් සාදන ලදී.
එය සෑම දෙයක්ම එකට එකතු කිරීමට අපට උපකාරී වනු ඇත .
අපි මෙම ගොනුව වඩාත් විස්තරාත්මකව බලමු, සහ පරාමිති අංශයෙන් ආරම්භ කරමු.
parameters:
- name: SOURCE_REPOSITORY_URL
description: The source URL for the application
displayName: Source URL
required: true
- name: SOURCE_REPOSITORY_REF
description: The branch name for the application
displayName: Source Branch
value: master
required: true
- name: SOURCE_REPOSITORY_DIR
description: The location within the source repo of the application
displayName: Source Directory
value: .
required: true
- name: OUTPUT_DIR
description: The location of the compiled static files from your web apps builder
displayName: Output Directory
value: build
required: false
මෙහි සෑම දෙයක්ම ඉතා පැහැදිලිය, නමුත් එය OUTPUT_DIR පරාමිතිය වෙත අවධානය යොමු කිරීම වටී. අපගේ උදාහරණයේ ප්රතික්රියා යෙදුම සඳහා, ප්රතික්රියා ෆෝල්ඩරය ලෙස ප්රතික්රියා පෙරනිමි අගය භාවිතා කරන බැවින් කරදර වීමට කිසිවක් නැත, නමුත් කෝණික හෝ වෙනත් දෙයකදී, මෙම පරාමිතිය අවශ්‍ය පරිදි වෙනස් කිරීමට අවශ්‍ය වනු ඇත.
දැන් අපි ImageStreams කොටස දෙස බලමු.
- apiVersion: v1
kind: ImageStream
metadata:
name: react-web-app-builder // 1
spec: {}
- apiVersion: v1
kind: ImageStream
metadata:
name: react-web-app-runtime // 2
spec: {}
- apiVersion: v1
kind: ImageStream
metadata:
name: web-app-builder-runtime // 3
spec:
tags:
- name: latest
from:
kind: DockerImage
name: nodeshift/ubi8-s2i-web-app:10.x
- apiVersion: v1
kind: ImageStream
metadata:
name: nginx-image-runtime // 4
spec:
tags:
- name: latest
from:
kind: DockerImage
name: 'centos/nginx-112-centos7:latest'
තුන්වන සහ හතරවන පින්තූර දෙස බලන්න. ඒවා දෙකම Docker images ලෙස අර්ථ දක්වා ඇති අතර, ඒවා පැමිණෙන්නේ කොහෙන්ද යන්න ඔබට පැහැදිලිව දැකගත හැක.
තෙවන රූපය web-app-builder වන අතර එය පැමිණෙන්නේ 8.x මත ටැග් කර ඇති nodeshift/ubi2-s10i-web-app වෙතින් .
සිව්වැන්න නවතම ටැගය සහිත NGINX රූපයකි (අනුවාදය 1.12). .
දැන් අපි බලමු මුල් පින්තූර දෙක. ඒවා දෙකම ආරම්භයේදී හිස් වන අතර එය නිර්මාණය වන්නේ ගොඩනැගීමේ අදියරේදී පමණි. පළමු රූපය, react-web-app-builder, web-app-builder-runtime image සහ අපගේ මූලාශ්‍ර කේතය ඒකාබද්ධ කරන එකලස් කිරීමේ පියවරක ප්‍රතිඵලයක් වනු ඇත. ඒ නිසා තමයි අපි මේ රූපයේ නමට “-builder” එකතු කළේ.
දෙවන රූපය - react-web-app-runtime - nginx-image-runtime සහ react-web-app-builder රූපයෙන් සමහර ගොනු ඒකාබද්ධ කිරීමේ ප්‍රතිඵලයක් වනු ඇත. මෙම රූපය යෙදවීමේදීද භාවිත කෙරෙන අතර අපගේ යෙදුමේ වෙබ් සේවාදායකය සහ ස්ථිතික HTML, JavaScript, CSS පමණක් අඩංගු වේ.
අවුල්ද? දැන් අපි ගොඩනැගීමේ වින්‍යාසයන් දෙස බලමු, එය ටිකක් පැහැදිලි වනු ඇත.
අපේ ටෙම්ප්ලේට් එකේ බිල්ඩ් වින්‍යාස දෙකක් තියෙනවා. මෙන්න පළමු එක, එය ඉතා සම්මතයි:
apiVersion: v1
kind: BuildConfig
metadata:
name: react-web-app-builder
spec:
output:
to:
kind: ImageStreamTag
name: react-web-app-builder:latest // 1
source: // 2
git:
uri: ${SOURCE_REPOSITORY_URL}
ref: ${SOURCE_REPOSITORY_REF}
contextDir: ${SOURCE_REPOSITORY_DIR}
type: Git
strategy:
sourceStrategy:
env:
- name: OUTPUT_DIR // 3
value: ${OUTPUT_DIR}
from:
kind: ImageStreamTag
name: web-app-builder-runtime:latest // 4
incremental: true // 5
type: Source
triggers: // 6
- github:
secret: ${GITHUB_WEBHOOK_SECRET}
type: GitHub
- type: ConfigChange
- imageChange: {}
type: ImageChange
ඔබට පෙනෙන පරිදි, ලේබලය 1 සමඟ ඇති රේඛාව පවසන්නේ මෙම ගොඩනැගීමේ ප්‍රති result ලය අපි ටිකක් කලින් ImageStreams කොටසේ දුටු ප්රතික්රියා-වෙබ්-ඇප්-බිල්ඩර් රූපයේම තබන බවයි.
2 ලෙස ලේබල් කර ඇති රේඛාව ඔබට කේතය ලබා ගත යුත්තේ කොතැනින්දැයි කියයි. අපගේ නඩුවේදී, මෙය git ගබඩාවක් වන අතර, ස්ථානය, ref සහ සන්දර්භය ෆෝල්ඩරය තීරණය කරනු ලබන්නේ අප දැනටමත් ඉහත දැක ඇති පරාමිතියන් මගිනි.
3 ලෙස ලේබල් කර ඇති රේඛාව අප දැනටමත් පරාමිති අංශයේ දැක ඇත. එය OUTPUT_DIR පරිසර විචල්‍යය එක් කරයි, එය අපගේ උදාහරණයේ ගොඩනැගීමයි.
අපි දැනටමත් ImageStream කොටසේ දැක ඇති web-app-builder-runtime image භාවිතා කිරීමට 4 ලෙස ලේබල් කර ඇති රේඛාව පවසයි.
5 ලෙස ලේබල් කර ඇති පේළිය පවසන්නේ S2I රූපය එයට සහය දක්වන්නේ නම් සහ Web App Builder රූපය එය කරන්නේ නම් අපට වර්ධක ගොඩනැගීමක් භාවිතා කිරීමට අවශ්‍ය බවයි. පළමු දියත් කිරීමේදී, එකලස් කිරීමේ අදියර අවසන් වූ පසු, රූපය node_modules ෆෝල්ඩරය සංරක්ෂිත ගොනුවකට සුරකිනු ඇත. පසුව, පසුව ධාවනය වන විට, රූපය ගොඩනැගීමේ කාලය අඩු කිරීම සඳහා මෙම ෆෝල්ඩරය සරලව ඉවත් කරනු ඇත.
අවසාන වශයෙන්, 6 ලෙස ලේබල් කර ඇති රේඛාව, යමක් වෙනස් වූ විට, අතින් මැදිහත් වීමකින් තොරව, ගොඩනැගීම ස්වයංක්‍රීයව ක්‍රියාත්මක කිරීමට ප්‍රේරක කිහිපයක් පමණි.
සමස්තයක් ලෙස මෙය තරමක් සම්මත ගොඩනැගීමේ වින්‍යාසයකි.
දැන් අපි දෙවන ගොඩනැගීමේ වින්‍යාසය දෙස බලමු. එය පළමු එකට බෙහෙවින් සමාන ය, නමුත් එක් වැදගත් වෙනසක් ඇත.
apiVersion: v1
kind: BuildConfig
metadata:
name: react-web-app-runtime
spec:
output:
to:
kind: ImageStreamTag
name: react-web-app-runtime:latest // 1
source: // 2
type: Image
images:
- from:
kind: ImageStreamTag
name: react-web-app-builder:latest // 3
paths:
- sourcePath: /opt/app-root/output/. // 4
destinationDir: . // 5
strategy: // 6
sourceStrategy:
from:
kind: ImageStreamTag
name: nginx-image-runtime:latest
incremental: true
type: Source
triggers:
- github:
secret: ${GITHUB_WEBHOOK_SECRET}
type: GitHub
- type: ConfigChange
- type: ImageChange
imageChange: {}
- type: ImageChange
imageChange:
from:
kind: ImageStreamTag
name: react-web-app-builder:latest // 7
එබැවින් දෙවන ගොඩනැගීමේ වින්‍යාසය ප්රතික්රියා-වෙබ්-යෙදුම-ධාවන කාලය වන අතර එය ඉතා සම්මතයෙන් ආරම්භ වේ.
1 ලෙස ලේබල් කර ඇති පේළිය අලුත් දෙයක් නොවේ - එය සරලව පවසන්නේ ගොඩනැගීමේ ප්‍රතිඵලය ප්රතික්රියා-වෙබ්-යෙදුම-ධාවන කාල රූපයට දමා ඇති බවයි.
පෙර වින්‍යාසයේ මෙන් 2 ලෙස ලේබල් කර ඇති රේඛාව, ප්‍රභව කේතය ලබා ගත යුත්තේ කොතැනින්ද යන්න දක්වයි. නමුත් මෙතනදි අපි කියන්නේ රූපයෙන් ගත්ත එකක් බව සලකන්න. එපමණක් නොව, අප විසින් නිර්මාණය කරන ලද රූපයෙන් - ප්රතික්රියා-වෙබ්-යෙදුම-බිල්ඩර් වෙතින් (ලේබල් 3 පේළියේ දක්වා ඇත). අපට භාවිතා කිරීමට අවශ්‍ය ගොනු රූපය තුළ ඇති අතර ඒවායේ පිහිටීම 4 ලෙස ලේබල් කර ඇති පේළියේ සකසා ඇත, අපගේ නඩුවේදී එය /opt/app-root/output/ වේ. ඔබට මතක නම්, අපගේ යෙදුම ගොඩනැගීමේ ප්‍රති results ල මත පදනම්ව ජනනය කරන ලද ගොනු ගබඩා කර ඇත්තේ මෙහිදීය.
5 යන ලේබලය සහිත පදයේ සඳහන් කර ඇති ගමනාන්ත ෆෝල්ඩරය හුදෙක් වත්මන් නාමාවලියයි (මේ සියල්ල, මතක තබා ගන්න, OpenShift නමින් හැඳින්වෙන කිසියම් ඉන්ද්‍රජාලික දෙයක් තුළ ක්‍රියාත්මක වන අතර ඔබේ දේශීය පරිගණකයේ නොවේ).
උපාය අංශය - 6 ලෙස ලේබල් කර ඇති පේළිය - පළමු ගොඩනැගීමේ වින්‍යාසයට සමාන වේ. අපි දැනටමත් ImageStream කොටසේ දැක ඇති nginx-image-runtime භාවිතා කිරීමට යන්නේ මෙවර පමණි.
අවසාන වශයෙන්, 7 ලෙස ලේබල් කර ඇති පේළිය ප්‍රේරක කොටසකි, එය ප්රතික්රියා-වෙබ්-යෙදුම-බිල්ඩර් රූපය වෙනස් වන සෑම අවස්ථාවකම මෙම ගොඩනැගීම සක්‍රිය කරයි.
එසේ නොමැති නම්, මෙම අච්චුවේ ඉතා සම්මත යෙදවුම් වින්‍යාසය මෙන්ම සේවා සහ මාර්ගවලට අදාළ දේවල් අඩංගු වේ, නමුත් අපි ඒ ගැන වැඩි විස්තර වෙත නොයන්නෙමු. යොදවනු ලබන රූපය react-web-app-runtime image බව කරුණාවෙන් සලකන්න.
යෙදුම් යෙදවීම
ඉතින් දැන් අපි ටෙම්ප්ලේට් එක බැලුවාම, අපි බලමු මේකෙන් Application එකක් deploy කරන්නේ කොහොමද කියලා.
අපගේ අච්චුව යෙදවීමට අපට oc නම් OpenShift සේවාදායක මෙවලම භාවිතා කළ හැක:
$ find . | grep openshiftio | grep application | xargs -n 1 oc apply -f
$ oc new-app --template react-web-app -p SOURCE_REPOSITORY_URL=https://github.com/lholmquist/react-web-app
ඉහත තිර පිටපතේ පළමු විධානය වන්නේ සැකිල්ලක් සොයා ගැනීමට හිතාමතාම ඉංජිනේරුමය මාර්ගයකි./openshiftio/application.yaml.
දෙවන විධානය මෙම අච්චුව මත පදනම්ව නව යෙදුමක් නිර්මාණය කරයි.
මෙම විධානයන් ක්‍රියාත්මක වූ පසු, අපට එකලස් කිරීම් දෙකක් ඇති බව අපට පෙනෙනු ඇත:
දළ විශ්ලේෂණය තිරය වෙත ආපසු යාම, අපි දියත් කරන ලද පොඩ් එක දකිමු:
සබැඳිය ක්ලික් කරන්න, අපව අපගේ යෙදුම වෙත ගෙන යනු ඇත, එය පෙරනිමි ප්රතික්රියා යෙදුම් පිටුව වේ:
අතිරේකය 1
කෝණික පෙම්වතුන් සඳහා අප ද ඇත .
OUTPUT_DIR විචල්‍යය හැර මෙහි රටාව සමාන වේ.
අතිරේකය 2
මෙම ලිපියෙන් අපි NGINX වෙබ් සේවාදායකයක් ලෙස භාවිතා කළෙමු, නමුත් එය Apache සමඟ ප්‍රතිස්ථාපනය කිරීම තරමක් පහසුය, ගොනුවේ අච්චුව වෙනස් කරන්න මත .
නිගමනය
මෙම ලිපි මාලාවේ පළමු කොටසේදී, OpenShift වේදිකාවේ නවීන වෙබ් යෙදුම් ඉක්මනින් යෙදවිය යුතු ආකාරය අපි පෙන්වා දුන්නෙමු. අද අපි වෙබ් යෙදුම් රූපයක් කරන්නේ කුමක්ද සහ එය වඩාත් නිෂ්පාදන-සුදානම් යෙදුම් ගොඩනැගීමක් නිර්මාණය කිරීම සඳහා දම්වැල් සහිත ගොඩනැගීම් භාවිතා කරමින් NGINX වැනි පිරිසිදු වෙබ් සේවාදායකයක් සමඟ ඒකාබද්ධ කරන්නේ කෙසේදැයි සොයා බැලුවෙමු. මෙම ලිපි මාලාවේ මීළඟ සහ අවසාන ලිපියෙන්, OpenShift හි ඔබගේ යෙදුම සඳහා සංවර්ධන සේවාදායකයක් ධාවනය කරන්නේ කෙසේද සහ දේශීය සහ දුරස්ථ ගොනු සමමුහුර්ත කිරීම සහතික කරන්නේ කෙසේදැයි අපි පෙන්වමු.
මෙම ලිපි මාලාවේ අන්තර්ගතය
- 1 වන කොටස: ;
- 2 කොටස: නිෂ්පාදන යෙදවීම සඳහා ආශ්‍රිත OpenShift එකලස් කිරීම් භාවිතා කරමින්, NGINX වැනි, පවතින HTTP සේවාදායක රූපයක් සමඟ නව S2I රූපයක් භාවිතා කරන්නේ කෙසේද;
- 3 වෙනි කොටස: OpenShift වේදිකාවේ ඔබගේ යෙදුම සඳහා සංවර්ධන සේවාදායකයක් ධාවනය කර එය දේශීය ගොනු පද්ධතිය සමඟ සමමුහුර්ත කරන්නේ කෙසේද.
අතිරේක සම්පත්
- නොමිලේ විද්‍යුත් පොත .
- පිළිබඳ තොරතුරු .
මූලාශ්රය: www.habr.com