AIoT & Cloud & Edge & Machine Learning

【 Cloud 】將 Vue 透過 Docker Hub 部署到 Azure Kubernetes Service ( AKS )

Archer

Feb 20, 2022 • 7 min read

Photo by Mark Olsen / Unsplash

內容

學習目標
前置準備作業
專案目錄結構
建立 Vue 專案的 Docker Image 並部署到 Docker Hub
建立與設定 Azure Kubernetes Service
部署 Vue 到 AKS
測試與驗證
刪除所建立的資源與服務

學習目標

如何將 Vue 透過 Docker Hub 部署到 Azure Kubernetes Service ( AKS )

前置準備作業

已建立 Azure 帳號並能正常登入
已於電腦端存在可正常執行的 Vue 專案
已於電腦端安裝 IDE，本範例使用 Visual Studio Code
已於電腦端安裝 Docker Engine
- https://docs.docker.com/engine/install/
已於電腦端安裝 AZ Cli
- https://docs.microsoft.com/zh-tw/cli/azure/install-azure-cli
已建立 Docker Hub 帳號
- https://hub.docker.com/
已於電腦端安裝 kubectl
- https://kubernetes.io/docs/tasks/tools/

專案目錄結構

└── aks-deploy-vue
    ├── docker-manifests
    │   └── Dockerfile
    ├── kube-manifests
    │   ├── 01-Deployment.yml
    │   └── 02-LoadBalancer.yml
    └── vue-web
        ├── README.md
        ├── babel.config.js
        ├── package-lock.json
        ├── package.json
        ├── public
        │   ├── favicon.ico
        │   └── index.html
        └── src
            ├── App.vue
            ├── assets
            │   └── logo.png
            ├── components
            │   └── HelloWorld.vue
            └── main.js

建立 Vue 專案的 Docker Image 並部署到 Docker Hub

Step 1. 建立 Dockerfile

建立 docker-manifests 資料夾並在此資料夾中建立 Dockerfile 的檔案，再輸入以下內容

	# build stage
	FROM node:14.18-alpine3.15 as build-stage
	WORKDIR /vue
	COPY vue-web/package*.json ./
	RUN npm install --production
	COPY vue-web/ .
	RUN npm run build

	# production stage
	FROM nginx:1.21.5-alpine as production-stage
	COPY --from=build-stage /vue/dist /usr/share/nginx/html
	EXPOSE 80
	CMD ["nginx", "-g", "daemon off;"]

view raw Dockerfile hosted with ❤ by GitHub

Step 2. 建立 Docker Image

請在終端機切換路徑到專案目錄再輸入下方內容
```
docker build -t DockerHubAccount/ImageName:Tag -f docker-manifests/Dockerfile .
```
- 請修改指令中的 DockerHubAccount 為在 Docker Hub 上所建立的帳號。
- 請修改指令中的 ImageName 為可識別的名稱。
- 請修改指令中的 Tag 為版號。
- 本範例使用如下
```
docker build -t mmosconii/docker-vue:0.1 -f docker-manifests/Dockerfile .
```

Step 3. 查看本地端 Image

請在終端機輸入下方內容
```
docker images
```

Step 4. 登入到 Docker Hub

請在終端機輸入下方內容
```
docker login
```

Step 5. 上傳到 Docker Hub

請在終端機輸入下方內容
```
docker push DockerHubAccount/ImageName:Tag
```
- 請修改指令中的 DockerHubAccount 為 Step 2 的帳號。
- 請修改指令中的 ImageName 為 Step 2 的名稱。
- 請修改指令中的 Tag 為 Step 2 的版號。
- 本範例使用如下
```
docker push mmosconii/docker-vue:0.1
```

Step 6. 查看 Docker Hub

透過瀏覽器開啟 https://hub.docker.com/ 並登入成功之後會看到所上傳的 Image

---2022-02-20---9.08.41

---2022-02-20---9.09.26

建立與設定 Azure Kubernetes Service

Step 1. 登入到 Azure

請在終端機輸入下方內容
```
az login
```

Step 2. 建立 Azure 資源群組

請在終端機輸入下方內容
```
az group create --name ResourceGroupName --location Region
```
- 修改指令中的 ResourceGroupName 為唯一可識別的名稱。
- 修改指令中的 Region 請輸入資源部署於何處
  - 可輸入 az account list-locations -o table 查看可用區域
- 本範例使用如下
```
az group create --name aks-test-rg --location westus2
```

Step 3. 建立 AKS

請在終端機輸入下方內容
```
az aks create -g ResourceGroupName -n AksName
```
- 修改指令中的 ResourceGroupName 請輸入 Step 2 所建立的名稱。
- 修改指令中的 AksName 成唯一可識別的名稱。
- 本範例使用如下
```
az aks create -g aks-test-rg -n aks-vue-test
```

部署 Vue 到 AKS

Step 1. 取得 AKS Credential

請在終端機輸入下方內容
```
az aks get-credentials --resource-group ResourceGroupName --name AksName
```
- 修改指令中的 ResourceGroupName 請輸入段落 建立與設定 Azure Kubernetes Service 中 Step 2 所建立的名稱。
- 修改指令中的 AksName 請輸入段落 建立與設定 Azure Kubernetes Service 中 Step 3 所建立的名稱。
- 本範例使用如下
```
az aks get-credentials --resource-group aks-test-rg --name aks-vue-test
```

Step 2. 建立 Deployment 的 YAML

請在專案目錄中建立 kube-manifests 資料夾並在此資料夾中建立 01-Deployment.yml 檔案，其內容如下

	apiVersion: apps/v1
	kind: Deployment
	metadata:
	name: vue-app-deployment
	spec:
	replicas: 2
	selector:
	matchLabels:
	app: vue-app
	template:
	metadata:
	name: vue-app-pod
	labels:
	app: vue-app
	spec:
	containers:
	- name: vue-app-container
	image: DockerHubAccount/ImageName:Tag
	ports:
	- containerPort: 80

view raw 01-Deployment.yml hosted with ❤ by GitHub

請修改 第 18 行 中的 DockerHubAccount 為 建立 Vue 專案的 Docker Image 並部署到 Docker Hub 段落中 Step 2 的帳號。
請修改 第 18 行 中的 ImageName 為 建立 Vue 專案的 Docker Image 並部署到 Docker Hub 段落中 Step 2 的名稱。
請修改 第 18 行 中的 Tag 為 建立 Vue 專案的 Docker Image 並部署到 Docker Hub 段落中 Step 2 的版號。
本範例使用如下

	apiVersion: apps/v1
	kind: Deployment
	metadata:
	name: vue-app-deployment
	spec:
	replicas: 2
	selector:
	matchLabels:
	app: vue-app
	template:
	metadata:
	name: vue-app-pod
	labels:
	app: vue-app
	spec:
	containers:
	- name: vue-app-container
	image: mmosconii/docker-vue:0.1
	ports:
	- containerPort: 80

view raw 01-Deployment.yml hosted with ❤ by GitHub

Step 3. 建立 LoadBalancer 的 YAML

請在專案目錄中的 kube-manifests 資料夾並在此資料夾中建立 02-LoadBalancer.yml 檔案，其內容如下

	apiVersion: v1
	kind: Service
	metadata:
	name: vue-app-loadbalancer
	labels:
	app: vue-app
	spec:
	type: LoadBalancer
	selector:
	app: vue-app
	ports:
	- port: 80
	targetPort: 80

view raw 02-LoadBalancer.yml hosted with ❤ by GitHub

Step 4. 部署 Application

請在終端機輸入下方內容
```
kubectl apply -f kube-manifests/
```

---2022-02-20---9.28.01

測試與驗證

Step 1. 查看 Pods

請在終端機輸入下方內容
```
kubectl get pods
```

---2022-02-20---9.28.29

Step 2. 查看 Deployment

請在終端機輸入下方內容
```
kubectl get deployment
```

---2022-02-20---9.28.58

Step 3. 查看 Service 並取得 IP

請在終端機輸入下方內容以取得 EXTERNAL-IP
```
kubectl get service
```

---2022-02-20---9.29.42

Step 4. 存取 Vue

請在瀏覽器輸入下方內容
```
http://EXTERNAL-IP
```
- 請把 EXTERNAL-IP 改成 Step 3 所取得的 EXTERNAL-IP

---2022-02-20---9.32.55

刪除所建立的資源與服務

Step 1. 刪除 Application

請在終端機輸入下方內容
```
kubectl delete -f kube-manifests/
```

---2022-02-20---9.36.37

Step 2. 查看 Pods

請在終端機輸入下方內容
```
kubectl get pods
```

---2022-02-20---9.37.04

Step 3. 查看 Deployment

請在終端機輸入下方內容
```
kubectl get deployment
```

---2022-02-20---9.37.32

Step 4. 查看 Service

請在終端機輸入下方內容
```
kubectl get service
```

---2022-02-20---9.38.08

Step 5. 刪除所建立的相關資源

請在終端機輸入下方指令
```
az group delete -n ResourceGroupName
```
- 修改指令中的 ResourceGroupName 將其改為 建立與設定 Azure Kubernetes Service 段落中 Step 3 所建立的名稱。
- 本範例使用如下
```
az group delete -n aks-test-rg
```

GitHub

ArcherHuang @ GitHub