Docker如何部署前端項目
基礎(chǔ)概念
什么是 Docker?
Docker 是一個用于開發(fā)、交付和運行應用程序的開源平臺。它利用容器技術(shù),只隔離應用程序的運行時環(huán)境但容器之間可以共享同一個操作系統(tǒng),可以將應用程序及其依賴項打包到一個可移植的容器中,然后發(fā)布到任何支持 Docker 的環(huán)境中運行,無論是開發(fā)人員的個人筆記本電腦、數(shù)據(jù)中心的虛擬機,還是云服務提供商的主機上??梢岳斫獬梢粋€更輕量級的 虛擬機 并且使用的是本機的操作系統(tǒng)。
以下是 Docker 的一些基礎(chǔ)概念:
- 容器(Container):容器是一個輕量級、獨立、可執(zhí)行的軟件包,包含應用程序及其所有依賴項(如代碼、運行時、系統(tǒng)工具、庫等)。容器化應用程序與其環(huán)境相互隔離,但又共享主機的操作系統(tǒng)內(nèi)核,因此它們更加高效、可移植和可靠。
- 鏡像(Image):鏡像是容器的基礎(chǔ),它是一個只讀的模板,包含了運行容器所需的所有信息,包括文件系統(tǒng)、運行時、環(huán)境變量和程序配置等??梢酝ㄟ^ Dockerfile 來定義鏡像的構(gòu)建過程,也可以從 Docker Hub 或其他鏡像倉庫中獲取現(xiàn)成的鏡像。
- Dockerfile:Dockerfile 是一個文本文件,用于定義如何構(gòu)建 Docker 鏡像。它包含了一系列的指令和命令,用于設(shè)置鏡像的基礎(chǔ)環(huán)境、安裝依賴、配置應用程序等。通過執(zhí)行 docker build 命令,可以根據(jù) Dockerfile 構(gòu)建出鏡像。
- 容器注冊表(Container Registry):容器注冊表是存儲和分發(fā) Docker 鏡像的服務。最常見的容器注冊表之一是 Docker Hub,它是一個公共的鏡像注冊表,包含了大量的官方和社區(qū)維護的鏡像。除了 Docker Hub 外,還有其他第三方的容器注冊表,也可以搭建私有的容器注冊表來存儲和管理自己的鏡像。
- Docker Engine:Docker 引擎是 Docker 的核心組件,負責管理容器的生命周期、構(gòu)建、運行和分發(fā)容器。它包括一個守護進程(Dockerd)和一組 CLI 工具,通過與 Docker 守護進程進行通信,可以與容器進行交互、管理鏡像、執(zhí)行構(gòu)建等操作。
這些是 Docker 的一些基本概念,通過了解它們,可以更好地理解和使用 Docker 進行應用程序的開發(fā)、交付和運行。
環(huán)境安裝
linux上進行docker安裝有兩種方式:
- Docker自動化安裝
- Docker手動安裝
可以根據(jù)該文章的步驟進行安裝:http://www.dbjr.com.cn/server/322968bze.htm
項目部署
項目部署分為兩個模塊:docker鏡像構(gòu)建 和 容器運行
大致流程如下:
- 準備 Dockerfile
- 構(gòu)建 Docker 鏡像
- 運行 Docker 容器
- 訪問應用程序
創(chuàng)建 Dockerfile
使用規(guī)則
Dockerfile 的編寫需要遵循以下規(guī)則:
- 每條保留字指令都必須為大寫字母且后面要跟隨至少一個參數(shù)
- 指令順序執(zhí)行,遵循從上到下原則
- # 表示注釋
- 每條指令都會創(chuàng)建一個新的鏡像層,并對鏡像進行提交
保留字
在 Dockerfile 中,常用的保留字(指令)包括但不限于以下幾個:
- FROM:指定基礎(chǔ)鏡像,用于構(gòu)建新的鏡像。
- RUN:在鏡像構(gòu)建過程中執(zhí)行命令,用于安裝依賴、運行構(gòu)建腳本等。
- COPY:將文件或目錄從構(gòu)建上下文復制到鏡像中。
- ADD:類似于 COPY,但功能更豐富,支持遠程 URL、自動解壓縮等。
- WORKDIR:設(shè)置工作目錄,后續(xù)命令將在該目錄下執(zhí)行。
- EXPOSE:聲明容器運行時監(jiān)聽的端口,但并不實際將端口 暴露出去。
- CMD:設(shè)置容器啟動時執(zhí)行的默認命令,可以被 Dockerfile 中的多個 CMD 指令覆蓋,但只有最后一個生效。
- ENTRYPOINT:設(shè)置容器啟動時執(zhí)行的默認命令,與 CMD 不同的是,ENTRYPOINT 的參數(shù)不會被覆蓋,而是 作為 CMD 的參數(shù)傳遞。
- ENV:設(shè)置環(huán)境變量,供后續(xù)命令使用。
- ARG:定義構(gòu)建參數(shù),可以在構(gòu)建時傳遞給 Dockerfile 中的其他指令使用。
- VOLUME:聲明匿名數(shù)據(jù)卷,用于持久化存儲容器中的數(shù)據(jù)。
- USER:指定運行容器時使用的用戶名或 UID。
基礎(chǔ)配置
- 1.配置 Dockerfile文件
# 第一個階段:構(gòu)建階段,使用 Node.js 16 的 Alpine 鏡像作為基礎(chǔ)鏡像,并命名為 build-stage FROM node:16-alpine as build-stage # 設(shè)置工作目錄為 /app WORKDIR /app # 將 package.json 文件復制到工作目錄 COPY package.json ./ # 安裝 pnpm,并設(shè)置 registry 地址為 https://registry.npmmirror.com RUN npm install -g pnpm \ && npm config set registry https://registry.npmmirror.com # 使用 pnpm 安裝項目依賴 RUN pnpm install # 運行構(gòu)建命令,例如編譯 TypeScript、打包前端代碼等 RUN pnpm run build ## -- stage: dist => nginx -- # 第二個階段:將構(gòu)建好的前端靜態(tài)文件復制到 Nginx 容器中 FROM nginx:alpine # 設(shè)置時區(qū)為 Asia/Shanghai ENV TZ=Asia/Shanghai # 將 nginx.conf 文件復制到 Nginx 配置目錄下的 default.conf 文件中 COPY ./nginx.conf /etc/nginx/conf.d/default.conf # 從第一個階段的 build-stage 鏡像中復制構(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)聽80端口,作為默認服務 server_name _; # 該配置將匹配任何域名或IP地址 gzip on; # 啟用gzip壓縮 gzip_min_length 1k; # 設(shè)置允許壓縮的頁面最小字節(jié)數(shù) gzip_buffers 4 16k; # 用來存儲gzip的壓縮結(jié)果 gzip_http_version 1.1; # 識別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; # 無論后端服務器的headers頭返回什么信息,都無條件啟用壓縮 location / { ## 前端項目 root /usr/share/nginx/html/; # 指定前端項目的根目錄 index index.html index.htm; # 指定默認的索引文件 try_files $uri $uri/ /index.html; # 嘗試查找文件,如果找不到則重定向到index.html } }
接下來就要讓 docker 根據(jù)它去構(gòu)建鏡像。
鏡像構(gòu)建
通過Dockerfile構(gòu)建鏡像
執(zhí)行命令:
docker build -t frontdocker:1.0 .
(注意:frontdocker:1.0 為 鏡像名稱 : 鏡像版本號,可以自定義)
開始執(zhí)行Dockerfile中的命令,運行結(jié)束后就可以看到構(gòu)建的docker鏡像了
容器運行
構(gòu)建好鏡像之后,我們需要生成容器并運行。(Dockerfile文件、package.json與項目src文件夾同級)
常見的 Docker 命令選項(也稱為選項或標志)包括但不限于以下幾個:
- -d, --detach:以后臺模式(守護進程模式)運行容器,使容器在后臺運行而不會阻塞終端。
- --name:為容器指定一個名稱,使得容器可以更容易地被識別和操作。
- -p, --publish:將容器的端口映射到主機的端口,以便可以從主機訪問容器內(nèi)的服務。
- -v, --volume:將主機文件或目錄掛載到容器內(nèi),以便實現(xiàn)持久化存儲或共享數(shù)據(jù)。
- -e, --env:設(shè)置環(huán)境變量,可以在容器中設(shè)置各種環(huán)境變量。
- -i, --interactive:交互式運行容器,允許用戶輸入命令或與容器進行交互。
- -t, --tty:為容器分配一個終端(TTY),通常與 -i 一起使用以獲得交互式會話。
- --rm:在容器退出時自動刪除容器,用于臨時容器,避免容器的殘留。
- --network:指定容器連接到的網(wǎng)絡,用于連接容器與其他容器或主機。
- --restart:設(shè)置容器的重啟策略,可以在容器退出時自動重啟容器。
這些是 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
注意:
- -d 為后臺運行
- -p 為映射容器端口到主機端口,9999為本機的映射地址 可自定義 80為docker容器的監(jiān)聽端口
- --name 為容器名稱,可以自定義
- --restart=always 為容器自動重啟
- --add-host 參數(shù)將 host.docker.internal 映射到了 host-gateway。
這意味著在容器內(nèi)部,host.docker.internal 將被解析為宿主機的網(wǎng)關(guān)地址。frontdocker:1.0 為 鏡像名稱 : 鏡像版本號
容器成功運行
然后我們就可以打開 http://localhost:9999 去查看我們部署好的前端項目了。
當容器運行時,也可以進入容器修改nginx配置文件
1、進入docker運行后,進入容器
執(zhí)行: docker exec -it front /bin/sh
2、重新運行容器(修改后重新運行容器)
執(zhí)行: docker restart front
另外,docker 鏡像也可以上傳到線上倉庫中,方便后續(xù)的拉取和部署。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Shell腳本構(gòu)建Docker 半自動化編譯打包發(fā)布應用操作
這篇文章主要介紹了Shell腳本構(gòu)建Docker 半自動化編譯打包發(fā)布應用操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03Docker中搭建FastDFS文件系統(tǒng)(多圖教程)
這篇文章主要介紹了Docker中搭建FastDFS文件系統(tǒng)(多圖教程),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-05-05容器化技術(shù)架構(gòu)jenkins?docker?k8s腳本淺析
本篇博文不是詳細介紹容器技術(shù)的,而是具體的實踐。此篇博文分為兩個階段,分別是ci,cd。包含三部分內(nèi)容,分別是jenkins,docker,k8s的腳本淺析2022-03-03基于Docker搭建Graylog分布式日志采集系統(tǒng)的詳細過程
Graylog是一個開源的日志管理工具,支持日志收集、解析、存儲、搜索和可視化,它可以從各種數(shù)據(jù)源收集日志,并通過內(nèi)置的解析器將日志格式化,本文介紹基于Docker搭建Graylog分布式日志采集系統(tǒng),感興趣的朋友一起看看吧2025-02-02Idea通過docker compose?發(fā)布項目的過程
這篇文章主要介紹了Idea結(jié)合docker-compose發(fā)布項目,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08docker容器環(huán)境安裝及鏡像基礎(chǔ)操作
容器是一種輕量級虛擬化技術(shù),能夠快速構(gòu)建業(yè)務環(huán)境并便于業(yè)務遷移,解決兼容性問題,這篇文章主要介紹了docker容器環(huán)境安裝及鏡像基礎(chǔ)操作,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09