Docker部署單頁應用的詳細操作

2022-08-06 22:00:11

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部署單頁應用的文章就介紹到這了,更多相關Docker部署單頁應用內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！