使用 Docker 部署前端项目全攻略

在这里插入图片描述

文章目录

    • 1. Docker 基础概念
      • 1.1 核心组件
      • 1.2 Docker 工作流程
    • 2. 环境准备
      • 2.1 安装 Docker
      • 2.2 验证安装
    • 3. 项目配置
      • 3.1 项目结构
      • 3.2 创建 Dockerfile
    • 4. 构建与运行
      • 4.1 构建镜像
      • 4.2 运行容器
      • 4.3 访问应用
    • 5. 使用 Docker Compose
      • 5.1 创建 docker-compose.yml
      • 5.2 启动服务
      • 5.3 查看日志
    • 6. 高级配置
      • 6.1 多阶段构建
      • 6.2 环境变量
      • 6.3 数据卷
    • 7. 最佳实践建议
      • 7.1 镜像优化
      • 7.2 安全建议
    • 8. 常见问题与解决方案
      • 8.1 问题列表
      • 8.2 调试技巧
    • 9. 扩展阅读

1. Docker 基础概念

1.1 核心组件

组件描述
镜像包含应用及其依赖的只读模板
容器镜像的运行实例
Dockerfile定义镜像构建步骤的脚本

1.2 Docker 工作流程

编写 Dockerfile
构建镜像
运行容器
访问应用

2. 环境准备

2.1 安装 Docker

# Ubuntu
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io# CentOS
sudo yum install -y yum-utils
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
sudo yum install docker-ce docker-ce-cli containerd.io# macOS
brew install --cask docker

2.2 验证安装

docker --version
docker-compose --version

3. 项目配置

3.1 项目结构

my-app/
├── dist/
├── src/
├── package.json
├── Dockerfile
└── docker-compose.yml

3.2 创建 Dockerfile

# 使用官方 Node.js 镜像作为基础镜像
FROM node:14 as build-stage# 设置工作目录
WORKDIR /app# 复制 package.json 和 package-lock.json
COPY package*.json ./# 安装依赖
RUN npm install# 复制项目文件
COPY . .# 构建项目
RUN npm run build# 使用 Nginx 镜像作为运行环境
FROM nginx:stable-alpine as production-stage# 复制构建结果到 Nginx 目录
COPY --from=build-stage /app/dist /usr/share/nginx/html# 暴露端口
EXPOSE 80# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

4. 构建与运行

4.1 构建镜像

docker build -t my-app .

4.2 运行容器

docker run -d -p 8080:80 my-app

4.3 访问应用

打开浏览器访问 http://localhost:8080


5. 使用 Docker Compose

5.1 创建 docker-compose.yml

version: '3'
services:web:build: .ports:- "8080:80"volumes:- ./dist:/usr/share/nginx/htmlrestart: always

5.2 启动服务

docker-compose up -d

5.3 查看日志

docker-compose logs -f

6. 高级配置

6.1 多阶段构建

FROM node:14 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run buildFROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

6.2 环境变量

ENV NODE_ENV=production
# docker-compose.yml
environment:- NODE_ENV=production

6.3 数据卷

volumes:- ./dist:/usr/share/nginx/html

7. 最佳实践建议

7.1 镜像优化

  1. 使用轻量级基础镜像:如 alpine 版本
  2. 减少层数:合并 RUN 指令
  3. 清理缓存:删除不必要的文件

7.2 安全建议

  1. 非 root 用户运行:提高安全性
  2. 限制资源使用:防止资源耗尽
  3. 定期更新镜像:修复安全漏洞

8. 常见问题与解决方案

8.1 问题列表

问题原因解决方案
构建失败依赖问题检查 package.json
容器无法启动端口冲突更改端口映射
访问失败网络配置问题检查防火墙设置

8.2 调试技巧

  1. 查看日志
    docker logs <container_id>
    
  2. 进入容器
    docker exec -it <container_id> /bin/sh
    
  3. 检查网络
    docker network inspect <network_name>
    

9. 扩展阅读

  • Docker 官方文档
  • Dockerfile 最佳实践
  • 前端性能优化指南

通过本文的深度解析,开发者可以全面掌握使用 Docker 部署前端项目的方法与技巧。建议结合实际项目需求,合理配置 Docker,以提升部署效率和系统稳定性。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/73427.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue中使用到的padStart方法是什么

padStart() 是 JavaScript 字符串对象的一个方法&#xff0c;用于在字符串的开头填充指定的字符&#xff0c;直到字符串达到指定的长度。这在需要对字符串进行格式化&#xff0c;使其保持固定长度时非常有用&#xff0c;比如在日期格式化时&#xff0c;确保月份、日期等为两位数…

springboot集成flink实现DM数据库同步到ES

前言 今天分享的其实是一个面试上机方案&#xff0c;就是监测DM数据库数据&#xff0c;同步到ES&#xff0c;使用flink实现。基本套路&#xff0c;其实也没啥好说的&#xff0c;非要说也就是&#xff0c;国家队还是很多不跟你玩啊&#xff0c;虽然flink有阿里在背后&#xff0c…

springboot jackson 日期格式配置

一、JacksonProperties JacksonProperties是一个用ConfigurationProperties(prefix“spring.jackson”)注解修饰的类&#xff0c;所以可以通过以spring.jackson为前缀的配置去赋值。 JacksonAutoConfiguration会通过Jackson2ObjectMapperBuilderCustomizer实现类根据JacksonPr…

【蓝桥杯】24省赛:数字串个数

思路 本质是组合数学问题&#xff1a; 9个数字组成10000位数字有9**10000可能 不包括3的可能8**10000 不包括7的可能8**10000 既不包括3也不包括77**10000 根据容斥原理&#xff1a;结果为 9 ∗ ∗ 10000 − 8 ∗ ∗ 10000 − 8 ∗ ∗ 10000 7 ∗ ∗ 10000 9**10000 - 8**10…

AGI大模型(7):提示词应用

1 生成数据 LLM具有⽣成连贯⽂本的强⼤能⼒。使⽤有效的提示策略可以引导模型产⽣更好、更⼀致和更真实的响应。LLMs还可以特别有⽤地⽣成数据,这对于运⾏各种实验和评估⾮常有⽤。例如,我们可以使⽤它来为情感分类器⽣成快速样本,如下所示: 提示: ⽣成10个情感分析的范…

Unity开发中对象池设计与使用

一、设计目的 为了避免频繁创建和销毁对象&#xff08;例如 UI 元素、事件对象等&#xff09;带来的内存分配和垃圾回收压力&#xff0c;可以使用对象池来管理对象来提高游戏的性能&#xff0c;避免游戏卡顿。 二、代码实现 public interface IRecycle {/// <summary>…

JVM并发编程AQSsync锁ReentrantLock线程池ThreadLocal

并发编程2 synchronized锁实现**AQS****ReentrantLock实现****JUC 常用类**池的概念 ThreadLocalThreadLocal原理内存泄露强引用:软引用弱引用虚引用ThreadLocal内存泄露 synchronized锁实现 synchronized是一个关键字,实现同步,还需要我们提供一个同步锁对象,记录锁状态,记录…

【JavaEE】网络原理之初识

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

操作系统-八股

进程基础&#xff1a; 进程定义&#xff1a;运行中的程序&#xff0c;有独立的内存空间和地址&#xff0c;是系统进行资源调度和分配的基本单位。 并发&#xff0c;并行 并发就是单核上面轮询&#xff0c;并行就是同时执行&#xff08;多核&#xff09;&#xff1b; 进程上下…

ffmpeg面试题整理

1. 基础概念 问题&#xff1a;FFmpeg 是什么&#xff1f;它的核心功能有哪些&#xff1f; 编解码&#xff1a;支持几乎所有音视频格式&#xff08;如 H.264, AAC, MP3&#xff09;。转换&#xff1a;在不同容器格式之间转换&#xff08;如 MP4 → MKV&#xff09;。流处理&…

chrome浏览器插件拓展捕获页面的响应体内容

因为chrome extension官方没有的直接获取响应体的方法&#xff0c;所以需要自己实现方法来获取&#xff0c;实现的方式有很多种&#xff0c;这是记录的第二种&#xff0c;第一种就是使用vconsole来实现&#xff0c;vconsole是一个开源框架&#xff0c;一个轻量、可拓展、针对手…

探索天然分子swertiamarin调控脂肪生成的新机制

随着生活方式的改变和环境的恶化&#xff0c;糖尿病这一全球性健康挑战日益严峻。据世界卫生组织统计&#xff0c;全球糖尿病患者数量不断攀升&#xff0c;其中2型糖尿病&#xff08;T2DM&#xff09;占据了绝大多数。T2DM不仅影响患者的生活质量&#xff0c;还给医疗系统带来了…

沐数科技数据开发岗笔试题2025

描述性统计 标准差 答案: A 解析: 标准差 衡量数据集中数值变化或离散程度的一种度量。它反映了数据集中的各个数值与数据集的平均值&#xff08;均值&#xff09;之间的偏离程度。标准差越大&#xff0c;表明数据的分布越分散&#xff1b;标准差越小&#xff0c;表明数据…

Java 集合遍历过程中修改数据触发 Fail-Fast 机制 ,导致报ConcurrentModificationException异常

Java Fail-Fast 机制 Fail-Fast 机制是 Java 集合框架中的一种错误检测机制&#xff0c;用于在遍历集合时检测结构修改。如果在迭代器创建之后&#xff0c;集合被修改&#xff08;例如添加或删除元素&#xff09;&#xff0c;并且这种修改不是通过迭代器自身的 remove() 方法进…

Qt-ZMQ的使用补充(pub-sub)

之前写过一篇Qt使用ZMQ的博客Qt网络编程-ZMQ的使用&#xff0c;本文是其的补充部分。 Linux上编译使用 首先这次实在Linux上进行演示&#xff0c;下载zmq源码&#xff0c;安装cmake&#xff0c;使用cmake进行编译。下载之后解压&#xff1a; 输入命令&#xff1a; cd ..mkdi…

C++的名称空间

C++的名称空间(namespace)是一种用于组织代码、防止命名冲突的机制。以下是名称空间的详细说明和使用建议: 1. 名称空间的定义 使用namespace关键字定义,内部可包含变量、函数、类等: namespace MyNamespace {int a;void func() {} }2. 访问方式 作用域解析运算符:::显…

记录致远OA服务器硬盘升级过程

前言 日常使用中OA系统突然卡死&#xff0c;刷新访问进不去系统&#xff0c;ping服务器地址正常&#xff0c;立马登录服务器检查&#xff0c;一看磁盘爆了。 我大脑直接萎缩了&#xff0c;谁家OA系统配400G的空间啊&#xff0c;过我手的服务器没有50也是30台&#xff0c;还是…

[测试]自动化的概念 及使用Selenium实现Web自动化测试

文章目录 1. 自动化1.1 自动化概念1.2 自动化分类1.2.1 接口自动化1.2.2 UI自动化 1.3 自动化测试金字塔 2. Web自动化测试2.1 驱动 3. Selenium3.1 一个简单的Web自动化示例3.2 Selenium 驱动 浏览器的工作原理 1. 自动化 1.1 自动化概念 自动化是指自动地代替人的行为完成…

Python教程(三):类对象、闭包、装饰器、类型注解、MRO

Python总结&#xff08;三&#xff09; 本系列其他教程&#xff1a; Python教程(一)&#xff1a;基本语法、流程控制、数据容器 Python教程(二)&#xff1a;函数、异常、模块&包、文件读取、常用模块 文章目录 Python总结&#xff08;三&#xff09;一、类&对象1.1 成…

什么是 HTML?

HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言&#xff0c;而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面 HT…