快捷導(dǎo)航

Docker如何部署前端項(xiàng)目

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

這篇文章主要介紹了Docker如何部署前端項(xiàng)目問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

基礎(chǔ)概念

什么是 Docker？

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

以下是 Docker 的一些基礎(chǔ)概念：

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

這些是 Docker 的一些基本概念，通過(guò)了解它們，可以更好地理解和使用 Docker 進(jìn)行應(yīng)用程序的開(kāi)發(fā)、交付和運(yùn)行。

環(huán)境安裝

linux上進(jìn)行docker安裝有兩種方式：

Docker自動(dòng)化安裝
Docker手動(dòng)安裝

可以根據(jù)該文章的步驟進(jìn)行安裝：http://www.dbjr.com.cn/server/322968bze.htm

項(xiàng)目部署

項(xiàng)目部署分為兩個(gè)模塊：docker鏡像構(gòu)建 和 容器運(yùn)行

大致流程如下：

準(zhǔn)備 Dockerfile
構(gòu)建 Docker 鏡像
運(yùn)行 Docker 容器
訪問(wèn)應(yīng)用程序

創(chuàng)建 Dockerfile

使用規(guī)則

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

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

保留字

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

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

基礎(chǔ)配置

1.配置 Dockerfile文件

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

# 設(shè)置工作目錄為 /app
WORKDIR /app

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

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

# 使用 pnpm 安裝項(xiàng)目依賴
RUN pnpm install

# 運(yùn)行構(gòu)建命令，例如編譯 TypeScript、打包前端代碼等
RUN pnpm run build

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

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

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

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

2.配置 nginx.conf 文件

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

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

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

接下來(lái)就要讓 docker 根據(jù)它去構(gòu)建鏡像。

鏡像構(gòu)建

通過(guò)Dockerfile構(gòu)建鏡像

執(zhí)行命令：

docker build -t frontdocker:1.0 .

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

開(kāi)始執(zhí)行Dockerfile中的命令，運(yùn)行結(jié)束后就可以看到構(gòu)建的docker鏡像了

容器運(yùn)行

構(gòu)建好鏡像之后，我們需要生成容器并運(yùn)行。(Dockerfile文件、package.json與項(xiàng)目src文件夾同級(jí))

常見(jiàn)的 Docker 命令選項(xiàng)（也稱為選項(xiàng)或標(biāo)志）包括但不限于以下幾個(gè)：

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

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

運(yùn)行docker容器

執(zhí)行命令：

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

注意：