🥇OpenShift 上的現代應用程序，第 3 部分：OpenShift 作為開發環境和 OpenShift Pipelines

這個部落格的大家好！這是系列文章的第三篇，我們將展示如何在 Red Hat OpenShift 上部署現代 Web 應用程式。

在前兩篇文章中，我們展示瞭如何透過幾個步驟部署現代 Web 應用程序，以及如何使用新的 S2I 映像以及現成的 HTTP 伺服器映像（例如 NGINX），使用鍊式建置來編排生產部署。

今天，我們將展示如何在 OpenShift 平台上為您的應用程式運行開發伺服器並將其與本機檔案系統同步，還將討論什麼是 OpenShift Pipelines 以及如何將它們用作連結組件的替代方案。

OpenShift 作為開發環境

開發流程

正如已經指出的第一篇文章現代 Web 應用程式的典型開發過程只是某種追蹤本機檔案變更的「開發伺服器」。當它們發生時，應用程式建置被觸發，然後更新到瀏覽器。

在大多數現代框架中，這樣的「開發伺服器」被內建到對應的命令列工具中。

本地範例

首先，讓我們看看在本地運行應用程式時它是如何運作的。我們以應用程式為例應對儘管幾乎相同的工作流程概念適用於所有其他現代框架，但從先前的文章中可以看出。
因此，要在 React 範例中啟動“開發伺服器”，我們將輸入以下命令：

$ npm run start

然後在終端機視窗中我們會看到這樣的內容：

我們的應用程式將在預設瀏覽器中開啟：

現在，如果我們對文件進行更改，應用程式應該在瀏覽器中更新。

好的，在本地模式下的開發一切都清楚了，但是如何在 OpenShift 上實現相同的目標呢？

OpenShift 上的開發伺服器

如果你還記得的話，在上一篇中，我們查看了 S2I 映像的所謂運行階段，發現預設情況下，serve 模組負責為我們的 Web 應用程式提供服務。

然而，如果你仔細觀察運行腳本在該範例中，它包含 $NPM_RUN 環境變量，它允許您執行命令。

例如，我們可以使用nodeshift模組來部署我們的應用程式：

$ npx nodeshift --deploy.env NPM_RUN="yarn start" --dockerImage=nodeshift/ubi8-s2i-web-app

注意：上面的例子是為了說明整體思路而進行了縮寫。

在這裡，我們將 NPM_RUN 環境變數新增到我們的部署中，它告訴執行時間執行yarn start 命令，該命令啟動 OpenShift pod 內的 React 開發伺服器。

如果您查看正在運行的 pod 的日誌，它將如下所示：

當然，除非我們能夠將本機程式碼與同樣受到更改但駐留在遠端伺服器上的程式碼同步，所有這一切都將毫無意義。

同步遠端和本地代碼

幸運的是，nodeshift 可以輕鬆幫助同步，並且您可以使用 watch 命令來追蹤變更。

因此，在運行命令為應用程式部署開發伺服器後，我們可以安全地使用以下命令：

$ npx nodeshift watch

結果，將與我們先前建立的正在運行的 pod 建立連接，將啟動本機檔案與遠端叢集的同步，並且將開始監視本機系統上的檔案是否發生變更。

因此，如果我們現在更新 src/App.js 文件，系統將對這些更改做出反應，將它們複製到遠端叢集並啟動開發伺服器，然後開發伺服器將在瀏覽器中更新我們的應用程式。

為了讓圖片更加完整，讓我們展示一下整個命令的樣子：

$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --build.env YARN_ENABLED=true --expose --deploy.env NPM_RUN="yarn start" --deploy.port 3000

$ npx nodeshift watch --strictSSL=false

watch 命令是 oc rsync 命令之上的抽象，您可以了解有關其工作原理的更多信息這裡.

這是 React 的範例，但完全相同的方法可以用於其他框架，只需根據需要設定 NPM_RUN 環境變數即可。

開放式管道

接下來我們將討論 OpenShift Pipelines 等工具以及如何使用它來取代鍊式建置。

什麼是 OpenShift 管道

OpenShift Pipelines 是一種雲端原生 CI/CD 持續整合和交付系統，專為使用 Tekton 組織管道而設計。 Tekton 是一個靈活的開源 Kubernetes 原生 CI/CD 框架，可讓您透過從底層抽象化來自動化在各種平台（Kubernetes、無伺服器、虛擬機器等）上的部署。

理解本文需要一些 Pipelines 知識，因此我們強烈建議您先閱讀官方教科書.

設定您的工作環境

要使用本文中的範例，您首先需要準備工作環境：

安裝並設定 OpenShift 4 叢集。我們的範例使用 CodeReady Containers (CRD) 來實現此目的，可以找到其安裝說明這裡.
叢集準備就緒後，您需要在其上安裝Pipeline Operator。別怕，很簡單，安裝說明這裡.
下載 Tekton CLI (tkn) 這裡.
執行 create-react-app 命令列工具來建立一個應用程序，然後部署該應用程式（這是一個簡單的應用程式應對).
（可選）克隆儲存庫以使用 npm install 和 npm start 在本地運行範例應用程式。

應用程式儲存庫還將有一個 k8s 資料夾，其中包含用於部署應用程式的 Kubernetes/OpenShift YAML。我們將在此建立任務、叢集任務、資源和管道儲存庫.

入門

我們範例的第一步是在 OpenShift 叢集中建立一個新專案。我們將此專案命名為 webapp-pipeline 並使用以下命令建立它：

$ oc new-project webapp-pipeline

該專案名稱稍後將出現在程式碼中，因此，如果您決定將其命名為其他名稱，請不要忘記相應地編輯範例程式碼。從這一點開始，我們不會自上而下，而是自下而上：也就是說，我們將首先創建傳送帶的所有組件，然後才創建傳送帶本身。

所以，首先...

任務

讓我們創建幾個任務，這將有助於在我們的管道中部署應用程式。第一個任務 - apply_manifests_task - 負責應用位於我們應用程式的 k8s 資料夾中的 Kubernetes 資源（服務、部署和路由）的 YAML。第二個任務 – update_deployment_task – 負責將已部署的映像更新為我們的管道所建立的映像。

如果還不是很清楚，請不要擔心。事實上，這些任務類似於實用程序，稍後我們將更詳細地討論它們。現在，讓我們創建它們：

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/tasks/update_deployment_task.yaml
$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/tasks/apply_manifests_task.yaml

然後，使用 tkn CLI 命令，我們將檢查任務是否已建立：

$ tkn task ls

NAME                AGE
apply-manifests     1 minute ago
update-deployment   1 minute ago

注意：這些是您目前專案的本機任務。

集群任務

集群任務與簡單任務基本相同。也就是說，它是運行特定任務時以某種方式組合的可重複使用步驟集合。不同之處在於，集群任務在集群內的任何地方都可用。若要查看新增 Pipeline Operator 時自動建立的叢集任務列表，我們將再次使用 tkn CLI 指令：

$ tkn clustertask ls

NAME                       AGE
buildah                    1 day ago
buildah-v0-10-0            1 day ago
jib-maven                  1 day ago
kn                         1 day ago
maven                      1 day ago
openshift-client           1 day ago
openshift-client-v0-10-0   1 day ago
s2i                        1 day ago
s2i-go                     1 day ago
s2i-go-v0-10-0             1 day ago
s2i-java-11                1 day ago
s2i-java-11-v0-10-0        1 day ago
s2i-java-8                 1 day ago
s2i-java-8-v0-10-0         1 day ago
s2i-nodejs                 1 day ago
s2i-nodejs-v0-10-0         1 day ago
s2i-perl                   1 day ago
s2i-perl-v0-10-0           1 day ago
s2i-php                    1 day ago
s2i-php-v0-10-0            1 day ago
s2i-python-3               1 day ago
s2i-python-3-v0-10-0       1 day ago
s2i-ruby                   1 day ago
s2i-ruby-v0-10-0           1 day ago
s2i-v0-10-0                1 day ago

現在讓我們建立兩個集群任務。第一個將產生 S2I 映像並將其傳送到內部 OpenShift 註冊表；第二個是基於 NGINX 來建立我們的鏡像，使用我們已經建立的應用程式作為內容。

創建並發送圖像

在建立第一個任務時，我們將重複上一篇文章中有關連結程序集的操作。回想一下，我們使用 S2I 映像 (ubi8-s2i-web-app) 來「建立」我們的應用程序，並最終將映像儲存在 OpenShift 內部註冊表中。現在，我們將使用此S2I Web 應用程式映像為我們的應用程式建立DockerFile，然後使用Buildah 進行實際建置並將產生的映像推送到OpenShift 內部註冊表，因為這正是使用NodeShift 部署應用程式時OpenShift 所做的事情。

你問我們怎麼知道這一切？從官方 Node.js 官方版本，我們只是複製並自己修改。

那麼，現在讓我們建立 s2i-web-app 叢集任務：

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/clustertasks/s2i-web-app-task.yaml

我們不會對此進行詳細分析，而僅關注 OUTPUT_DIR 參數：

params:
      - name: OUTPUT_DIR
        description: The location of the build output directory
        default: build

預設情況下，這個參數等於build，這是React放置組裝內容的地方。其他框架使用不同的路徑，例如，在 Ember 中是 dist。我們的第一個叢集任務的輸出將是一個包含我們收集的 HTML、JavaScript 和 CSS 的圖片。

基於NGINX建構鏡像

至於我們的第二個叢集任務，它應該使用我們已經建立的應用程式的內容為我們建立一個基於 NGINX 的映像。本質上，這是上一節中我們研究鍊式建構的部分。

為此，我們（與上面完全相同）將建立一個叢集任務 webapp-build-runtime：

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/clustertasks/webapp-build-runtime-task.yaml

如果您查看這些叢集任務的程式碼，您會發現它沒有指定我們正在使用的 Git 儲存庫或我們正在建立的映像的名稱。我們只指定要傳輸到 Git 的具體內容，或最終影像應輸出的某個影像。這就是為什麼這些叢集任務在與其他應用程式一起工作時可以重複使用的原因。

在這裡，我們優雅地進入下一點...

Ресурсы

因此，正如我們剛才所說，叢集任務應該盡可能通用，因此我們需要建立用作輸入（Git 儲存庫）和輸出（最終影像）的資源。我們需要的第一個資源是 Git，我們的應用程式駐留在其中，如下所示：

# This resource is the location of the git repo with the web application source
apiVersion: tekton.dev/v1alpha1
kind: PipelineResource
metadata:
  name: web-application-repo
spec:
  type: git
  params:
    - name: url
      value: https://github.com/nodeshift-starters/react-pipeline-example
    - name: revision
      value: master

這裡 PipelineResource 的類型是 git。 params 部分中的 url 鍵指向特定儲存庫並指定 master 分支（這是可選的，但我們為了完整性而編寫它）。

現在我們需要為圖像建立一個資源，用於保存 s2i-web-app 任務的結果，具體操作如下：

# This resource is the result of running "npm run build",  the resulting built files will be located in /opt/app-root/output
apiVersion: tekton.dev/v1alpha1
kind: PipelineResource
metadata:
  name: built-web-application-image
spec:
  type: image
  params:
    - name: url
      value: image-registry.openshift-image-registry.svc:5000/webapp-pipeline/built-web-application:latest

這裡 PipelineResource 是 image 類型，url 參數的值指向內部 OpenShift Image Registry，特別是位於 webapp-pipeline 命名空間中的。如果您使用不同的命名空間，請不要忘記更改此設定。

最後，我們需要的最後一個資源也將是 image 類型，這將是部署期間使用的最終 NGINX 映像：

# This resource is the image that will be just the static html, css, js files being run with nginx
apiVersion: tekton.dev/v1alpha1
kind: PipelineResource
metadata:
  name: runtime-web-application-image
spec:
  type: image
  params:
    - name: url
      value: image-registry.openshift-image-registry.svc:5000/webapp-pipeline/runtime-web-application:latest

再次請注意，此資源將映像儲存在 webapp-pipeline 命名空間的內部 OpenShift 註冊表中。

要一次建立所有這些資源，我們使用 create 命令：

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/resources/resource.yaml

您可以確保資源已按如下方式建立：

$ tkn resource ls

輸送管路

現在我們已經擁有了所有必要的組件，讓我們透過使用以下命令建立管道來組裝管道：

$ oc create -f https://raw.githubusercontent.com/nodeshift/webapp-pipeline-tutorial/master/pipelines/build-and-deploy-react.yaml

但在運行此命令之前，讓我們先來看看這些元件。首先是名字：

apiVersion: tekton.dev/v1alpha1
kind: Pipeline
metadata:
  name: build-and-deploy-react

然後在規範部分，我們看到我們之前創建的資源的指示：

spec:
  resources:
    - name: web-application-repo
      type: git
    - name: built-web-application-image
      type: image
    - name: runtime-web-application-image
      type: image

然後我們創建管道需要完成的任務。首先，它必須執行我們已經創建的 s2i-web-app 任務：

tasks:
    - name: build-web-application
      taskRef:
        name: s2i-web-app
        kind: ClusterTask

此任務採用輸入（gir 資源）和輸出（內建 Web 應用程式影像資源）參數。我們也向它傳遞了一個特殊參數，以便它不會驗證 TLS，因為我們使用的是自簽名憑證：

resources:
        inputs:
          - name: source
            resource: web-application-repo
        outputs:
          - name: image
            resource: built-web-application-image
      params:
        - name: TLSVERIFY
          value: "false"

接下來的任務幾乎是一樣的，只是這裡呼叫了我們已經建立的 webapp-build-runtime 叢集任務：

name: build-runtime-image
    taskRef:
      name: webapp-build-runtime
      kind: ClusterTask

與上一個任務一樣，我們傳入一個資源，但現在它是built-web-application-image（上一個任務的輸出）。作為輸出，我們再次設定圖像。由於此任務必須在前一個任務之後執行，因此我們新增 runAfter 欄位：

resources:
        inputs:
          - name: image
            resource: built-web-application-image
        outputs:
          - name: image
            resource: runtime-web-application-image
        params:
        - name: TLSVERIFY
          value: "false"
      runAfter:
        - build-web-application

接下來的兩個任務負責使用位於 Web 應用程式的 k8s 目錄中的服務、路由和部署 YAML 文件，並在建立新映像時更新此部署。我們在文章開頭定義了這兩個集群任務。

啟動輸送機

因此，管道的所有部分都已創建，我們將使用以下命令運行它：

$ tkn pipeline start build-and-deploy-react

在此階段，命令列以互動方式使用，您需要選擇適當的資源來回應其每個請求：對於 git 資源，選擇 web-application-repo，然後對於第一個圖像資源，選擇built-web-application - image，最後是第二個映像資源–runtime-web-application-image：

? Choose the git resource to use for web-application-repo: web-application-repo (https://github.com/nodeshift-starters/react-pipeline-example)
? Choose the image resource to use for built-web-application-image: built-web-application-image (image-registry.openshift-image-registry.svc:5000/webapp-pipeline/built-web-
application:latest)
? Choose the image resource to use for runtime-web-application-image: runtime-web-application-image (image-registry.openshift-image-registry.svc:5000/webapp-pipeline/runtim
e-web-application:latest)
Pipelinerun started: build-and-deploy-react-run-4xwsr

現在讓我們使用以下命令檢查管道的狀態：

$ tkn pipeline logs -f

管道啟動並部署應用程式後，我們可以使用以下命令請求已發布的路由：

$ oc get route react-pipeline-example --template='http://{{.spec.host}}'

為了獲得更好的視覺化效果，您可以在 Web 控制台的開發人員模式下查看我們的管道部分管道，如圖所示1.

圖。1。審查正在運行的管道。

點擊正在運行的管道會顯示更多詳細信息，如圖 2 所示。

米。 2. 有關管道的附加資訊。

更多資訊後，您可以在視圖中看到正在運行的應用程式拓撲，如圖3所示。

圖 3. 啟動的 Pod。

點擊圖示右上角的圓圈將打開我們的應用程序，如圖 4 所示。

米。 4. 運行 React 應用程式。

結論

因此，我們展示瞭如何在 OpenShift 上為您的應用程式運行開發伺服器並將其與本機檔案系統同步。我們也研究如何使用 OpenShift Pipelines 模擬鍊式建置範本。本文中的所有範例程式碼都可以找到這裡.

其他資源（EN）

即將舉行的網路研討會的公告

我們將在周五舉辦一系列有關使用紅帽 OpenShift 容器平台和 Kubernetes 的本機體驗的網路研討會：

來源： www.habr.com

OpenShift 上的現代應用程序，第 3 部分：OpenShift 作為開發環境和 OpenShift Pipelines