Docker如何部署前端項目

更新時間：2024年06月20日 09:38:23 作者：老友@

這篇文章主要介紹了Docker如何部署前端項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

基礎概念

什么是 Docker？

Docker 是一個用于開發(fā)、交付和運行應用程序的開源平臺。它利用容器技術，只隔離應用程序的運行時環(huán)境但容器之間可以共享同一個操作系統(tǒng)，可以將應用程序及其依賴項打包到一個可移植的容器中，然后發(fā)布到任何支持 Docker 的環(huán)境中運行，無論是開發(fā)人員的個人筆記本電腦、數(shù)據(jù)中心的虛擬機，還是云服務提供商的主機上?？梢岳斫獬梢粋€更輕量級的虛擬機并且使用的是本機的操作系統(tǒng)。

以下是 Docker 的一些基礎概念：

容器(Container)：容器是一個輕量級、獨立、可執(zhí)行的軟件包，包含應用程序及其所有依賴項（如代碼、運行時、系統(tǒng)工具、庫等）。容器化應用程序與其環(huán)境相互隔離，但又共享主機的操作系統(tǒng)內核，因此它們更加高效、可移植和可靠。
鏡像(Image)：鏡像是容器的基礎，它是一個只讀的模板，包含了運行容器所需的所有信息，包括文件系統(tǒng)、運行時、環(huán)境變量和程序配置等。可以通過 Dockerfile 來定義鏡像的構建過程，也可以從 Docker Hub 或其他鏡像倉庫中獲取現(xiàn)成的鏡像。
Dockerfile：Dockerfile 是一個文本文件，用于定義如何構建 Docker 鏡像。它包含了一系列的指令和命令，用于設置鏡像的基礎環(huán)境、安裝依賴、配置應用程序等。通過執(zhí)行 docker build 命令，可以根據(jù) Dockerfile 構建出鏡像。
容器注冊表(Container Registry)：容器注冊表是存儲和分發(fā) Docker 鏡像的服務。最常見的容器注冊表之一是 Docker Hub，它是一個公共的鏡像注冊表，包含了大量的官方和社區(qū)維護的鏡像。除了 Docker Hub 外，還有其他第三方的容器注冊表，也可以搭建私有的容器注冊表來存儲和管理自己的鏡像。
Docker Engine：Docker 引擎是 Docker 的核心組件，負責管理容器的生命周期、構建、運行和分發(fā)容器。它包括一個守護進程（Dockerd）和一組 CLI 工具，通過與 Docker 守護進程進行通信，可以與容器進行交互、管理鏡像、執(zhí)行構建等操作。

這些是 Docker 的一些基本概念，通過了解它們，可以更好地理解和使用 Docker 進行應用程序的開發(fā)、交付和運行。

環(huán)境安裝

linux上進行docker安裝有兩種方式：

Docker自動化安裝
Docker手動安裝

可以根據(jù)該文章的步驟進行安裝：http://m.fzitv.net/server/322968bze.htm

項目部署

項目部署分為兩個模塊：docker鏡像構建 和 容器運行

大致流程如下：

準備 Dockerfile
構建 Docker 鏡像
運行 Docker 容器
訪問應用程序

創(chuàng)建 Dockerfile

使用規(guī)則

Dockerfile 的編寫需要遵循以下規(guī)則：

每條保留字指令都必須為大寫字母且后面要跟隨至少一個參數(shù)
指令順序執(zhí)行，遵循從上到下原則
# 表示注釋
每條指令都會創(chuàng)建一個新的鏡像層，并對鏡像進行提交

保留字

在 Dockerfile 中，常用的保留字（指令）包括但不限于以下幾個：

FROM：指定基礎鏡像，用于構建新的鏡像。
RUN：在鏡像構建過程中執(zhí)行命令，用于安裝依賴、運行構建腳本等。
COPY：將文件或目錄從構建上下文復制到鏡像中。
ADD：類似于 COPY，但功能更豐富，支持遠程 URL、自動解壓縮等。
WORKDIR：設置工作目錄，后續(xù)命令將在該目錄下執(zhí)行。
EXPOSE：聲明容器運行時監(jiān)聽的端口，但并不實際將端口暴露出去。
CMD：設置容器啟動時執(zhí)行的默認命令，可以被 Dockerfile 中的多個 CMD 指令覆蓋，但只有最后一個生效。
ENTRYPOINT：設置容器啟動時執(zhí)行的默認命令，與 CMD 不同的是，ENTRYPOINT 的參數(shù)不會被覆蓋，而是作為 CMD 的參數(shù)傳遞。
ENV：設置環(huán)境變量，供后續(xù)命令使用。
ARG：定義構建參數(shù)，可以在構建時傳遞給 Dockerfile 中的其他指令使用。
VOLUME：聲明匿名數(shù)據(jù)卷，用于持久化存儲容器中的數(shù)據(jù)。
USER：指定運行容器時使用的用戶名或 UID。

基礎配置

1.配置 Dockerfile文件

# 第一個階段：構建階段，使用 Node.js 16 的 Alpine 鏡像作為基礎鏡像，并命名為 build-stage
FROM node:16-alpine as build-stage

# 設置工作目錄為 /app
WORKDIR /app

# 將 package.json 文件復制到工作目錄
COPY package.json ./

# 安裝 pnpm，并設置 registry 地址為 https://registry.npmmirror.com
RUN npm install -g pnpm \
    && npm config set registry https://registry.npmmirror.com

# 使用 pnpm 安裝項目依賴
RUN pnpm install

# 運行構建命令，例如編譯 TypeScript、打包前端代碼等
RUN pnpm run build

## -- stage: dist => nginx --
# 第二個階段：將構建好的前端靜態(tài)文件復制到 Nginx 容器中
FROM nginx:alpine

# 設置時區(qū)為 Asia/Shanghai
ENV TZ=Asia/Shanghai

# 將 nginx.conf 文件復制到 Nginx 配置目錄下的 default.conf 文件中
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 從第一個階段的 build-stage 鏡像中復制構建好的靜態(tài)文件到 Nginx 的 html 目錄下
COPY --from=build-stage /app/dist /usr/share/nginx/html

2.配置 nginx.conf 文件

server {
    listen       80 default_server;   # 監(jiān)聽80端口，作為默認服務
    server_name  _;   # 該配置將匹配任何域名或IP地址

    gzip on;   # 啟用gzip壓縮
    gzip_min_length 1k;     # 設置允許壓縮的頁面最小字節(jié)數(shù)
    gzip_buffers 4 16k;     # 用來存儲gzip的壓縮結果
    gzip_http_version 1.1;  # 識別HTTP協(xié)議版本
    gzip_comp_level 2;      # 設置gzip的壓縮比，范圍為1-9
    gzip_types text/plain application/x-javascript text/css application/xml application/javascript; # 指定需要壓縮的文件類型
    gzip_proxied any;       # 無論后端服務器的headers頭返回什么信息，都無條件啟用壓縮

    location / { ## 前端項目
        root   /usr/share/nginx/html/;   # 指定前端項目的根目錄
        index  index.html index.htm;   # 指定默認的索引文件
        try_files $uri $uri/ /index.html;   # 嘗試查找文件，如果找不到則重定向到index.html
    }
}

接下來就要讓 docker 根據(jù)它去構建鏡像。

鏡像構建

通過Dockerfile構建鏡像

執(zhí)行命令：

docker build -t frontdocker:1.0 .

(注意：frontdocker:1.0 為鏡像名稱 : 鏡像版本號，可以自定義）

開始執(zhí)行Dockerfile中的命令，運行結束后就可以看到構建的docker鏡像了

容器運行

構建好鏡像之后，我們需要生成容器并運行。(Dockerfile文件、package.json與項目src文件夾同級)

常見的 Docker 命令選項（也稱為選項或標志）包括但不限于以下幾個：

-d, --detach：以后臺模式（守護進程模式）運行容器，使容器在后臺運行而不會阻塞終端。
--name：為容器指定一個名稱，使得容器可以更容易地被識別和操作。
-p, --publish：將容器的端口映射到主機的端口，以便可以從主機訪問容器內的服務。
-v, --volume：將主機文件或目錄掛載到容器內，以便實現(xiàn)持久化存儲或共享數(shù)據(jù)。
-e, --env：設置環(huán)境變量，可以在容器中設置各種環(huán)境變量。
-i, --interactive：交互式運行容器，允許用戶輸入命令或與容器進行交互。
-t, --tty：為容器分配一個終端（TTY），通常與 -i 一起使用以獲得交互式會話。
--rm：在容器退出時自動刪除容器，用于臨時容器，避免容器的殘留。
--network：指定容器連接到的網(wǎng)絡，用于連接容器與其他容器或主機。
--restart：設置容器的重啟策略，可以在容器退出時自動重啟容器。

這些是 Docker 命令中常用的一些選項，通過組合使用這些選項，可以實現(xiàn)各種復雜的容器操作和配置。

運行docker容器

執(zhí)行命令：

        docker run -d \
          --restart=always \
          --name "front" \
          --add-host=host.docker.internal:host-gateway \
          -p "9999:80"  \
          frontdocker:1.0

注意：