Docker如何部署單頁應用

這篇“Docker如何部署單頁應用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Docker如何部署單頁應用”文章吧。

1. Docker 介紹

Docker 是一個基于 GO 語言和 Linux 內核的虛擬化容器技術，遵從 Apache2.0 協議開源。

Docker 與虛擬機給人的感覺比較相似，但是兩者的實現原理不同：Docker 是虛擬化操作系統，而虛擬機則是虛擬化硬件設備。Docker 可利用 Linux 內核來創建獨立的 Linux 容器，只占用一組與操作系統隔離的進程，就可以創建一個內部環境保持不變的容器。這種方式也更加利于項目遷移和運行，并且相比虛擬機，也省去了大量的系統配置和資源占用。

2. Docker 安裝

windows 環境下安裝 Docker 需要安裝桌面端，直接在 Docker - Get Started 頁面下載對應的 Docker Desktop 安裝包安裝即可。

3. Docker 基本操作

因為 Docker 是一種虛擬化容器技術，所以最常用的操作就是“容器”「Container」的操作；另外容器的創建也需要一個基礎的創建模板，這個模板就是“鏡像”「Image」。

這里簡單介紹一下與鏡像和容器相關的幾個基本操作：

# docker拉取鏡像，例如 docker pull nginx:1.21.6
docker pull 鏡像別名:版本號
# 刪除鏡像，例如 docker rmi nginx:1.21.6
docker rmi 鏡像id/鏡像name
# 查看鏡像列表
docker images

# 查看容器列表, 不加-a查看正在運行的，加上-a查看所有容器
docker ps -a
# 啟動容器
#（-d 后臺運行, --name 容器別名, -p 宿主機端口:容器端口, --network 橋接網絡別名, 最后是鏡像名稱:鏡像版本）
docker run -d  --restart always --name vue-app-container -p 3006:3006 vue-app:1.0.0
# 關閉一個已啟動容器，例如 docker stop vue-app-container
docker stop 容器ID/容器別名
# 啟動一個關閉的容器 ，例如 docker start vue-app-container
docker start 容器ID/容器別名
# 刪除容器，例如 docker rm vue-app-container
docker rm 容器ID/容器名
# 查看一個容器的詳情 ，例如 docker inspect vue-app-container
docker inspect 容器ID/容器別名
# 進入容器內部，例如 docker exec -it vue-app-container /bin/bash
docker exec -it 容器ID/容器別名 /bin/bash

4. Vue 應用鏡像

這里不論是 Vue 應用還是 React 之類的應用，都可以用這樣的方式發布；Vite 和 Webpack 也可以不做區分

首先，Vue 之類的單頁應用，不論是用 Vite 還是 Webpack，都需要將對應的項目代碼打包成普通的 js、css 等文件，最后通過 Nginx 等進行發布。

所以，創建單頁應用鏡像的第一步就是打包。

Docker 創建鏡像的方式有：

• 基于遠程 pull 的鏡像創建

• 本地導入鏡像（也可以看做是直接使用）

• 基于 Dockerfile 創建（最常用的創建方式）

4.1 Dockerfile 配置文件

什么是 Dockerfile？

Dockerfile 是一個用來構建鏡像的文本文件，文本內容包含了一條條構建鏡像所需的指令和說明。

---摘自“菜鳥教程”

Dockerfile 文件的第一行命令，都是 FROM 命令，表示依賴的鏡像。因為我們創建的鏡像基本上都不會從0開始，最低都會依賴一個系統鏡像。

文件內每條執行命令都以一個關鍵詞作為開始，常用命令有：

• FROM： 依賴鏡像

• RUN：需要執行的 shell 命令

• COPY：文件復制命令

• CMD：鏡像容器運行時執行的命令

• ENV：環境變量，一般會在 Dockerfile 文件內部預先定義

• ARG：構建參數，類似環境變量，僅在 build 鏡像時定義

• VOLUME：需要掛載的數據卷，將容器內的某個數據卷映射為宿主機的磁盤位置，可以避免容易過大或者數據丟失

• EXPOSE：僅聲明使用端口，只有在運行容器時沒有指定端口的時候自動映射到這里指定的端口

4.2 編寫 Nginx 配置文件

在構建 Docker 鏡像時，雖然可以執行一些命令，但是基本上不會通過命令來創建一個 nginx 配置文件。所以，我們需要在項目目錄中創建一個 nginx.conf 文件。

### :::
### 服務器 nginx 配置，請勿改變 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;
    }

    # 接口轉發
    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;
    }
}

這個 nginx.conf 文件僅作為示例，需要根據實際情況修改。

4.3 構建鏡像

在執行鏡像構建命令之前，我們需要在根目錄下創建一個 Docker 配置文件 Dockerfile

# 配置 nginx 資源轉發, alpine 為純凈版本
FROM nginx:1.21.6

# 服務器環境
COPY dist/ /usr/share/nginx/hwiot-web/

COPY nginx.conf /etc/nginx/conf.d/default.conf

這個文件僅僅是將外部打包后的 dist 文件夾里面的內容，復制到容器內的 /usr/share/nginx/vue-app/ 內，在復制 nginc.conf 文件到 /etc/nginx/conf.d/default.conf 作為默認 Nginx 配置。

之后執行構建命令：

docker build -t vue-app:1.0.0 .

注意后面的 .

這一步會默認在當前目錄查找 Dockerfile 文件并進行鏡像構建，并且用 -t 指定鏡像名和鏡像版本號。

5. 創建容器與啟動

在上一步鏡像創建完成之后，就可以根據該鏡像創建容器了。

docker run -p 80:80 -d -name vue-app-container vue-app

這里指定了將容器的 80 端口映射到宿主機的80,端口，這樣我們直接在本地打開瀏覽器訪問 http://localhost 即可。

以上就是關于“Docker如何部署單頁應用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。