{"id":90874,"date":"2020-08-07T01:42:20","date_gmt":"2020-08-06T23:42:20","guid":{"rendered":"https:\/\/prohoster.info\/blog\/administrirovanie\/sovremennye-prilozheniya-na-openshift-chast-2-svyazannye-sborki-chained-builds"},"modified":"2020-08-07T01:42:20","modified_gmt":"2020-08-06T23:42:20","slug":"sovremennye-prilozheniya-na-openshift-chast-2-svyazannye-sborki-chained-builds","status":"publish","type":"post","link":"https:\/\/prohoster.info\/cs\/blog\/administrirovanie\/sovremennye-prilozheniya-na-openshift-chast-2-svyazannye-sborki-chained-builds","title":{"rendered":"Modern\u00ed aplikace na OpenShift, \u010d\u00e1st 2: spojen\u00e9 sestavy chained builds","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Ahoj v\u0161ichni! Zde je druh\u00fd p\u0159\u00edsp\u011bvek z na\u0161\u00ed s\u00e9rie, ve kter\u00e9 ukazujeme, jak nasazovat modern\u00ed webov\u00e9 aplikace na Red Hat OpenShift. <\/p>\n

\"Modern\u00ed
\n
\nV p\u0159edchoz\u00edm p\u0159\u00edsp\u011bvku jsme se lehce dotkli mo\u017enost\u00ed nov\u00e9ho builder obrazu S2I (source-to-image), kter\u00fd je ur\u010den pro stavbu a nasazen\u00ed modern\u00edch webov\u00fdch aplikac\u00ed na platform\u011b OpenShift. Tehdy n\u00e1s zaj\u00edmalo t\u00e9ma rychl\u00e9ho nasazen\u00ed aplikac\u00ed, ale dnes se pod\u00edv\u00e1me, jak pou\u017e\u00edvat S2I obraz jako \"\u010dist\u00fd\" builder obraz a kombinovat ho se spojen\u00fdmi sestavami OpenShift.
\n<\/a><\/noindex><\/p>\n

\u010cist\u00fd builder obraz<\/h3>\n

\nJak jsme zm\u00ednili v prvn\u00ed \u010d\u00e1sti, v\u011bt\u0161ina modern\u00edch webov\u00fdch aplikac\u00ed m\u00e1 takzvanou f\u00e1zi sestaven\u00ed, ve kter\u00e9 se obvykle prov\u00e1d\u011bj\u00ed operace, jako je transpila\u010dn\u00ed k\u00f3d, spojov\u00e1n\u00ed n\u011bkolika soubor\u016f a minifikace. Tyto soubory, co\u017e jsou statick\u00e9 HTML, JavaScript a CSS, se ukl\u00e1daj\u00ed do v\u00fdstupn\u00ed slo\u017eky. Um\u00edst\u011bn\u00ed t\u00e9to slo\u017eky obvykle z\u00e1vis\u00ed na tom, jak\u00e9 n\u00e1stroje pro sestaven\u00ed se pou\u017e\u00edvaj\u00ed, a pro React to bude slo\u017eka .\\\/build (k t\u00e9to ot\u00e1zce se je\u0161t\u011b podrobn\u011bji vr\u00e1t\u00edme n\u00ed\u017ee).<\/p>\n

Source-to-Image (S2I)<\/h4>\n

\nV tomto p\u0159\u00edsp\u011bvku se v\u016fbec nec\u00edt\u00edme t\u00e9ma \"co je S2I a jak ho pou\u017e\u00edvat\" (v\u00edce o tom si m\u016f\u017eete p\u0159e\u010d\u00edst zde<\/a><\/noindex>), ale je d\u016fle\u017eit\u00e9 jasn\u011b si p\u0159edstavit dv\u011b f\u00e1ze tohoto procesu, abychom pochopili, co vlastn\u011b obraz Web App Builder d\u011bl\u00e1.<\/p>\n

F\u00e1ze sestavov\u00e1n\u00ed (assemble phase)<\/h4>\n

\nF\u00e1ze sestavov\u00e1n\u00ed je sama o sob\u011b velmi podobn\u00e1 tomu, co se stane, kdy\u017e spust\u00edte p\u0159\u00edkaz docker build a v\u00fdsledek z\u00edsk\u00e1te nov\u00fd Docker obraz. Odpov\u00eddaj\u00edc\u00edm zp\u016fsobem tato f\u00e1ze nast\u00e1v\u00e1, kdy\u017e spust\u00edte sestaven\u00ed na platform\u011b OpenShift.<\/p>\n

V p\u0159\u00edpad\u011b obrazu Web App Builder za instalaci z\u00e1vislost\u00ed va\u0161\u00ed aplikace a spu\u0161t\u011bn\u00ed sestaven\u00ed odpov\u00edd\u00e1 assemble script<\/a><\/noindex>. Ve v\u00fdchoz\u00edm nastaven\u00ed builder obraz pou\u017e\u00edv\u00e1 konstrukci npm run build, ale lze ji p\u0159epsat prost\u0159ednictv\u00edm prom\u011bnn\u00e9 prost\u0159ed\u00ed NPM_BUILD.<\/p>\n

Jak jsme ji\u017e zm\u00ednili, um\u00edst\u011bn\u00ed hotov\u00e9, ji\u017e zkompilovan\u00e9 aplikace z\u00e1vis\u00ed na pou\u017eit\u00e9m n\u00e1stroji. Nap\u0159\u00edklad v p\u0159\u00edpad\u011b React to bude slo\u017eka \\\/build, a pro aplikace Angular \u2013 slo\u017eka project_name\\\/dist. A jak ji\u017e bylo zm\u00edn\u011bno v p\u0159edchoz\u00edm p\u0159\u00edsp\u011bvku, um\u00edst\u011bn\u00ed output adres\u00e1\u0159e, kter\u00e9 je ve v\u00fdchoz\u00edm nastaven\u00ed nastaveno na build, lze p\u0159edefinovat pomoc\u00ed prom\u011bnn\u00e9 prost\u0159ed\u00ed OUTPUT_DIR. A proto\u017ee se um\u00edst\u011bn\u00ed output slo\u017eky li\u0161\u00ed mezi frameworky, prost\u011b zkop\u00edrujete vygenerovan\u00fd output do standardn\u00ed slo\u017eky v obraze, konkr\u00e9tn\u011b do \\\/opt\\\/apt-root\\\/output. To je d\u016fle\u017eit\u00e9 pro pochopen\u00ed dal\u0161\u00ed \u010d\u00e1sti tohoto \u010dl\u00e1nku, ale te\u010f si rychle p\u0159ehledn\u011b projdeme dal\u0161\u00ed krok \u2013 spou\u0161t\u011bn\u00ed (run phase).<\/p>\n

F\u00e1ze spou\u0161t\u011bn\u00ed (run phase)<\/h4>\n

\nTato f\u00e1ze nast\u00e1v\u00e1, kdy\u017e je pro nov\u00fd obraz vytvo\u0159en\u00fd b\u011bhem f\u00e1ze sestaven\u00ed proveden p\u0159\u00edkaz docker run. To se tak\u00e9 d\u011bje p\u0159i nasazen\u00ed na platform\u011b OpenShift. Ve v\u00fdchoz\u00edm nastaven\u00ed run script<\/a><\/noindex> pou\u017e\u00edv\u00e1 serve module<\/a><\/noindex> k serv\u00edrov\u00e1n\u00ed statick\u00e9ho obsahu ulo\u017een\u00e9ho v uveden\u00e9m standardn\u00edm output adres\u00e1\u0159i.<\/p>\n

Tato metoda je dobr\u00e1 pro rychl\u00e9 nasazen\u00ed aplikac\u00ed, ale obecn\u011b se nedoporu\u010duje serv\u00edrovat statick\u00fd obsah t\u00edmto zp\u016fsobem. A proto\u017ee skute\u010dn\u011b obsluhujeme pouze statick\u00fd obsah, nen\u00ed pot\u0159eba m\u00edt uvnit\u0159 na\u0161eho obrazu Node.js \u2013 sta\u010d\u00ed webov\u00fd server.<\/p>\n

To znamen\u00e1, \u017ee p\u0159i sestavov\u00e1n\u00ed pot\u0159ebujeme n\u011bco jin\u00e9ho ne\u017e p\u0159i vykon\u00e1v\u00e1n\u00ed. V takov\u00e9 situaci se hod\u00ed propojovan\u00e9 sestavy (chained builds).<\/p>\n

Propojovan\u00e9 sestavy (chained builds)<\/h3>\n

\nCo se p\u00ed\u0161e o chained builds<\/a><\/noindex> v dokumentaci OpenShift:<\/p>\n

\u201eDv\u011b sestavy lze propojit, p\u0159i\u010dem\u017e jedna generuje zkompilovan\u00fd v\u00fdstup a druh\u00e1 um\u00edst\u00ed tento v\u00fdstup do samostatn\u00e9ho obrazu, kter\u00fd se pou\u017e\u00edv\u00e1 pro spu\u0161t\u011bn\u00ed tohoto v\u00fdstupu.\u201c\n<\/p><\/blockquote>\n

\nJin\u00fdmi slovy, m\u016f\u017eeme pou\u017e\u00edt obraz Web App Builder pro spu\u0161t\u011bn\u00ed na\u0161\u00ed sestavy a pot\u00e9 pou\u017e\u00edt obraz webov\u00e9ho serveru, nap\u0159\u00edklad NGINX, k serv\u00edrov\u00e1n\u00ed na\u0161eho obsahu.<\/p>\n

Takto m\u016f\u017eeme pou\u017e\u00edt obraz Web App Builder jako \u201e\u010dist\u00e9ho\u201c buildera a m\u00edt z\u00e1rove\u0148 mal\u00fd runtime obraz.<\/p>\n

Te\u010f si to vysv\u011btl\u00edme na konkr\u00e9tn\u00edm p\u0159\u00edkladu.<\/p>\n

Na cvi\u010den\u00ed pou\u017eijeme jednoduchou aplikaci React<\/a><\/noindex>, vytvo\u0159enou pomoc\u00ed n\u00e1stroje p\u0159\u00edkazov\u00e9ho \u0159\u00e1dku create-react-app.<\/p>\n

Sestavit v\u0161e dohromady n\u00e1m pom\u016f\u017ee \u0161ablonov\u00fd soubor OpenShift<\/a><\/noindex>.<\/p>\n

Pod\u00edvejme se na tento soubor podrobn\u011bji a za\u010dneme sekc\u00ed parametr\u016f.<\/p>\n

parametry:\n  - n\u00e1zev: SOURCE_REPOSITORY_URL\n    popis: Zdrojov\u00e1 URL pro aplikaci\n    zobrazovan\u00e9N\u00e1zev: Zdrojov\u00e1 URL\n    povinn\u00e9: true\n  - n\u00e1zev: SOURCE_REPOSITORY_REF\n    popis: N\u00e1zev v\u011btve pro aplikaci\n    zobrazovan\u00e9N\u00e1zev: Zdroje v\u011btve\n    hodnota: master\n    povinn\u00e9: true\n  - n\u00e1zev: SOURCE_REPOSITORY_DIR\n    popis: Um\u00edst\u011bn\u00ed v r\u00e1mci zdrojov\u00e9ho repozit\u00e1\u0159e aplikace\n    zobrazovan\u00e9N\u00e1zev: Zdroje adres\u00e1\u0159\n    hodnota: .\n    povinn\u00e9: true\n  - n\u00e1zev: OUTPUT_DIR\n    popis: Um\u00edst\u011bn\u00ed zkompilovan\u00fdch statick\u00fdch soubor\u016f z va\u0161eho gener\u00e1toru webov\u00fdch aplikac\u00ed\n    zobrazovan\u00e9N\u00e1zev: V\u00fdstupn\u00ed adres\u00e1\u0159\n    hodnota: build\n    povinn\u00e9: false\n<\/code><\/pre>\n
\nV\u0161e je zde docela jasn\u00e9, ale stoj\u00ed za to v\u011bnovat pozornost parametru OUTPUT_DIR. Pro React aplikaci z na\u0161eho p\u0159\u00edkladu se nemus\u00edme ob\u00e1vat, proto\u017ee React pou\u017e\u00edv\u00e1 jako v\u00fdstupn\u00ed slo\u017eku hodnotu podle v\u00fdchoz\u00edho nastaven\u00ed, zat\u00edmco v p\u0159\u00edpad\u011b Angularu nebo n\u011b\u010deho jin\u00e9ho bude t\u0159eba tento parametr zm\u011bnit na po\u017eadovan\u00fd.<\/p>\n
Nyn\u00ed se pod\u00edvejme na sekci ImageStream.<\/p>\n
- apiVersion: v1\n  kind: ImageStream\n  metadata:\n    name: react-web-app-builder  \/\/ 1 \n  spec: {}\n- apiVersion: v1\n  kind: ImageStream\n  metadata:\n    name: react-web-app-runtime  \/\/ 2 \n  spec: {}\n- apiVersion: v1\n  kind: ImageStream\n  metadata:\n    name: web-app-builder-runtime \/\/ 3\n  spec:\n    tags:\n    - name: latest\n      from:\n        kind: DockerImage\n        name: nodeshift\/ubi8-s2i-web-app:10.x\n- apiVersion: v1\n  kind: ImageStream\n  metadata:\n    name: nginx-image-runtime \/\/ 4\n  spec:\n    tags:\n    - name: latest\n      from:\n        kind: DockerImage\n        name: 'centos\/nginx-112-centos7:latest'\n<\/code><\/pre>\n
\nPod\u00edvejte se na t\u0159et\u00ed a \u010dtvrt\u00fd obraz. Oba jsou definov\u00e1ny jako Docker obrazy a z\u0159eteln\u011b vid\u00edme, odkud poch\u00e1zej\u00ed.<\/p>\n
T\u0159et\u00ed obraz je web-app-builder a poch\u00e1z\u00ed z nodeshift\/ubi8-s2i-web-app s tagem 10.x na Docker hub<\/a><\/noindex>.<\/p>\n
\u010ctvrt\u00fd obraz je NGINX (verze 1.12) s tagem latest na Docker hub<\/a><\/noindex>.<\/p>\n
Nyn\u00ed se pod\u00edvejme na dva prvn\u00ed obrazy. Oba jsou na za\u010d\u00e1tku pr\u00e1zdn\u00e9 a vytv\u00e1\u0159ej\u00ed se pouze b\u011bhem f\u00e1ze sestaven\u00ed (build phase). Prvn\u00ed obraz \u2013 react-web-app-builder \u2013 bude v\u00fdsledkem f\u00e1ze sestavov\u00e1n\u00ed, kter\u00e1 spoj\u00ed obraz web-app-builder-runtime a n\u00e1\u0161 zdrojov\u00fd k\u00f3d. Pr\u00e1v\u011b proto jsme do n\u00e1zvu tohoto obrazu p\u0159idali \u201e-builder\u201c.<\/p>\n
Druh\u00fd obraz \u2013 react-web-app-runtime \u2013 bude v\u00fdsledkem spojen\u00ed nginx-image-runtime a n\u011bkter\u00fdch soubor\u016f z obrazu react-web-app-builder. Tento obraz bude tak\u00e9 pou\u017eit p\u0159i nasazen\u00ed a bude obsahovat pouze webov\u00fd server a statick\u00fd HTML, JavaScript, CSS na\u0161\u00ed aplikace.<\/p>\n
Zmaten\u00e9? Pod\u00edvejme se nyn\u00ed na konfigurace sestaven\u00ed a bude to trochu jasn\u011bj\u0161\u00ed.<\/p>\n
V na\u0161\u00ed \u0161ablon\u011b jsou dv\u011b konfigurace sestaven\u00ed. Zde je prvn\u00ed z nich a je docela standardn\u00ed:<\/p>\n
  apiVersion: v1\n  kind: BuildConfig\n  metadata:\n    name: react-web-app-builder\n  spec:\n    output:\n      to:\n        kind: ImageStreamTag\n        name: react-web-app-builder:latest \\\/\\\/ 1\n    source:   \\\/\\\/ 2 \n      git:\n        uri: ${SOURCE_REPOSITORY_URL}\n        ref: ${SOURCE_REPOSITORY_REF}\n      contextDir: ${SOURCE_REPOSITORY_DIR}\n      type: Git\n    strategy:\n      sourceStrategy:\n        env:\n          - name: OUTPUT_DIR \\\/\\\/ 3 \n            value: ${OUTPUT_DIR}\n        from:\n          kind: ImageStreamTag\n          name: web-app-builder-runtime:latest \\\/\\\/ 4\n        incremental: true \\\/\\\/ 5\n      type: Source\n    triggers: \\\/\\\/ 6\n    - github:\n        secret: ${GITHUB_WEBHOOK_SECRET}\n      type: GitHub\n    - type: ConfigChange\n    - imageChange: {}\n      type: ImageChange\n<\/code><\/pre>\n
\nJak vid\u00edme, \u0159\u00e1dek s ozna\u010den\u00edm 1 \u0159\u00edk\u00e1, \u017ee v\u00fdsledek t\u00e9to sestavy bude um\u00edst\u011bn do obrazu react-web-app-builder, kter\u00fd jsme vid\u011bli d\u0159\u00edve v sekci ImageStream\u016f.<\/p>\n
\u0158\u00e1dek s ozna\u010den\u00edm 2 \u0159\u00edk\u00e1, odkud br\u00e1t k\u00f3d. V na\u0161em p\u0159\u00edpad\u011b je to git repozit\u00e1\u0159, a um\u00edst\u011bn\u00ed, ref a adres\u00e1\u0159 kontextu jsou ur\u010deny parametry, kter\u00e9 jsme ji\u017e vid\u011bli v\u00fd\u0161e.<\/p>\n
\u0158\u00e1dek s ozna\u010den\u00edm 3 \u2013 to jsme ji\u017e vid\u011bli v sekci parameters. P\u0159id\u00e1v\u00e1 prom\u011bnnou prost\u0159ed\u00ed OUTPUT_DIR, kter\u00e1 je v na\u0161em p\u0159\u00edkladu rovna build.
\n\u0158\u00e1dek s ozna\u010den\u00edm 4 \u0159\u00edk\u00e1, \u017ee m\u00e1me pou\u017e\u00edt obraz web-app-builder-runtime, kter\u00fd jsme u\u017e vid\u011bli v sekci ImageStream.<\/p>\n
\u0158\u00e1dek s ozna\u010den\u00edm 5 \u0159\u00edk\u00e1, \u017ee chceme pou\u017e\u00edt inkrement\u00e1ln\u00ed build, pokud S2I-obraz to podporuje, a obraz Web App Builder \u2013 podporuje. P\u0159i prvn\u00edm spu\u0161t\u011bn\u00ed, po dokon\u010den\u00ed f\u00e1ze skl\u00e1d\u00e1n\u00ed, obraz ulo\u017e\u00ed slo\u017eku node_modules do archivu. P\u0159i n\u00e1sledn\u00fdch spu\u0161t\u011bn\u00edch bude obraz prost\u011b rozbalit tuto slo\u017eku, aby zkr\u00e1til dobu sestaven\u00ed.<\/p>\n
A nakonec, \u0159\u00e1dek s ozna\u010den\u00edm 6 \u2013 to jsou prost\u011b n\u011bkter\u00e9 spou\u0161t\u011b\u010de, aby se sestava spou\u0161t\u011bla automaticky, bez ru\u010dn\u00edho z\u00e1sahu, kdy\u017e se n\u011bco m\u011bn\u00ed.<\/p>\n
Obecn\u011b je to docela standardn\u00ed konfigurace sestavy.<\/p>\n
Nyn\u00ed se pod\u00edvejme na druhou konfiguraci sestavy. Je velmi podobn\u00e1 prvn\u00ed, ale m\u00e1 jeden d\u016fle\u017eit\u00fd rozd\u00edl.<\/p>\n
apiVersion: v1\n  kind: BuildConfig\n  metadata:\n    name: react-web-app-runtime\n  spec:\n    output:\n      to:\n        kind: ImageStreamTag\n        name: react-web-app-runtime:latest \\\/\\\/ 1\n    source: \\\/\\\/ 2\n      type: Image\n      images:                              \n        - from:\n            kind: ImageStreamTag\n            name: react-web-app-builder:latest \\\/\\\/ 3\n          paths:\n            - sourcePath: \\\/opt\\\/app-root\\\/output\\\/.  \\\/\\\/ 4\n              destinationDir: .  \\\/\\\/ 5\n             \n    strategy: \\\/\\\/ 6\n      sourceStrategy:\n        from:\n          kind: ImageStreamTag\n          name: nginx-image-runtime:latest\n        incremental: true\n      type: Source\n    triggers:\n    - github:\n        secret: ${GITHUB_WEBHOOK_SECRET}\n      type: GitHub\n    - type: ConfigChange\n    - type: ImageChange\n      imageChange: {}\n    - type: ImageChange\n      imageChange:\n        from:\n          kind: ImageStreamTag\n          name: react-web-app-builder:latest \\\/\\\/ 7\n<\/code><\/pre>\n
\nTak\u017ee druh\u00e1 konfigurace sestaven\u00ed \u2013 react-web-app-runtime, a za\u010d\u00edn\u00e1 docela standardn\u011b.<\/p>\n
V \u0159\u00e1dku s ozna\u010den\u00edm 1 nen\u00ed nic nov\u00e9ho \u2013 pouze \u0159\u00edk\u00e1, \u017ee v\u00fdsledek sestaven\u00ed je ulo\u017een v obraze react-web-app-runtime.<\/p>\n
\u0158\u00e1dek s ozna\u010den\u00edm 2, stejn\u011b jako v p\u0159edchoz\u00ed konfiguraci, uv\u00e1d\u00ed, odkud br\u00e1t zdrojov\u00fd k\u00f3d. Ale vezm\u011bte na v\u011bdom\u00ed, \u017ee zde \u0159\u00edk\u00e1me, \u017ee je br\u00e1n z obrazu. A to z toho obrazu, kter\u00fd jsme pr\u00e1v\u011b vytvo\u0159ili \u2013 z react-web-app-builder (uveden\u00e9ho v \u0159\u00e1dku s ozna\u010den\u00edm 3). Soubory, kter\u00e9 chceme pou\u017e\u00edt, se nach\u00e1zej\u00ed uvnit\u0159 obrazu a jejich um\u00edst\u011bn\u00ed tam je definov\u00e1no v \u0159\u00e1dku s ozna\u010den\u00edm 4, v na\u0161em p\u0159\u00edpad\u011b to je \/opt\/app-root\/output\/. Pokud si vzpom\u00edn\u00e1te, pr\u00e1v\u011b tam se ukl\u00e1daj\u00ed soubory vygenerovan\u00e9 na z\u00e1klad\u011b v\u00fdsledk\u016f sestaven\u00ed na\u0161\u00ed aplikace.<\/p>\n
C\u00edlov\u00e1 slo\u017eka, ur\u010den\u00e1 v \u0159\u00e1dku s ozna\u010den\u00edm 5 \u2013 to je prost\u011b aktu\u00e1ln\u00ed adres\u00e1\u0159 (to v\u0161echno se p\u0159itom to\u010d\u00ed uvnit\u0159 n\u011bjak\u00e9 magick\u00e9 v\u011bci zvan\u00e9 OpenShift, a ne na va\u0161em lok\u00e1ln\u00edm po\u010d\u00edta\u010di).<\/p>\n
Sekce strategie \u2013 \u0159\u00e1dek s ozna\u010den\u00edm 6 \u2013 se tak\u00e9 podob\u00e1 prvn\u00ed konfiguraci sestaven\u00ed. Tentokr\u00e1t se chyst\u00e1me pou\u017e\u00edt nginx-image-runtime, kter\u00fd jsme ji\u017e vid\u011bli v \u010d\u00e1sti ImageStream.<\/p>\n
Nakonec, \u0159\u00e1dek s ozna\u010den\u00edm 7 \u2013 to je sekce spou\u0161t\u011b\u010d\u016f, kter\u00e1 aktivuje toto sestaven\u00ed poka\u017ed\u00e9, kdy\u017e se zm\u011bn\u00ed obraz react-web-app-builder.<\/p>\n
Jinak tento \u0161ablon obsahuje docela standardn\u00ed konfiguraci nasazen\u00ed, stejn\u011b jako v\u011bci, kter\u00e9 se t\u00fdkaj\u00ed slu\u017eeb a tras, ale nebudeme se do toho pou\u0161t\u011bt. V\u0161imn\u011bte si, \u017ee obraz, kter\u00fd bude nasazen \u2013 je obraz react-web-app-runtime.<\/p>\n
Nasazen\u00ed aplikace<\/h3>\n
\nTak\u017ee, pot\u00e9 co jsme se pod\u00edvali na \u0161ablonu, se pod\u00edvejme, jak ji pou\u017e\u00edt k nasazen\u00ed aplikace.<\/p>\n
M\u016f\u017eeme pou\u017e\u00edt klientsk\u00fd n\u00e1stroj OpenShift nazvan\u00fd oc, abychom nasadili na\u0161i \u0161ablonu:<\/p>\n
$ find . | grep openshiftio | grep application | xargs -n 1 oc apply -f\n\n$ oc new-app --template react-web-app -p SOURCE_REPOSITORY_URL=https:\/\/github.com\/lholmquist\/react-web-app\n<\/code><\/pre>\n
\nPrvn\u00ed p\u0159\u00edkaz na obrazovce v\u00fd\u0161e je \u00famysln\u011b in\u017een\u00fdrsk\u00fd zp\u016fsob, jak naj\u00edt \u0161ablonu .\/openshiftio\/application.yaml.<\/p>\n
Druh\u00fd p\u0159\u00edkaz jednodu\u0161e vytv\u00e1\u0159\u00ed novou aplikaci na z\u00e1klad\u011b t\u00e9to \u0161ablony.<\/p>\n
Po proveden\u00ed t\u011bchto p\u0159\u00edkaz\u016f uvid\u00edme, \u017ee m\u00e1me dv\u011b sestaven\u00ed:<\/p>\n
\"Modern\u00ed<\/p>\n
A pokud se vr\u00e1t\u00edme na obrazovku p\u0159ehledu, uvid\u00edme spu\u0161t\u011bn\u00fd pod:<\/p>\n
\"Modern\u00ed<\/p>\n
Kliknut\u00edm na odkaz p\u0159ejdeme k na\u0161\u00ed aplikaci, kter\u00e1 p\u0159edstavuje v\u00fdchoz\u00ed str\u00e1nku aplikace React App:<\/p>\n
\"Modern\u00ed<\/p>\n
Dodatek 1<\/h3>\n
\nPro milovn\u00edky Angularu m\u00e1me tak\u00e9 p\u0159\u00edklad aplikace<\/a><\/noindex>.<\/p>\n
\u0160ablona je zde stejn\u00e1, s v\u00fdjimkou prom\u011bnn\u00e9 OUTPUT_DIR.<\/p>\n
Dodatek 2<\/h3>\n
\nV tomto \u010dl\u00e1nku jsme pou\u017eili jako webov\u00fd server NGINX, ale lze ho snadno nahradit Apache, sta\u010d\u00ed zm\u011bnit v \u0161ablonov\u00e9m souboru obraz NGINX<\/a><\/noindex> na obraz Apache<\/a><\/noindex>.<\/p>\n
Z\u00e1v\u011br<\/h3>\n
\nV prvn\u00ed \u010d\u00e1sti t\u00e9to s\u00e9rie jsme uk\u00e1zali, jak rychle nasadit modern\u00ed webov\u00e9 aplikace na platform\u011b OpenShift. Dnes jsme zkoumali, co d\u011bl\u00e1 obraz Web App a jak ho lze kombinovat s \u010dist\u00fdm webov\u00fdm serverem typu NGINX pomoc\u00ed spojen\u00fdch sestaven\u00ed (chained build) k vytvo\u0159en\u00ed lep\u0161\u00edho prost\u0159ed\u00ed pro produkci. V n\u00e1sleduj\u00edc\u00edm, z\u00e1v\u011bre\u010dn\u00e9m \u010dl\u00e1nku t\u00e9to s\u00e9rie uk\u00e1\u017eeme, jak spustit na OpenShift v\u00fdvojov\u00fd server pro svou aplikaci a synchronizovat m\u00edstn\u00ed a vzd\u00e1len\u00e9 soubory.<\/p>\n
Obsah t\u00e9to s\u00e9rie \u010dl\u00e1nk\u016f<\/h3>\n
<\/p>\n