当前位置：首页 > news >正文

一个vue项目如何运行在docker

news 来源：原创 2025/7/15 14:57:27

将 Vue.js 应用程序通过 Docker 发布是一个非常常见的做法，它可以帮助你轻松地部署应用到不同的环境中。下面是一个简单的指南，介绍如何为 Vue.js 项目创建 Dockerfile 并进行构建和运行。

第一步：安装 Docker

确保你的开发机器上已经安装了 Docker。你可以从 Docker 官方网站下载并安装适合你操作系统的 Docker 版本。

第二步：准备 Vue.js 项目

如果你还没有 Vue.js 项目，可以使用 Vue CLI 创建一个新的项目：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

因为vue 项目需要nginx运行，需要一个配置文件nginx.conf，所以创文件

server {listen 80;server_name localhost;location / {root /usr/share/nginx/html;index index.html index.htm;try_files $uri $uri/ /index.html;}error_log /var/log/nginx/error.log;access_log /var/log/nginx/access.log;
}

包括文件目录如下
在这里插入图片描述

第三步：创建 Dockerfile

在项目的根目录下创建一个名为 Dockerfile 的文件，然后添加以下内容：

# 复制 package.json 和 package-lock.json 到工作目录
COPY package*.json ./# 安装依赖
RUN npm ci --only=production# 如果有其他需要编译的资源（例如：Vue.js 应用），先复制所有文件
COPY . .# 构建 Vue.js 应用
RUN npm run build# 使用 nginxinc/nginx-unprivileged 镜像来服务 Vue.js 应用
FROM nginxinc/nginx-unprivileged:alpine# 设置工作目录
WORKDIR /app# 删除默认的 nginx html 文件夹，并将 Vue.js 应用复制到 nginx 的默认目录中
COPY --from=build-stage /app/dist /usr/share/nginx/html# 暴露 80 端口
EXPOSE 80# 确保 nginx 配置文件正确
COPY ./nginx.conf /etc/nginx/conf.d/default.conf# 启动 nginx
CMD ["nginx", "-g", "daemon off;"]

这个 Dockerfile 分为两个阶段：构建阶段和运行阶段。构建阶段使用 Node.js 镜像来构建 Vue.js 应用，而运行阶段则使用 Nginx 镜像来服务构建好的静态文件。

第四步：构建 Docker 镜像

在包含 Dockerfile 的目录中打开终端，执行以下命令来构建 Docker 镜像：

docker build -t my-vue-app .

这里的 -t 参数用于指定镜像的名字，你可以根据自己的需求修改名字。
在这里插入图片描述

第五步：运行 Docker 容器

构建完成后，你可以使用以下命令来运行 Docker 容器：

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

在这里插入图片描述

这条命令会启动一个新的容器，并将容器内的 80 端口映射到宿主机的 8080 端口上。现在，你可以通过访问 http://localhost:8080 来查看你的 Vue.js 应用了。
在这里插入图片描述

第六步：推送镜像到 Docker Hub 或其他仓库

如果你想让其他人也能使用你的 Docker 镜像，可以将其推送到 Docker Hub 或其他 Docker 镜像仓库：

docker tag my-vue-app your-dockerhub-username/my-vue-app
docker push your-dockerhub-username/my-vue-app

这样就完成了 Vue.js 应用的 Docker 化过程。

一个vue项目如何运行在docker

将 Vue.js 应用程序通过 Docker 发布是一个非常常见的做法，它可以帮助你轻松地部署应用到不同的环境中。下面是一个简单的指南，介绍如何为 Vue.js 项目创建 Dockerfile 并进行构建和运行。第一步：安装 Docker 确保你的开发机器上已经安装了…...

编程日记 2025/7/15 14:57:27

重读《人月神话》（15）-祸起萧墙（Hatching a Catastrophe

增加更多的人手到一个已经延期的项目中往往不会加快项目的进度，反而可能使情况变得更糟。项目进度的细微延迟往往难以察觉，但它们却能悄无声息地累积起来，最终对整个项目的完成时间造成重大影响。昨天，一位关键成员因突发疾病未…...

编程日记 2025/7/14 17:11:30

【大数据学习 | Spark-Core】广播变量和累加器

1. 共享变量 Spark两种共享变量：广播变量（broadcast variable）与累加器（accumulator）。累加器用来对信息进行聚合，相当于mapreduce中的counter；而广播变量用来高效分发较大的对象&#xff0c…...

编程日记 2025/7/14 21:29:52

C/C++基础知识复习（30）

1) 什么是 C 中的 Lambda 表达式？它的作用是什么？ Lambda 表达式： 在 C 中，Lambda 表达式是一种可以定义匿名函数的机制，可以在代码中快速创建一个内联的函数对象，而不需要显式地定义一个函数。Lambda 表…...

编程日记 2025/7/11 18:15:03

【Spring MVC】如何获取cookie/session以及响应@RestController的理解，Header的设置

前言 🌟🌟本期讲解关于SpringMVC的编程之参数传递~~~ 🌈感兴趣的小伙伴看一看小编主页：GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 🎆那么废…...

编程日记 2025/7/14 5:21:05

Could not locate device support files.

报错信息：Failure Reason: The device may be running a version of iOS (13.6.1 17G80) that is not supported by this version of Xcode.[missing string: 869a8e318f07f3e2f42e11d435502286094f76de] 问题：xcode15升级到xcode16之后，13.…...

编程日记 2025/7/14 5:45:23

Kafka日志索引详解以及生产常见问题分析与总结

文章目录一、Kafka的Log日志梳理1.1、Topic下的消息如何存储1.1.1、log文件追加记录所有消息1.1.2、index和timeindex加速读取log消息日志 1.2、文件清理机制1.2.1、如何判断哪些日志文件过期了1.2.2、过期的日志文件如何处理 1.3、Kafka的文件高效读写机制1.3.1、Kafka的文件…...

编程日记 2025/7/9 16:36:10

Qt中QGraphics绘图类相关解释

Item(图元)坐标系、Scene(场景)坐标系、View(视图)坐标系，三者均为：x轴正方向向右，y轴正方向向下 1、Item(图元)：坐标属于局部坐标，通常以图元中心为原点(中心对称)。场景坐标系统描述了顶层的图元，每个图…...

编程日记 2025/7/13 7:51:17

@Pattern （用于校验字符串是否符合特定正则表达式）

Pattern 是一个用于校验字符串是否符合特定正则表达式的注解，它在 Java 中常用于验证输入数据的格式。以下是 Pattern 注解的详解和使用方法： 含义 Pattern 注解用于在 Java 中对字段进行注解，以确保其值与指定的正则表达式匹配。这个注解可…...

编程日记 2025/7/12 20:30:09

线程与进程的个人理解

进程（Process）： 一个程序在执行时，操作系统为其分配的资源（如内存、CPU 时间等）构成了一个进程。每个进程都有自己的独立的地址空间、堆栈和局部变量，它们之间不共享内存（除非通过特…...

编程日记 2025/7/14 6:28:21

移远通信携手紫光展锐，以“5G+算力”共绘万物智联新蓝图

11月26日，2024紫光展锐全球合作伙伴大会在上海举办。作为紫光展锐重要的合作伙伴，移远通信应邀参会。在下午的物联网生态论坛上，移远通信产品总监胡勇华作题为“5G与算力双擎驱动引领智联新未来”的演讲，深度剖析了产业发展的趋…...

编程日记 2025/7/9 4:31:14

【接口封装】——7、连接并使用 MySQL 数据库

头文件： #include <qsqlquery.h> #include <qsqldatabase.h>（注：需要先适配数据库） 函数定义： public:bool verifyLogin(const QString& account, const QString& password);QString getUserName(…...

编程日记 2025/7/10 22:09:29

vue2 中使用 Ag-grid-enterprise 企业版

文章目录问题Vue2 引入企业版不生效npm run dev 时卡住了94% after seal 卡在这里了测试打包源 git 解决方案记录问题我想用企业版的树状表格 Vue2 引入企业版不生效编译引入 // vue.config.js module.exports {transpileDependencies: ["ag-grid-enterprise"…...

编程日记 2025/7/13 4:46:53

计算机视觉算法：从基础到应用的全面解析

计算机视觉（Computer Vision, CV）是一门研究如何使计算机“看懂”图像和视频的学科。它结合了数学、计算机科学和人工智能的多个领域，旨在通过自动分析和理解数字图像、视频中的内容，模拟人类的视觉感知。计算机视觉算法广泛应用于图像识别、目标检测、自动驾驶、医疗影像等…...

编程日记 2025/7/9 19:41:16

[HCTF 2018]WarmUp

抓包什么也没看到就是访问这个滑稽的图片信息收集这里说明就是他的后台代码在这个php里面我们访问这样就很好看了代码审计 [HCTF 2018]WarmUp全网最详细解释-CSDN博客这篇博客讲得真JB好我就复述下我对博主的理解吧~ 这里我们可以看见白名单是source.php 和h…...

编程日记 2025/7/15 5:04:41

解决jupyter notebook 新建或打开.ipynb 报500 : Internal Server Error（涉及jinja2兼容性问题）

报错： [E 10:09:52.362 NotebookApp] 500 GET /notebooks/Untitled16.ipynb?kernel_namepyt hon3 (::1) 93.000000ms refererhttp://localhost:8888/tree ...... 重点是： from .exporters import * File "C:\ProgramData\Anaconda3\lib\site-p…...

编程日记 2025/7/8 23:06:11

Android 实现悬浮球的功能

Android 实现悬浮球的功能在 Android 中，实现悬浮球可以通过以下方式实现，常见的方法是使用 WindowManager 创建一个悬浮窗口。以下是具体的实现步骤： 1. 配置权限在 AndroidManifest.xml 中添加悬浮窗权限： <uses-permis…...

编程日记 2025/7/13 23:05:06

SQL EXISTS 子句的深入解析

SQL EXISTS 子句的深入解析引言 SQL（Structured Query Language）作为一种强大的数据库查询语言，广泛应用于各种数据库管理系统中。在SQL查询中，EXISTS子句是一种非常实用的工具，用于检查子查询中是否存在至少一行数…...

编程日记 2025/7/14 13:04:28

＜项目代码＞YOLOv8 红绿灯识别＜目标检测＞

YOLOv8是一种单阶段（one-stage）检测算法，它将目标检测问题转化为一个回归问题，能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法（如Faster R-CNN），YOLOv8具有更高的…...

编程日记 2025/7/12 13:37:33

Linux笔记---进程：进程状态

1. Linux中的进程状态上图是操作系统学科中，对进程状态的分类。但是这样细致的划分是在操作系统的设计层面上做的，其中的很多细节，用户其实不必关心。在Linux操作系统中，面向用户层面，对进程状态做了如下的划分&am…...

编程日记 2025/7/13 11:07:21

基于Qt实现的自定义树结构容器：设计与应用

在Qt框架中，尽管其提供了许多强大的容器类（如 QList, QMap, QTreeWidget 等），但缺少一个通用的、灵活的树结构容器，直接支持多层级数据管理。为了满足这些需求，本文设计并实现了一个可复用的自定义树结构容…...

编程日记 2025/7/13 14:27:05

Minio 客户端 mc

1、文档参阅： 1.1、服务别名设置： https://min.io/docs/minio/linux/reference/minio-mc/mc-alias-set.html 1.2、cp 命令 https://min.io/docs/minio/linux/reference/minio-mc/mc-cp.html 2、mc 命令安装 1、wget https://dl.minio.org.cn/cl…...

编程日记 2025/7/11 14:10:22

python控制鼠标，键盘，adb

python控制鼠标，键盘，adb 听说某系因为奖学金互相举报，好像拿不到要命一样。不禁想到几天前老墨偷走丁胖子的狗，被丁胖子逮到。他面对警察的问询面不改色坚持自我，反而是怒气冲冲的丁胖子被警察认为是偷狗贼。我觉得这…...

编程日记 2025/7/10 12:52:49

使用 Python 剪辑视频的播放速度

要使用 Python 调整视频的播放速度，可以利用 moviepy 库中的 fx（特效）模块来实现这一功能。通过 moviepy.editor 中的 VideoFileClip 类和 fx.speedx 函数，可以轻松地调整视频的播放速度。安装 moviepy 首先，确保已…...

编程日记 2025/7/15 11:42:31

Scrapy图解工作流程-cnblog

1.1 介绍部分： 文字提到常用的Web框架有Django和Flask，接下来将学习一个全球范围内流行的爬虫框架Scrapy。 1.2 内容部分： Scrapy的概念、作用和工作流程 Scrapy的入门使用 Scrapy构造并发送请求 Scrapy模拟登陆 Scrapy管道的使用 Scrapy中…...

编程日记 2025/7/13 21:15:23

mongodb

MongoDB增加身份验证 - jason47 - 博客园 db.collection.find() - MongoDB 手册 v6.0 1. 登录 rootJTVMbushu104:~# mongosh # 无账号登录 test> use admin # 切换数据库,先切换到有权限数据库再登录授权 switched to db admin admin> db.auth(username,pas…...

编程日记 2025/7/9 23:52:10

海量数据处理面试题

目录一.位图应用二.布隆过滤器三.哈希切割一.位图应用 1. 给定100亿个整数，设计算法找到只出现一次的整数？ 对于这道题100亿个整数大概占用40G,1G2^30byte,所以直接保存是不合适的,可以使用两个位图来处理,用00表示出现0次的,01表示出现一次的,10…...

编程日记 2025/7/9 18:14:13

RNN模型文本预处理--数据增强方法

数据增强方法数据增强是自然语言处理（NLP）中常用的一种技术，通过生成新的训练样本来扩充数据集，从而提高模型的泛化能力和性能。回译数据增强法是一种常见的数据增强方法，特别适用于文本数据。回译数据增强法定义…...

编程日记 2025/7/14 6:47:29

git-显示顺序与提交顺序不一致的问题

问题流程 a分支初始记录：分支的提交记录是 c1 -> c2 -> c3第一次修改提交记录但并未push：a1（20:18）第二次修改提交记录：a2（20:20） b分支初始记录： c1 -> c2 -> c3 …...

编程日记 2025/7/15 11:28:02

【软件入门】Git快速入门

Git快速入门文章目录 Git快速入门0.前言1.安装和配置2.新建版本库2.1.本地创建2.2.云端下载 3.版本管理3.1.添加和提交文件3.2.回退版本3.2.1.soft模式3.2.2.mixed模式3.2.3.hard模式3.2.4.使用场景 3.3.查看版本差异3.4.忽略文件 4.云端配置4.1.Github4.1.1.SSH配置4.1.2.关联…...

编程日记 2025/7/15 13:43:39

基于Springboot的流浪宠物管理系统

基于javaweb的流浪宠物管理系统介绍基于javaweb的流浪宠物管理系统的设计与实现，后端框架使用Springbootmybatis，前端框架使用Vuehrml，数据库使用mysql，使用B/S架构实现前台用户系统和后台管理员系统，和不同权限级别…...

编程日记 2025/7/13 21:20:50

【踩坑日记】【教程】如何在ubuntu服务器上配置公钥登录以及bug解决

前言在日常开发和运维中，为了提高服务器登录的安全性，我们通常会选择使用 SSH 密钥认证来替代传统的密码登录。然而，在配置 SSH 公钥登录的过程中，可能会遇到各种坑和 Bug。本文将从零开始，手把手教你如何在 Ubuntu…...

编程日记 2025/7/14 5:03:06

使用 VLC 在本地搭建流媒体服务器（详细版）

提示：详细流程避坑指南 Hi~！欢迎来到碧波空间，平时喜欢用博客记录学习的点滴，欢迎大家前来指正，欢迎欢迎~~ ✨✨ 主页：碧波 📚 📚 专栏：音视频目录借助VLC media pl…...

编程日记 2025/7/14 1:28:50

常用贴片元件封装尺寸

不论你在什么时候开始，重要的是开始之后就不要停止。一天过完，不会再来。每一次发奋努力的背后，必有加倍的赏赐。【SMD贴片元件的封装尺寸】公制：3216——2012——1608——1005——0603——0402 英制：1206——0805—…...

编程日记 2025/7/11 14:48:42

NVR录像机汇聚管理EasyNVR多个NVR同时管理基于B/S架构的技术特点与能力应用

EasyNVR视频融合平台基于云边端协同设计，能够轻松接入并管理海量的视频数据。该平台兼容性强、拓展灵活，提供了视频监控直播、录像存储、云存储服务、回放检索以及平台级联等一系列功能。B/S架构使得EasyNVR实现了视频监控的多元化兼容与高效管理。其采…...

编程日记 2025/6/27 20:46:27

【时间之外】IT人求职和创业应知【48】-通信技术

目录新闻一：腾讯科技取得数据显示相关专利新闻二：中国5G网络规模全球最大，6G技术取得突破新闻三：亚马逊启动“登月”计划，部署10万颗二代自研芯片连亚马逊这样的大厂也搞登月计划，可见现在的业界竞争…...

编程日记 2025/7/15 4:55:10

如何为 XFS 文件系统的 /dev/centos/root 增加 800G 空间

如何为 XFS 文件系统的 /dev/centos/root 增加 800G 空间一、前言二、准备工作三、扩展逻辑卷1. 检查现有 LVM 配置2. 扩展物理卷3. 扩展卷组4. 扩展逻辑卷四、调整文件系统大小1. 检查文件系统状态2. 扩展文件系统五、处理可能出现的问题1. 文件系统无法扩展2. 磁盘空间不足3…...

编程日记 2025/7/13 17:07:09

Linux命令操作基础

目录一、命令格式二、常见命令操作 2.1补齐命令与文件名 2.2历史命令 2.3联机帮助三、常用命令四、vim/vi文本编辑器 4.1命令模式 4.2输出模式 4.3底线命令模式一、命令格式 $ Command [-Options] Argument1 Argument2... 其中： $:默认存在的提示符&a…...

编程日记 2025/7/10 11:36:54

Shell脚本实践练习

声明学习视频来自 B 站UP主泷羽sec，如涉及侵权马上删除文章。笔记的只是方便各位师傅学习知识，以下网站只涉及学习内容，其他的都与本人无关，切莫逾越法律红线，否则后果自负。 ✍🏻作者简介：致…...

编程日记 2025/7/10 18:35:05

CentOS上如何离线批量自动化部署zabbix 7.0版本客户端

CentOS上如何离线批量自动化部署zabbix 7.0版本客户端管理的服务器大部分都是CentOS操作系统，版本主要是CentOS 7。因为监控服务器需要，要在前两天搭建的Zabbix 7.0系统上把这些CentOS 7系统都监控起来。因为服务器数量众多，而且有些服务器…...

编程日记 2025/7/10 5:34:30

DDR3与MIG IP核详解（一）

一、ddr3(全称第三代双倍速率同步动态随机存储器)： 1、特点：1：掉电无法保存数据，需要周期性的刷新。2:时钟上升沿和下降沿都会传输数据。 3：突发传输，突发长度 Burst Length一般为…...

编程日记 2025/7/13 21:25:17

转录组数据挖掘（生物技能树）（第11节）下游分析

转录组数据挖掘（生物技能树）（第11节） 文章目录 R语言复习转录组数据差异分析差异分析的输入数据操作过程示例一：示例二：示例三：此代码只适用于人的样本 R语言复习 #### 读取 ####dat read.deli…...

编程日记 2025/7/9 11:05:45

CTF-RE 从0到N:Chacha20逆向实战 2024 强网杯青少年专项赛 EnterGame WP (END)

只想解题的看最后就好了,前面是算法分析 Chacha20 c语言是如何利用逻辑运算符拆分变量和合并的通过百度网盘分享的文件：EnterGame_9acdc7c33f85832082adc6a4e... 链接：https://pan.baidu.com/s/182SRj2Xemo63PCoaLNUsRQ?pwd1111 提取码：1…...

编程日记 2025/7/14 21:24:37

Spring Boot 的 WebClient 实践教程

什么是 WebClient？ 在 Spring Boot 中，WebClient 是 Spring WebFlux 提供的一个非阻塞、响应式的 HTTP 客户端，用于与 RESTful 服务或其他 HTTP 服务交互。相比于传统的 RestTemplate，WebClient 更加现代化，具有异步和…...

编程日记 2025/7/14 18:00:46

STM32笔记（串口IAP升级）

一、IAP简介 IAP（In Application Programming）即在应用编程， IAP 是用户自己的程序在运行过程中对 User Flash 的部分区域进行烧写，目的是为了在产品发布后可以方便地通过预留的通信口对产品中的固件程序进行更新升级。通常实…...

编程日记 2025/7/14 18:53:22

Ollama - 简化使用本地大语言模型

学习完用 Transformers 和 llama.cpp 使用本地大语言模型后，再继续探索如何使用 Ollama 跑模型。Ollama 让运行和管理大语言模型变得更为简单，它构建在 llama.cpp 之上，并有优化，性能表现同样不俗。下面罗列一下它的特点从它的 …...

编程日记 2025/7/13 1:24:42

圆域函数的傅里叶变换和傅里叶逆变换

空域圆域函数的傅里叶变换空域圆域函数（也称为空间中的圆形区域函数）通常指的是在二维空间中，以原点为中心、半径为 a a a的圆内取值为1，圆外取值为0的函数。这种函数可以表示为： f ( x , y ) { 1 if x 2 y 2 ≤ …...

编程日记 2025/7/14 8:39:12

智能交易模型的全景探索：量化技术的进步与未来

随着金融市场日益复杂化，量化交易模型在投资领域扮演着愈加重要的角色。这些模型通过数据驱动和技术创新，赋能投资者在高度波动的市场中寻找确定性收益点。本文将从技术进步、模型构建、应用优势和未来发展四个方面，探讨量化交易模型的演变与…...

编程日记 2025/7/10 7:55:24

mysql学习

1、数据库的三范式是什么？ 2、特点 - 永久性：从本质上来说数据库中的数据以计算机文件的方式存储在磁盘上- 结构性：数据不是杂乱无章的存储- 大量：只受到磁盘空间的影响 3、 Myisam与innodb的区别 4、mysql架构开始编程语言进…...

编程日记 2025/7/14 21:55:11

小白新手村冒险之“烤”json串

JSON是什么？ JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript的一个子集，但是JSON是独立于语言的文本格式，许多编…...

编程日记 2025/7/8 21:05:37