Fampiharana maoderina amin'ny OpenShift, ampahany 2: fananganana rojo

Salama daholo! Ity no lahatsoratra faharoa amin'ny andian-dahatsoratra izay mampiseho ny fomba fametrahana ny fampiharana tranonkala maoderina amin'ny Red Hat OpenShift.

Fampiharana maoderina amin'ny OpenShift, ampahany 2: fananganana rojo

Ao amin'ny lahatsoratra teo aloha, dia nikasika kely momba ny fahaiza-manaon'ny S2I (source-to-image) vaovao mpamorona sary, izay natao hananganana sy hampiasana ny fampiharana tranonkala maoderina amin'ny sehatra OpenShift. Avy eo dia liana tamin'ny lohahevitra fametrahana fampiharana haingana izahay, ary anio dia hojerentsika ny fomba fampiasana sary S2I ho sary mpanorina "madio" ary manambatra azy amin'ireo fivoriambe OpenShift mifandraika.

Sary mpanamboatra madio

Araka ny voalazanay tao amin'ny Fizarana XNUMX, ny ankamaroan'ny fampiharana tranonkala maoderina dia manana dingana antsoina hoe fananganana, izay mazàna manao asa toy ny famadihana kaody, fampifangaroana rakitra marobe ary fampihenana. Ireo rakitra azo vokatry ireo asa ireo - ary ity dia HTML, JavaScript ary CSS - dia voatahiry ao amin'ny lahatahiry famoahana. Ny toerana misy an'ity lahatahiry ity matetika dia miankina amin'ny fitaovana fananganana ampiasaina, ary ho an'ny React dia ity ny lahatahiry ./build (hiverina amin'ny antsipiriany bebe kokoa eto ambany isika).

Loharanon-tsary (S2I)

Amin'ity lahatsoratra ity dia tsy miresaka momba ny lohahevitra hoe "inona ny S2I sy ny fomba fampiasana azy" (azonao atao ny mamaky bebe kokoa momba ity eto), fa zava-dehibe ny mahafantatra tsara ireo dingana roa amin'ity dingana ity mba hahatakarana ny zavatra ataon'ny sary Web App Builder.

Fivoriambe

Ny dingana fivoriambe dia mitovy amin'ny zava-mitranga rehefa mihazakazaka docker build ianao ary miafara amin'ny sary Docker vaovao. Noho izany, ity dingana ity dia mitranga rehefa manomboka fananganana amin'ny sehatra OpenShift.

Raha ny sary Web App Builder dia tompon'andraikitra amin'ny fametrahana ny fiankinan'ny rindranasao sy ny fampandehanana ny fananganana. assemble script. Amin'ny alàlan'ny default, ny sarin'ny mpanamboatra dia mampiasa ny fananganana fananganana npm run, saingy azo ovaina izany amin'ny alàlan'ny fari-piainana NPM_BUILD.

Araka ny voalazanay teo aloha, ny toerana misy ny fampiharana efa vita dia miankina amin'ny fitaovana ampiasainao. Ohatra, amin'ny tranga React dia ity ny ./build folder, ary ho an'ny fampiharana Angular dia ny project_name/dist folder. Ary, araka ny efa naseho tao amin'ny lahatsoratra teo aloha, ny toerana misy ny lahatahiry famoahana, izay amboarina amin'ny alàlan'ny default, dia azo ovaina amin'ny alàlan'ny fari-piainana OUTPUT_DIR. Eny, satria ny toerana misy ny fampirimana vokatra dia tsy mitovy amin'ny framework mankany amin'ny framework, dia adikao fotsiny ny vokatra vokarina amin'ny lahatahiry mahazatra ao amin'ny sary, izany hoe /opt/apt-root/output. Zava-dehibe izany amin'ny fahatakarana ny ambin'ity lahatsoratra ity, fa amin'izao fotoana izao dia andeha hojerentsika haingana ny dingana manaraka - ny dingana mihazakazaka.

dingana mihazakazaka

Ity dingana ity dia mitranga rehefa misy antso ho an'ny docker run atao amin'ny sary vaovao noforonina nandritra ny dingana fivoriambe. Toy izany koa no mitranga rehefa miparitaka amin'ny sehatra OpenShift. toerana misy anao run script fampiasana manompo module mba hanolotra votoaty static hita ao amin'ny lahatahiry famoahana manara-penitra etsy ambony.

Ity fomba ity dia tsara amin'ny fametrahana fampiharana haingana, saingy amin'ny ankapobeny dia tsy soso-kevitra ny hanolotra votoaty static amin'ity fomba ity. Eny, satria raha ny tena izy dia tsy manome afa-tsy votoaty static isika, tsy mila Node.js apetraka ao anatin'ny sarintsika - dia ampy ny mpizara tranonkala.

Raha lazaina amin'ny teny hafa, rehefa mivory isika dia mila zavatra iray, rehefa manatanteraka dia mila zavatra hafa. Amin'ity toe-javatra ity dia ilaina ny fananganana rojo vy.

Fananganana rojo

Izany no soratan'izy ireo fananganana rojo vy ao amin'ny antontan-taratasy OpenShift:

"Ny fivoriambe roa dia azo ampifandraisina miaraka, ka ny iray mamorona sampana voaangona ary ny iray hafa mampiantrano an'io singa io amin'ny sary misaraka izay ampiasaina hampandehanana io sampana io."

Raha lazaina amin'ny teny hafa dia afaka mampiasa ny sarin'ny Web App Builder isika mba hampandehanana ny fananganana, ary avy eo mampiasa ny sarin'ny mpizara tranonkala, ilay NGINX mitovy, mba hanompoana ny atiny.

Noho izany, afaka mampiasa ny sary Web App Builder ho toy ny mpanamboatra "madio" isika ary miaraka amin'izay koa dia manana sary kely mandeha.

Andeha hojerentsika izany miaraka amin'ny ohatra manokana.

Ho an'ny fampiofanana dia hampiasainay fampiharana React tsotra, noforonina tamin'ny alalan'ny famoronana-react-app fitaovana andalana baiko.

Hanampy antsika hampitambatra ny zava-drehetra izany OpenShift rakitra template.

Andeha hojerentsika amin'ny antsipiriany bebe kokoa ity rakitra ity, ary manomboka amin'ny fizarana paramètre.

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

Ny zava-drehetra eto dia mazava tsara, fa mendrika ny mandinika ny OUTPUT_DIR parameter. Ho an'ny fampiharana React amin'ny ohatra asehontsika dia tsy misy tokony hatahorana, satria ny React dia mampiasa ny sanda default ho fampirimana famoahana, fa raha ny Angular na zavatra hafa dia mila ovaina io paramèter io raha ilaina.

Andeha hojerentsika ny fizarana 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'

Jereo ny sary fahatelo sy fahefatra. Samy voafaritra ho sary Docker izy ireo, ary azonao jerena tsara ny fiaviany.

Ny sary fahatelo dia web-app-builder ary avy amin'ny nodeshift/ubi8-s2i-web-app misy marika 10.x amin'ny Docker hub.

Ny fahefatra dia sary NGINX (version 1.12) miaraka amin'ny marika farany Docker hub.

Andeha hojerentsika ireo sary roa voalohany. Samy banga izy ireo eo am-piandohana ary mandritra ny dingana fananganana ihany no noforonina. Ny sary voalohany, react-web-app-builder, dia vokatry ny dingan'ny fivoriambe izay hanambatra ny sary web-app-builder-runtime sy ny code source. Izany no nahatonga anay nampiana "-builder" tamin'ny anaran'ity sary ity.

Ny sary faharoa - react-web-app-runtime - dia vokatry ny fampifangaroana ny nginx-image-runtime sy ny rakitra sasany avy amin'ny sary react-web-app-builder. Ity sary ity dia hampiasaina mandritra ny fametrahana ary tsy hisy afa-tsy ny mpizara tranonkala sy HTML static, JavaScript, CSS amin'ny fampiharanay.

Misafotofoto? Andeha hojerentsika ny fananganana fananganana dia ho lasa mazava kokoa izany.

Ny môdely misy anay dia manana fandrindrana fananganana roa. Ity ny voalohany, ary tena manara-penitra:

  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

Araka ny hitanao, ny tsipika misy marika 1 dia milaza fa ny vokatr'ity fananganana ity dia hapetraka ao amin'ny sarin'ny react-web-app-builder izay hitantsika teo aloha tao amin'ny fizarana ImageStreams.

Ny tsipika misy marika 2 dia milaza aminao hoe avy aiza ny kaody. Amin'ny tranga misy antsika, ity dia git repository, ary ny toerana, ref ary ny lahatahiry contexte dia voafaritra amin'ny paramètre efa hitantsika etsy ambony.

Ny tsipika misy marika 3 no efa hitantsika tao amin'ny fizarana paramètre. Manampy ny fari-piainana OUTPUT_DIR izy io, izay amin'ny ohatra ataontsika dia manorina.
Ny tsipika misy marika 4 dia milaza fa hampiasa ny sary web-app-builder-runtime, izay efa hitantsika tao amin'ny fizarana ImageStream.

Ny tsipika misy marika 5 dia milaza fa te hampiasa fananganana incremental izahay raha manohana azy ny sary S2I, ary manao izany ny sary Web App Builder. Amin'ny fandefasana voalohany, rehefa vita ny dingana fivoriambe, ny sary dia hamonjy ny lahatahiry node_modules ao anaty rakitra arisiva. Avy eo, amin'ny fampandehanana manaraka, ny sary dia hamoaka ity lahatahiry ity mba hampihenana ny fotoana fananganana.

Ary farany, ny tsipika misy marika 6 dia trigger vitsivitsy fotsiny mba hahatonga ny fananganana ho mandeha ho azy, tsy misy fitsabahana amin'ny tanana, rehefa misy fiovana.

Amin'ny ankapobeny dia fanamafisam-peo manara-penitra tsara izany.

Andeha hojerentsika ny fananganana fananganana faharoa. Tena mitovy amin'ny voalohany izy io, saingy misy fahasamihafana lehibe.

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

Noho izany ny fananganana faharoa dia ny react-web-app-runtime, ary manomboka amin'ny fomba mahazatra izany.

Ny tsipika misy marika 1 dia tsy zava-baovao - milaza fotsiny fa ny valin'ny fananganana dia napetraka ao amin'ny sary react-web-app-runtime.

Ny tsipika misy marika 2, toy ny tamin'ny fanitsiana teo aloha, dia manondro ny toerana hahazoana ny kaody loharano. Mariho anefa fa eto isika dia milaza fa nalaina tamin'ny sary. Ankoatr'izay, avy amin'ny sary vao noforoninay - avy amin'ny react-web-app-builder (voatondro amin'ny andalana 3). Ny rakitra tiantsika hampiasaina dia ao anatin'ny sary ary ny toerana misy azy dia napetraka amin'ny tsipika misy marika 4, raha ny anay dia /opt/app-root/output/. Raha tadidinao dia eto no itehirizana ireo rakitra novokarina mifototra amin'ny vokatry ny fananganana ny fampiharana.

Ny lahatahiry ho an'ny toerana voatondro amin'ny teny misy marika 5 dia ny lahatahiry amin'izao fotoana izao (izany ihany, tadidio, mihazakazaka ao anaty zavatra mahagaga antsoina hoe OpenShift, fa tsy amin'ny solosainao eo an-toerana).

Ny fizarana paikady - andalana misy marika 6 - dia mitovy amin'ny fananganana fananganana voalohany. Amin'ity indray mitoraka ity dia hampiasa ny nginx-image-runtime isika, izay efa hitantsika tao amin'ny fizarana ImageStream.

Farany, ny tsipika misy marika 7 dia ampahany amin'ny trigger izay hampavitrika ity fananganana ity isaky ny miova ny sary react-web-app-builder.

Raha tsy izany, ity môdely ity dia misy fanamafisam-peo manara-penitra tsara tarehy, ary koa ireo zavatra mifandraika amin'ny serivisy sy lalana, saingy tsy hiditra amin'izany antsipiriany be loatra izany izahay. Mariho fa ny sary hapetraka dia ny sary react-web-app-runtime.

Fametrahana fampiharana

Koa ankehitriny rehefa nijery ny môdely isika dia andao hojerentsika ny fomba fampiasana azy io amin'ny fametrahana fampiharana.

Azontsika atao ny mampiasa ny fitaovana mpanjifa OpenShift antsoina hoe oc mba hametrahana ny maodely:

$ 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

Ny baiko voalohany amin'ny pikantsary etsy ambony dia fomba niniana natao hitadiavana template./openshiftio/application.yaml.

Ny baiko faharoa dia mamorona fampiharana vaovao mifototra amin'ity môdely ity.

Rehefa mandeha ireo baiko ireo dia ho hitantsika fa manana fivoriambe roa isika:

Fampiharana maoderina amin'ny OpenShift, ampahany 2: fananganana rojo

Ary miverina amin'ny efijery Overview dia ho hitantsika ny pod natomboka:

Fampiharana maoderina amin'ny OpenShift, ampahany 2: fananganana rojo

Kitiho ny rohy dia hoentina any amin'ny fampiharana anay izahay, izay pejy React App default:

Fampiharana maoderina amin'ny OpenShift, ampahany 2: fananganana rojo

Fanampiny 1

Ho an'ireo tia Angular dia manana ihany koa izahay ohatra fampiharana.

Ny lamina eto dia mitovy, afa-tsy ny OUTPUT_DIR variable.

Fanampiny 2

Amin'ity lahatsoratra ity dia nampiasa NGINX ho mpizara tranonkala izahay, saingy mora ny manolo azy amin'ny Apache, ovay fotsiny ny môdely ao anaty rakitra. Sary NGINX amin'ny Sary Apache.

famaranana

Ao amin'ny ampahany voalohany amin'ity andiany ity, nasehonay ny fomba fametrahana haingana ny fampiharana tranonkala maoderina amin'ny sehatra OpenShift. Androany izahay dia nijery ny zavatra ataon'ny sary Web App sy ny fomba azo ampiarahina amin'ny mpizara tranonkala madio toa an'i NGINX amin'ny fampiasana rojo vy mba hamoronana fananganana fampiharana vonona kokoa. Ao amin'ny lahatsoratra manaraka sy farany amin'ity andiany ity, dia hasehontsika ny fomba fampandehanana mpizara fampandrosoana ho an'ny fampiharanao amin'ny OpenShift ary hiantoka ny fampifanarahana ny rakitra eo an-toerana sy lavitra.

Ny votoatin'ity andian-dahatsoratra ity

  • Part 1: ny fomba fametrahana fampiharana tranonkala maoderina amin'ny dingana vitsivitsy monja;
  • Fizarana 2: Ahoana ny fampiasana sary S2I vaovao miaraka amin'ny sarin'ny mpizara HTTP efa misy, toy ny NGINX, amin'ny fampiasana ireo fivoriambe OpenShift mifandraika amin'ny fametrahana ny famokarana;
  • Fizarana 3: ny fomba fampandehanana mpizara fampandrosoana ho an'ny fampiharanao amin'ny sehatra OpenShift ary ampifanaraho amin'ny rafi-drakitra eo an-toerana.

Loharano fanampiny

Source: www.habr.com

Add a comment