目錄
- 1. Docker 介紹
- 2. Docker 安裝
- 3. Docker 基本操作
- 4. Vue 應(yīng)用鏡像
- 4.1 Dockerfile 配置文件
- 什么是 Dockerfile？
- 4.2 編寫 Nginx 配置文件
- 4.3 構(gòu)建鏡像
- 5. 創(chuàng)建容器與啟動(dòng)
- 總結(jié)
1. Docker 介紹
Docker 是一個(gè)基于 GO 語(yǔ)言和 Linux 內(nèi)核的虛擬化容器技術(shù)，遵從 Apache2.0 協(xié)議開源。
Docker 與虛擬機(jī)給人的感覺比較相似，但是兩者的實(shí)現(xiàn)原理不同：Docker 是虛擬化操作系統(tǒng)，而虛擬機(jī)則是虛擬化硬件設(shè)備。Docker 可利用 Linux 內(nèi)核來(lái)創(chuàng)建獨(dú)立的 Linux 容器，只占用一組與操作系統(tǒng)隔離的進(jìn)程，就可以創(chuàng)建一個(gè)內(nèi)部環(huán)境保持不變的容器。這種方式也更加利于項(xiàng)目遷移和運(yùn)行，并且相比虛擬機(jī)，也省去了大量的系統(tǒng)配置和資源占用。
2. Docker 安裝
windows 環(huán)境下安裝 Docker 需要安裝桌面端，直接在 Docker – Get Started 頁(yè)面下載對(duì)應(yīng)的 Docker Desktop 安裝包安裝即可。
3. Docker 基本操作
因?yàn)?Docker 是一種虛擬化容器技術(shù)，所以最常用的操作就是“容器”「Container」的操作；另外容器的創(chuàng)建也需要一個(gè)基礎(chǔ)的創(chuàng)建模板，這個(gè)模板就是“鏡像”「Image」。
這里簡(jiǎn)單介紹一下與鏡像和容器相關(guān)的幾個(gè)基本操作：
# docker拉取鏡像，例如 docker pull nginx:1.21.6 docker pull 鏡像別名:版本號(hào) # 刪除鏡像，例如 docker rmi nginx:1.21.6 docker rmi 鏡像id/鏡像name # 查看鏡像列表 docker images # 查看容器列表, 不加-a查看正在運(yùn)行的，加上-a查看所有容器 docker ps -a # 啟動(dòng)容器 #（-d 后臺(tái)運(yùn)行, --name 容器別名, -p 宿主機(jī)端口:容器端口, --network 橋接網(wǎng)絡(luò)別名, 最后是鏡像名稱:鏡像版本） docker run -d --restart always --name vue-app-container -p 3006:3006 vue-app:1.0.0 # 關(guān)閉一個(gè)已啟動(dòng)容器，例如 docker stop vue-app-container docker stop 容器ID/容器別名 # 啟動(dòng)一個(gè)關(guān)閉的容器 ，例如 docker start vue-app-container docker start 容器ID/容器別名 # 刪除容器，例如 docker rm vue-app-container docker rm 容器ID/容器名 # 查看一個(gè)容器的詳情 ，例如 docker inspect vue-app-container docker inspect 容器ID/容器別名 # 進(jìn)入容器內(nèi)部，例如 docker exec -it vue-app-container /bin/bash docker exec -it 容器ID/容器別名 /bin/bash
4. Vue 應(yīng)用鏡像
這里不論是 Vue 應(yīng)用還是 React 之類的應(yīng)用，都可以用這樣的方式發(fā)布；Vite 和 Webpack 也可以不做區(qū)分
首先，Vue 之類的單頁(yè)應(yīng)用，不論是用 Vite 還是 Webpack，都需要將對(duì)應(yīng)的項(xiàng)目代碼打包成普通的 js、css 等文件，最后通過(guò) Nginx 等進(jìn)行發(fā)布。
所以，創(chuàng)建單頁(yè)應(yīng)用鏡像的第一步就是打包。
Docker 創(chuàng)建鏡像的方式有：
- 基于遠(yuǎn)程 pull 的鏡像創(chuàng)建
- 本地導(dǎo)入鏡像（也可以看做是直接使用）
- 基于 Dockerfile 創(chuàng)建（最常用的創(chuàng)建方式）
4.1 Dockerfile 配置文件
什么是 Dockerfile？
Dockerfile 是一個(gè)用來(lái)構(gòu)建鏡像的文本文件，文本內(nèi)容包含了一條條構(gòu)建鏡像所需的指令和說(shuō)明。
—摘自“菜鳥教程”
Dockerfile 文件的第一行命令，都是 FROM 命令，表示依賴的鏡像。因?yàn)槲覀儎?chuàng)建的鏡像基本上都不會(huì)從0開始，最低都會(huì)依賴一個(gè)系統(tǒng)鏡像。
文件內(nèi)每條執(zhí)行命令都以一個(gè)關(guān)鍵詞作為開始，常用命令有：
- FROM： 依賴鏡像
- RUN：需要執(zhí)行的 shell 命令
- COPY：文件復(fù)制命令
- CMD：鏡像容器運(yùn)行時(shí)執(zhí)行的命令
- ENV：環(huán)境變量，一般會(huì)在 Dockerfile 文件內(nèi)部預(yù)先定義
- ARG：構(gòu)建參數(shù)，類似環(huán)境變量，僅在 build 鏡像時(shí)定義
- VOLUME：需要掛載的數(shù)據(jù)卷，將容器內(nèi)的某個(gè)數(shù)據(jù)卷映射為宿主機(jī)的磁盤位置，可以避免容易過(guò)大或者數(shù)據(jù)丟失
- EXPOSE：僅聲明使用端口，只有在運(yùn)行容器時(shí)沒有指定端口的時(shí)候自動(dòng)映射到這里指定的端口
4.2 編寫 Nginx 配置文件
在構(gòu)建 Docker 鏡像時(shí)，雖然可以執(zhí)行一些命令，但是基本上不會(huì)通過(guò)命令來(lái)創(chuàng)建一個(gè) nginx 配置文件。所以，我們需要在項(xiàng)目目錄中創(chuàng)建一個(gè) nginx.conf 文件。
### :::
### 服務(wù)器 nginx 配置，請(qǐng)勿改變 listen 端口
### :::
server {
listen 80;
server_name localhost;
root /usr/share/nginx/vue-app;
location / {
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
# 接口轉(zhuǎn)發(fā)
location ~* ^\/(sys|app)\/ {
proxy_pass http://app-server:8080;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
這個(gè) nginx.conf 文件僅作為示例，需要根據(jù)實(shí)際情況修改。
4.3 構(gòu)建鏡像
在執(zhí)行鏡像構(gòu)建命令之前，我們需要在根目錄下創(chuàng)建一個(gè) Docker 配置文件 Dockerfile
# 配置 nginx 資源轉(zhuǎn)發(fā), alpine 為純凈版本 FROM nginx:1.21.6 # 服務(wù)器環(huán)境 COPY dist/ /usr/share/nginx/hwiot-web/ COPY nginx.conf /etc/nginx/conf.d/default.conf
這個(gè)文件僅僅是將外部打包后的 dist 文件夾里面的內(nèi)容，復(fù)制到容器內(nèi)的 /usr/share/nginx/vue-app/ 內(nèi)，在復(fù)制 nginc.conf 文件到 /etc/nginx/conf.d/default.conf 作為默認(rèn) Nginx 配置。
之后執(zhí)行構(gòu)建命令：
docker build -t vue-app:1.0.0 .
注意后面的 .
這一步會(huì)默認(rèn)在當(dāng)前目錄查找 Dockerfile 文件并進(jìn)行鏡像構(gòu)建，并且用 -t 指定鏡像名和鏡像版本號(hào)。
5. 創(chuàng)建容器與啟動(dòng)
在上一步鏡像創(chuàng)建完成之后，就可以根據(jù)該鏡像創(chuàng)建容器了。
docker run -p 80:80 -d -name vue-app-container vue-app
這里指定了將容器的 80 端口映射到宿主機(jī)的80,端口，這樣我們直接在本地打開瀏覽器訪問(wèn) http://localhost 即可。
