Vue.js應用程式容器化部署

為什麼要對 Vue.js 應用程式進行容器化？

在當今快節奏的開發環境中，容器化已成為一種必不可少的做法。Docker 提供了一個標準化的軟體單元，確保的應用程式無論部署在哪裡，都能以相同的方式執行。對 Vue.js 應用程式進行 Docker 化有以下幾個好處：

一致性： 確保應用程式在所有環境（開發、測試、生產）中執行一致。
隔離性： 使應用程式與主機系統上的其他應用程式隔離，降低衝突風險。
可擴充套件性： 簡化橫向擴充套件應用程式的過程。
可移植性: 可在不同環境和雲提供商之間輕鬆移動應用程式。

建立 Vue.js 示例應用程式

全域性安裝 Vue CLI
Vue CLI 是一種命令列工具，有助於輕鬆建立新的 Vue.js 專案。首先，使用 npm 在全域性安裝 Vue CLI：

npm install -g @vue/cli

建立新的 Vue 專案
建立一個名為 my-vue-app 的新 Vue.js 專案：

vue create my-vue-app

該命令將提示選擇所需的功能。可以選擇預設預設，也可以根據自己的要求進行定製

啟動開發伺服器
導航至專案目錄並啟動開發伺服器：

cd my-vue-app
npm run serve

該命令將啟動開發伺服器，應用程式將可在 http://localhost:8080 上執行

理解 Dockerfile

Dockerfile 是一個包含一系列命令的指令碼，用於組裝映像。下面是 Vue.js 應用程式的 Dockerfile：

# Use the official node image as the base image
FROM node:16-alpine as build-stage
# Set the working directory
WORKDIR /app
# Copy the package.json and package-lock.json files to the working directory
COPY package*.json ./

# mirror of china taobao
RUN npm config set registry https://registry.npmmirror.com

# Install dependencies
RUN npm install
# Copy the rest of the application code to the working directory
COPY . .
# Build the Vue.js application for production
RUN npm run build
# Use the official nginx image as the base image for serving the application
FROM nginx:stable-alpine as production-stage
# Copy the built files from the build-stage to the nginx html directory
COPY --from=build-stage /app/dist /usr/share/nginx/html
# Copy custom nginx configuration files
COPY nginx.conf /etc/nginx/nginx.conf
COPY default.conf /etc/nginx/conf.d/default.conf
# Copy the entry point script
COPY start.sh /start.sh
# Make the entry point script executable
RUN chmod +x /start.sh
# Expose port 80
EXPOSE 80
# Set the entry point to the shell script
ENTRYPOINT ["/start.sh"]

Dockerfile 各部分說明

構建階段：

從 node:16-alpine 作為構建階段： 使用 Node.js 映像構建應用程式。
WORKDIR /app： 設定容器內的工作目錄。
COPY package*.json ./： 複製軟體包檔案。
執行 npm install： 安裝依賴項。
COPY ： 複製應用程式程式碼的其餘部分。
執行 npm run build： 為生產構建應用程式

生產階段：

FROM nginx:stable-alpine 作為生產階段： 使用 Nginx 映像為已構建的應用程式提供服務。
COPY --from=build-stage /app/dist /usr/share/nginx/html： 將構建階段的檔案複製到 Nginx 的 html 目錄。
COPY nginx.conf /etc/nginx/nginx.conf： 複製自定義 Nginx 配置檔案。
COPY default.conf /etc/nginx/conf.d/default.conf： 複製自定義 Nginx 伺服器配置檔案。
COPY start.sh /start.sh： 複製入口指令碼。
執行 chmod +x /start.sh： 使入口點指令碼可執行。
EXPOSE 80：公開埠 80。
ENTRYPOINT [“/start.sh”]： 設定 shell 指令碼的入口點

為了減少docker映象體積，我們再最佳化Dockerfile

# 使用更小的基礎映象
FROM node:16-alpine as build-stage

# 設定工作目錄
WORKDIR /app

# 僅複製必要的檔案以減少層數
COPY package*.json ./

# 設定 npm 映象為淘寶
RUN npm config set registry https://registry.npmmirror.com && \
npm install

# 複製其餘的應用程式碼
COPY . .

# 構建 Vue.js 應用程式
RUN npm run build && \
rm -rf node_modules && \
rm -rf src

# 使用 nginx 作為生產環境的基礎映象
FROM nginx:stable-alpine as production-stage

# 複製構建後的檔案到 nginx 的 html 目錄
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 複製自定義的 nginx 配置檔案
COPY nginx.conf /etc/nginx/nginx.conf
COPY default.conf /etc/nginx/conf.d/default.conf

# 複製入口點指令碼
COPY start.sh /start.sh

# 使入口點指令碼可執行
RUN chmod +x /start.sh

# 暴露埠 80
EXPOSE 80

# 設定入口點為 shell 指令碼
ENTRYPOINT ["/start.sh"]

理解 Nginx 配置

nginx.conf檔案是Nginx的主要配置檔案。下面是一個例子：

# /etc/nginx/nginx.conf

user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events
{
worker_connections 1024;
}
http
{
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}

nginx.conf配置重要節

User：定義 Nginx 的執行使用者。
Worker Processes： 處理請求的工作程序數量。
Error Log： 錯誤日誌檔案的路徑。
Events： 連線處理配置： 連線處理配置。
HTTP：HTTP 伺服器配置的主要部分，包括 MIME 型別、日誌記錄和伺服器包含

default.conf 檔案用於定義應用程式的伺服器配置, 已使用線上配置檔案檢查

# /etc/nginx/conf.d/default.conf

server
{
listen 80;
server_name localhost;
location /
{
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html
{
root /usr/share/nginx/html;
}
}

start.sh 入口點檔案
start.sh 指令碼用作 Docker 容器的入口點：

#!/bin/sh
# Exit immediately if a command exits with a non-zero status
set -e
# Start nginx
nginx -g "daemon off;"

start.sh 的說明
set -e： 確保指令碼在任何命令失敗時立即退出。
nginx -g “daemon off;”： 在前臺啟動 Nginx，這是 Docker 保持容器執行所必需的。
構建和執行 Docker 容器
構建 Docker 映像
使用以下命令構建 Docker 映像：

docker build -t my-vue-app .

執行 Docker 容器
使用以下命令執行 Docker 容器：

docker run -p 8080:80 my-vue-app

此命令將執行容器，將主機上的 8080 埠對映到容器中的 80 埠。現在， Vue.js 應用程式應該可以訪問 http://localhost:8080

基於Docker-compose的docker-compose.yml

version: '3'
services:
app:
build:
context: .
dockerfile: Dockerfile
container_name: my-vue-app
ports:
- 8080:80

要將 Docker 映像推送到 Docker Hub 儲存庫，請執行以下命令：

docker push <your_dockerhub_username>/<your_dockerhub_repository_name>:latest

部署於OpenShift

這可以透過網路介面或命令列工具 oc 來完成。首先，在 OpenShift 上建立一個新專案

$ oc new-project vue-app

然後，使用剛剛釋出的容器部署新應用程式

$ oc new-app docker.io/<your-username>/vue-openshift

要驗證應用程式是否已部署，可以使用

$ oc status

這將列出一個服務 (svc) 和一個部署配置 (dc)。開啟網路控制檯，就會看到一個 Pod 正在執行。

公開 Vue.js 應用程式的最後一步是建立一個路由，對映到 Pod 中的 8080 埠。可以使用以下命令建立路由：

$ oc expose service vue-openshift --port=8080

如果回頭看一下的應用程式，就會在 Routes - External Traffic 標籤下看到一個連結。這是指向 Vue.js 應用程式的連結。點選該連結，現在就能看到之前構建的已部署應用程式。

由 OpenShift 叢集中的 Nginx 伺服器提供服務。如果要對應用程式進行更改，需要重新建立 Vue.js 構建、重建容器、將其推送到登錄檔並部署應用程式。

$ npm run build
$ podman build -t vue-openshift .
$ podman push vue-openshift docker://docker.io/<your-username>/vue-openshift
$ oc rollout latest vue-openshift

部署Kubernetes

透過定義部署物件，可以指定要使用的 Docker 映像、要執行的應用程式副本（例項）數量、網路配置等細節。Kubernetes 會使用這些資訊來確保在叢集中有效地部署和管理應用程式。此外，建立部署物件還能讓 Kubernetes 處理擴充套件、負載平衡和自愈等重要方面。它能確保 Vue.js 應用程式始終可用並順利執行，即使面對故障或流量增加也是如此。要建立部署物件，請在終端應用程式或命令提示符下建立一個名為 vue-deployment.yaml 的檔案，並貼上下面的配置設定：

在 Kubernetes 中，YAML 檔案用於資源配置；在這種情況下，要定義應用程式所需的狀態，就需要使用 .yaml 檔案來定義。這將允許指定應用程式在 Kubernetes 環境中的部署和管理方式。

apiVersion: apps/v1
kind: Deployment
metadata:
name: my-vue-app
spec:
replicas: 3
selector:
matchLabels:
app: my-vue-app
template:
metadata:
labels:
app: my-vue-app
spec:
containers:
- name: my-vue-app-container
image: '<your_dockerhub_username>/vue-app:latest'
ports:
- containerPort: 8080

此deployment定義了以下內容：

1. 定義名為 my-vue-app 的部署
2. 使用命令（replicas: 3）指示 Kubernetes 為 Vue 應用程式建立三個例項
3. 指定應匹配值為 my-vue-app 的標籤，以確保正確選擇
4. 在模板塊中指定容器詳細資訊，如容器名稱（my-vue-app-container）和來自 Docker Hub 的 Docker 映像（<your_dockerhub_username>/vue-app:late）

現在執行 kubectl 命令，在 Kubernetes 叢集中建立該部署：

kubectl apply -f vue-deployment.yaml

要確認部署是否建立成功，請執行以下 kubectl 命令：

kubectl get deployments

要檢視 Vue 應用程式的例項（也稱為 pod），請執行以下 kubectl 命令：

kubectl get pods

既然已經成功建立了部署，接下來要做的就是為 my-vue-app 部署建立一個 Kubernetes 服務物件，這樣就可以檢視應用程式了。執行以下 kubectl 命令：

kubectl expose deploy my-vue-app --port 8080 --target-port=80 --type=NodePort

上述命令將透過名為 “my-vue-app ”的服務（型別為 NodePort）公開 my-vue-app 部署。它將在 8080 埠上公開來自 “my-vue-app ”部署的 pod，並將傳入流量轉發到 80 埠上的 pod。建立服務後，將看到以下輸出：

接下來，執行以下命令檢視服務：

kubectl get services

NodePort 透過群集中所有節點的特定埠向群集外部公開應用程式。它允許外部使用群集中任意節點的 IP 地址和分配的埠訪問服務。在這種情況下，應該可以透過以下地址 <node-ip>:<NodePort-port> 檢視 Vue 應用程式。但在此之前，請使用以下命令獲取任何叢集節點的 IP 地址：

kubectl get node <node-name> -o jsonpath='{.status.addresses[?(@.type=="InternalIP")].address}'

現在，請使用喜歡的瀏覽器訪問以下地址 - <node-ip>:<NodePort-port> 以檢視 Vue 應用程式。應該會在主頁和關於路由上看到以下輸出：

結論

在軟體工程中，將Vue.js應用容器化部署到Docker容器中具有重要意義。這種做法不僅提升了應用的部署效率、可移植性和可擴充套件性，還增強了系統的穩定性和安全性。以下是具體的一些關鍵點：

1. 環境一致性：
   • Docker容器提供了一種輕量級、可移植的虛擬化環境，確保開發、測試和生產環境之間的一致性。對於Vue.js應用來說，這意味著無論在哪個環境中執行，應用的依賴、配置和行為都將保持一致，減少了因環境差異導致的問題。
2. 簡化部署流程：
   • 使用Docker容器化Vue.js應用可以極大地簡化部署流程。開發團隊可以構建一個包含所有必需依賴和配置的Docker映象，並透過簡單的命令（如docker run）在任何支援Docker的伺服器上部署應用。這消除了手動配置伺服器和安裝依賴的繁瑣過程。
3. 提高可移植性：
   • Docker容器使得Vue.js應用可以在任何支援Docker的平臺上執行，包括雲環境、虛擬機器或物理伺服器。這種高度的可移植性使得應用能夠輕鬆地在不同環境之間遷移，適應不同的業務需求。
4. 增強可擴充套件性：
   • 透過Docker容器，可以輕鬆地擴充套件Vue.js應用的部署規模。使用Docker Swarm、Kubernetes、OpenShift等容器編排工具，可以輕鬆地管理多個容器例項，並根據負載情況自動調整資源分配，從而實現應用的水平擴充套件。
5. 提高安全性：
   • Docker容器提供了額外的安全層。透過限制容器對宿主機的訪問許可權，可以減少潛在的安全風險。此外，Docker映象的分層儲存和簽名機制也有助於確保映象的完整性和來源可靠性。
6. 促進微服務架構：
   • 對於包含多個服務的複雜Vue.js應用（如前端應用與後端API分離），Docker容器化可以促進微服務架構的實施。每個服務都可以被封裝在一個獨立的容器中，從而實現服務的解耦和獨立部署。
7. 簡化版本控制和回滾：
• Docker映象可以被視為應用的快照，透過版本控制系統（如Git）管理Docker映象的原始碼和構建指令碼，可以方便地跟蹤應用的變更歷史。在需要時，可以快速回滾到之前的版本，降低因新版本引入問題而導致的風險。

---

今天先到這兒，希望對雲原生，技術領導力， 企業管理，系統架構設計與評估，團隊管理, 專案管理, 產品管理，資訊保安，團隊建設 有參考作用 , 您可能感興趣的文章:
構建創業公司突擊小團隊
國際化環境下系統架構演化
微服務架構設計
影片直播平臺的系統架構演化
微服務與Docker介紹
Docker與CI持續整合/CD
網際網路電商購物車架構演變案例
網際網路業務場景下訊息佇列架構
網際網路高效研發團隊管理演進之一
訊息系統架構設計演進
網際網路電商搜尋架構演化之一
企業資訊化與軟體工程的迷思
企業專案化管理介紹
軟體專案成功之要素
人際溝通風格介紹一
精益IT組織與分享式領導
學習型組織與企業
企業創新文化與等級觀念
組織目標與個人目標
初創公司人才招聘與管理
人才公司環境與企業文化
企業文化、團隊文化與知識共享
高效能的團隊建設
專案管理溝通計劃
構建高效的研發與自動化運維
某大型電商雲平臺實踐
網際網路資料庫架構設計思路
IT基礎架構規劃方案一(網路系統規劃)
餐飲行業解決方案之客戶分析流程
餐飲行業解決方案之採購戰略制定與實施流程
餐飲行業解決方案之業務設計流程
供應鏈需求調研CheckList
企業應用之效能實時度量系統演變

如有想了解更多軟體設計與架構, 系統IT,企業資訊化, 團隊管理 資訊，請關注我的微信訂閱號：

作者：Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。 該文章也同時釋出在我的獨立部落格中-Petter Liu Blog。