一个vue项目如何运行在docker

将 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 化过程。

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

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

相关文章

李永平:以科技创新为引擎,驱动中国国际未来产业研究院不断前行

作者:李望 在科技创新与产业升级的滚滚洪流中,唯有洞察未来者,方能引领时代浪潮。近日,中国国际未来产业研究院迎来了重量级嘉宾——李永平院士。他的加盟,为研究院注入了全新的活力。作为业界的领军人物,李永平院士将担任研究院常务副院长、资深专家及高级法律顾问,共同规划未…

运维面试题.云计算面试题

一、选择题(每题1分,合计15分) 1.若当前目录为 /home,命令 ls–l 将显示 home 目录下的( )。 A.所有文件 B.所有隐含文件 C.所有非隐含文件 D.文件的具体信息 2.如果要列出一个目录下的所有文件需要使用命令行( )。 A. ls–l B. ls C. ls–a(all) D. ls–d 3.下面关于文件…

11.27作业

C语言关键概念 ├── static │ ├── 局部变量 │ │ └── 生命周期持续整个程序运行 │ └── 全局变量和函数 │ └── 仅在定义文件中可见 ├── extern │ └── 引入其他文件中的全局变量 ├── typedef │ ├── 类型重命名 │ │ ├─…

生产环境中,nginx 最多可以代理多少台服务器,这个应该考虑哪些参数 ?怎么计算呢

生产环境中,nginx 最多可以代理多少台服务器,这个应该考虑哪些参数 ?怎么计算呢 关键参数计算方法评估步骤总结 在生产环境中,Nginx最多可以代理的服务器数量并没有一个固定的限制,它取决于多个因素,包括Ng…

[DL]深度学习_扩散模型正弦时间编码

1 扩散模型时间步嵌入 1.1 时间步正弦编码 在扩散模型按时间步 t 进行加噪去噪过程时,需要包括反映噪声水平的时间步长 t 作为噪声预测器的额外输入。但是最初与图像配套的时间步 t 是数字,需要将代表时间步 t 的数字编码为向量嵌入。嵌入时间向量的宽…

Golang context 的作用和实现原理

context的作用 Go语言中的context包提供了一种在进程中跨API和跨进程边界传递取消信号、超时和其他请求范围的值的方式。context的主要作用包括: 取消信号(Cancellation): 当一个操作需要取消时,可以通过context传递…

【超全】目标检测模型分类对比与综述:单阶段、双阶段、有无锚点、DETR、旋转框

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…

Llmcad: Fast and scalable on-device large language model inference

题目:Llmcad: Fast and scalable on-device large language model inference 发表于2023.09 链接:https://arxiv.org/pdf/2309.04255 声称是第一篇speculative decoding边缘设备的论文(不一定是绝对的第一篇),不开源…

Edge浏览器保留数据,无损降级退回老版本+禁止更新教程(适用于Chrome)

3 个月前阿虚就已经写文章告警过大家,Chromium 内核的浏览器将在 127 以上版本开始限制仍在使用 Manifest V2 规范的扩展:https://mp.weixin.qq.com/s/v1gINxg5vMh86kdOOmqc6A 像是 IDM、油猴脚本管理器、uBblock 等扩展都会受到影响,后续将无…

人工智能零基础入门学习笔记

学习视频:人工智能零基础入门教程 文章目录 1.简介2.应用3.演进4.机器学习5.深度学习6.强化学习7.图像识别8.自然语言9.Python10.Python开发环境11.机器学习算法1.多元线性回归项自实战:糖尿病回归预测 2.逻辑回归3.Softmax回归项目实战:鸢尾…

Spring Boot 3 集成 Spring Security(3)数据管理

文章目录 准备工作新建项目引入MyBatis-Plus依赖创建表结构生成基础代码 逻辑实现application.yml配置SecurityConfig 配置自定义 UserDetailsService创建测试 启动测试 在前面的文章中我们介绍了 《Spring Boot 3 集成 Spring Security(1)认证》和 《…

Wireshark抓取HTTPS流量技巧

一、工具准备 首先安装wireshark工具,官方链接:Wireshark Go Deep 二、环境变量配置 TLS 加密的核心是会话密钥。这些密钥由客户端和服务器协商生成,用于对通信流量进行对称加密。如果能通过 SSL/TLS 日志文件(例如包含密钥的…

Redis(概念、IO模型、多路选择算法、安装和启停)

一、概念 关系型数据库是典型的行存储数据库,存在的问题是,按行存储的数据在物理层面占用的是连续存储空间,不适合海量数据存储。 Redis在生产中使用的最多的是用作数据缓存。 服务器先在缓存中查询数据,查到则返回,…

Cobalt Strike 4.8 用户指南-第十一节 C2扩展

11.1、概述 Beacon 的 HTTP 指标由 Malleable Command and Control (Malleable C2) 配置文件控制。Malleable C2 配置文件是一个简单的程序,它指定如何转换数据并将其存储在事务中。转换和存储数据的同一程序(向后解释&#xff0…

哪里能找到好用的动物视频素材 优质网站推荐

想让你的短视频增添些活泼生动的动物元素?无论是搞笑的宠物瞬间,还是野外猛兽的雄姿,这些素材都能让视频更具吸引力。今天就为大家推荐几个超实用的动物视频素材网站,不论你是短视频新手还是老手,都能在这些网站找到心…

力扣_876. 链表的中间结点

力扣_876. 链表的中间结点 给你单链表的头结点 head ,请你找出并返回链表的中间结点。 如果有两个中间结点,则返回第二个中间结点。 输入:head [1,2,3,4,5] 输出:[3,4,5] 解释:链表只有一个中间结点,值为…

HarmonyOS ArkTS 基于CommonDialog实现自定义AlertDialog

在鸿蒙系统(HarmonyOS)中,CommonDialog 是一个用于显示对话框的组件,类似于 Android 的 AlertDialog。如果你想在鸿蒙系统中使用 ArkTS 自定义一个 AlertDialog,你可以基于 CommonDialog 实现。 步骤 1:创…

c++ 主函数里的return 0写不写的区别是什么?

在 C 中,main 函数是程序的入口点。main 函数的标准定义如下: int main() {// ... 代码 ... } 或者可以带参数: int main(int argc, char* argv[]) {// ... 代码 ... } main 函数的返回类型是 int,这意味着它应该返回一个整数…

mysql之慢查询设置及日志分析

mysql之慢查询日志分析 1.临时开启慢查询日志2.永久开启慢查询日志 慢查询是指mysql提供的日志记录功能,用来记录执行时间超过设置阈值的sql语句,并将信息写入到日志文件中; 1.临时开启慢查询日志 注意: 1.以下命令需要连接进入到…

代码随想录算法训练营第五十九天|Day59 图论

Bellman_ford 算法精讲 https://www.programmercarl.com/kamacoder/0094.%E5%9F%8E%E5%B8%82%E9%97%B4%E8%B4%A7%E7%89%A9%E8%BF%90%E8%BE%93I.html 思路 #include <stdio.h> #include <stdlib.h> #include <limits.h>#define MAXM 10000 // 假设最大边数为1…