本節我們將上一節建立的簡單的react專案demo_fe進行部署，部署的步驟如下：

1. 將demo_fe專案進行編譯，在node.js中進入demo_fe專案路徑下，使用npm run build命令打包，最後會在demo_fe路徑下生成build資料夾(注意可以自行修改編譯後生成的資料夾)。

2. 將build資料夾上傳至任意一臺安裝了docker的linux機器上，筆者直接上傳到了k8s的master節點上(方便後續生成image後打包傳輸)。

3. 最重要的這一步就是建立一個Dockerfile, 筆者的Dockerfile內容如下：

　　概括來說，這個Dockerfile主要做的就是首先下載nginx包，然後配置代理(您可以視情況是否需要自己配置yum源代理，筆者因為使用的是公司機器，需要配置代理)下載nginx需要的包，安裝nginx並且進行配置，主要就是上傳本地的nginx.conf配置檔案到nginx中，其中指明瞭訪問路徑，如下配置：

　　最後將上傳上來的build資料夾拷貝到/usr/local/nginx/html/webgui/smartocr路徑下並指明暴露的埠，最後定義container啟動時候的命令即將nginx執行起來。

　　注意：當前的路徑下至少需要有build資料夾、conf資料夾(裡面存放nginx.conf)以及Dockerfile.

4. 執行"docker build -t basemanage_fe ."即可產生basemanage_fe這個image。

5. 這一步是體力活兒，需要將basemanage_fe這個image傳到k8s的所有node節點上：

　　首先使用docker save -o basemanage_fe.tar basemanage_fe這個命令將image以tar包的形式儲存到本地路徑中

　　然後scp傳輸到其他node上，在其他node上執行docker load -i basemanage_fe.tar這個命令將image載入到該node中。

　　這樣就保證了image在所有node節點上都有

　　注意：這是當前的做法，更專業的方式是將image上傳到本地倉庫或者遠端倉庫中，然後在部署檔案中指明從倉庫中來獲取，就不需要每次都要把image同步到所有node節點了。

6. 準備自己的部署檔案即yaml檔案，筆者列舉自己的deployment_fe.yaml和service_fe.yaml如下：

　　deployment_fe.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: ocr-basemanage
spec:
  replicas: 2
  selector:
    matchLabels:
      app: basemanage
  template:
    metadata:
      labels:
        app: basemanage
    spec:
      containers:
      - name: basemanage-fe
        image: basemanage_fe
        imagePullPolicy: IfNotPresent
        ports:
        - containerPort: 7070
      dnsPolicy: ClusterFirst
 

service_fe.yaml

apiVersion: v1
kind: Service
metadata:
  name: service-basemanage
spec:
  type: NodePort
  ports:
  - port: 7070
    protocol: TCP
    targetPort: 7070
    nodePort: 31002
  selector:
    app: basemanage

7. 至此，就可以使用kubectl apply -f xxx.yaml將你的微服務啟動起來，通過k8s的dashboard能看到兩個副本都執行起來了。

8. 現在就能通過http://nodeIP:31002/webgui/smartocr/index.html來訪問到GUI介面了，前端部署完成。

But, 這裡要延伸出兩個問題來：

第一：大部分的前端訪問應該是通過域名的形式訪問，即http://domainName/webgui/smartocr/index.html來訪問。

第二：前端微服務需要訪問後端微服務，如果是通過nodeIP+nodePort的方式訪問也沒有問題，但是，如果是按照serviceName:servicePort的方式訪問(而此種方式正是微服務部署所提倡的)，當前的解決方案一定是訪問不通的。

上面兩個問題我會在下一節中詳細說明，並給出我認為比較合理的解決方案----使用ingress。