本节我们将上一节创建的简单的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。