本節我們將上一節創建的簡單的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。