Vue.js - Vue 项目 dist 利用 Docker 一键部署方案

如果你想利用 Docker 和 Nginx 来部署你的 Vue.js 项目,但又不想通过创建 Docker 镜像的方式来做,你可以直接将你的 dist 目录挂载到 Nginx 容器中的相应目录,然后让 Nginx 服务这些静态文件。

具体步骤

1. 确保你的 Vue 项目已经构建完成

在你的本地开发环境中,运行 npm run build 命令来生成 dist 目录。这个目录包含了所有构建后的静态文件,通常是用于生产环境的文件。

2. 将 dist 目录上传到你的 Linux 服务器

使用 FTP、SCP 或其他文件传输方法将 dist 目录上传到你的 Linux 服务器上。你可以将这个目录放在任何你有权限访问的位置,例如 /var/www/vue-app

3. 启动 Nginx 容器并挂载 dist 目录

使用以下 Docker 命令来启动一个 Nginx 容器,并将你的 dist 目录挂载到容器内的 /usr/share/nginx/html 目录(Nginx 默认的静态文件根目录):

docker run -d --name vue-nginx-server -p 8080:80 -v /var/www/vue-app/dist:/usr/share/nginx/html nginx

这里的参数解释如下:

  • -d: 后台运行容器。
  • --name vue-nginx-server: 给容器命名为 vue-nginx-server
  • -p 8080:80: 将容器的 80 端口映射到宿主机的 8080 端口。
  • -v /var/www/vue-app/dist:/usr/share/nginx/html: 将宿主机的 /var/www/vue-app/dist 目录挂载到容器的 /usr/share/nginx/html 目录。
  • nginx: 使用官方的 Nginx Docker 镜像。

4. 验证部署

打开你的浏览器,访问 http://<your-server-ip>:8080,你应该能够看到你的 Vue 应用已经成功部署。

5. (可选) 自定义 Nginx 配置

如果你需要自定义 Nginx 的配置(例如,修改日志路径、添加 SSL 支持等),你可以创建自己的 Nginx 配置文件,并将其挂载到容器中:

docker run -d --name vue-nginx-server -p 8080:80 -v /var/www/vue-app/dist:/usr/share/nginx/html -v /path/to/your/nginx.conf:/etc/nginx/nginx.conf nginx

在这里,-v /path/to/your/nginx.conf:/etc/nginx/nginx.conf 会将你的自定义 Nginx 配置文件挂载到容器的 Nginx 配置目录。

通过以上步骤,你可以利用 Docker 和 Nginx 来部署你的 Vue.js 应用,而无需创建自定义的 Docker 镜像。这种方式非常适合快速部署和测试新的前端构建。

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

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

相关文章

MySQL8.0_常用SQL语句 + 常用命令

文章目录 常用命令连接数据库修改用户名和密码刷新权限查看服务端口号查看特定用户的host更改定用户的host清屏查看已存在的数据库导入导出数据 SQL语句数据库相关表相关数据的基本增删改查条件查询查询后排序聚合函数去重合并分组查询子查询表的连接索引相关视图相关 常用命令…

基于springboot的船舶维保管理系统

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…

Kibana操作Elasticsearch教程

文章目录 简介ES文档操作创建索引查看索引创建映射字段查看映射关系字段属性详解typeindexstore 字段映射设置流程 新增数据新增会随机生成id新增自定义id智能判断 修改数据删除数据查询基本查询查询所有&#xff08;match_all&#xff09;匹配查询多字段查询词条匹配多词条精确…

可望而不可即的“人文关怀”

死亡既然是最后的归宿&#xff0c;生命的必然&#xff0c;自然也就没有必要过多地害怕了。一切顺其自然&#xff0c;交给“命运”就是了。 我参观过英国的临终关怀医院&#xff0c;这是世界上最早的一所临终关怀医院&#xff0c;已有100多年历史。 那里的大多数病人都只剩一个…

五、常见古典加解密

下面内容源自&#xff0c;刷到的CTF题目 推荐的工具&#xff1a;https://github.com/Leon406/ToolsFx 推荐的在线网站&#xff1a;https://ctf.bugku.com/tools 一、古典加密 1.凯撒位移密码(caeser) 解释&#xff1a;典型的位移密码&#xff0c;可能位移1位也可能是n位 例…

沃通国密SSL根证书入根赢达信国密浏览器

近日&#xff0c;沃通CA国密SSL根证书正式入根赢达信国密安全浏览器&#xff0c;携手推动国产密码技术应用、完善国密应用生态体系&#xff0c;也标志着沃通国密SSL证书兼容性再次得到提升&#xff0c;进一步夯实国密应用根基。 密码算法的安全性是信息安全保障的核心&#xff…

深度学习与(复杂系统)事物的属性

深度学习与复杂系统中事物属性的关系体现在&#xff1a; 特征学习与表示: 深度学习通过多层神经网络结构&#xff0c;能够自动从原始输入数据中学习和提取出丰富的特征表示。每一层神经网络都可能对应着事物属性的不同抽象层次&#xff0c;底层可能对应简单直观的属性&#xff…

ethers.js:sign(签名)

Signers 在ethers中Signer是以太坊账户的抽象&#xff0c;可以用来签名消息和交易&#xff0c;如将签名的交易发送到以太坊网络以执行状态更改的操作。 npm install ethers5.4.0// 引入 import { ethers } from ethers签名 this.provider new ethers.providers.Web3Provider(…

数据库系统概论(超详解!!!) 第四节 关系数据库标准语言SQL(Ⅱ)

1.数据查询 SELECT [ ALL | DISTINCT] <目标列表达式>[&#xff0c;<目标列表达式>] … FROM <表名或视图名>[&#xff0c; <表名或视图名> ] … [ WHERE <条件表达式> ] [ GROUP BY <列名1> [ HAVING <条件表达式> ] ] [ ORDER BY…

设计模式——结构型——外观模式Facade

处理器类 public class Cpu {public void start() {System.out.println("处理器启动了...");} } 内存类 public class Memory {public void start() {System.out.println("内存启动了...");} } 硬盘类 public class Disk {public void start() {Syste…

主流公链 - Monero

Monero: 加密货币的隐私标杆 1. 简介 Monero&#xff08;XMR&#xff09;&#xff0c;世界语中货币的意思&#xff0c;是一种去中心化的加密货币&#xff0c;旨在提供隐私和匿名性。与比特币等公开区块链不同&#xff0c;Monero专注于隐私保护&#xff0c;使用户的交易记录和余…

前端理论总结(html5)——W3C与web标准/行内元素和块元素有哪些

W3C与web标准 W3C W3C 对 web 标准提出了规范化的要求 HTML&#xff1a; 1&#xff1a;标签字母要小写 2&#xff1a;标签要闭合 3&#xff1a;标签不允许随意嵌套 CSS/JS&#xff1a; 1&#xff1a;尽量使用外链 css 样式表和 js 脚本&#xff0c;结构、表现和行为分为三块&a…

系统分析师-软件开发模型总结

前言 软件工程模型也称软件开发模型。它是指软件开发全部过程、活动和任务的结构框架&#xff0c;通过该模型能清晰、直观地表达软件开发全过程&#xff0c;明确地规定要完成的主要活动和任务&#xff0c;它奠定了软件项目工作的基础 一、瀑布模型&#xff08;Waterfall Model…

罐头鱼AI传单系统说明完整版(一)|网页版视频矩阵获客系统

罐头鱼AI传单系统说明完整版&#xff08;一&#xff09; 一&#xff1a;概述 系统用于通过系统发布视频到抖音&#xff0c;通过AI加抖音关键词提供高播放量&#xff0c;可绑定多抖音号&#xff0c;管理素材&#xff0c;素材直接发布到抖音&#xff0c;Q:290615413定时发布&am…

stable diffusion如何下载预处理器?

如何下载预处理器&#xff1f; 具体位置:SD文件>extensions>sd-webui-controlnet>annotator” 把整个文件夹复制到SD的文件夹里面 里面有一个“downloads”文件夹 把这些模型复制到“downloads”文件夹里

【数据结构】顺序表习题之移除元素和合并两个有效数组

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《数据结构》 &#x1f389;道阻且长&#xff0c;行则将至 前言 嗨呀&#xff0c;今天的博客是关于顺序表的两道题目&#xff0c;是力扣的移除元素和合并有序数组的题目。 一.移除…

卷积神经网络层结构概述

一、卷积神经网络基本的层结构 &#xff08;一&#xff09;卷积层 1.可参考此文章&#xff1a;https://blog.csdn.net/tjlakewalker/article/details/83275322 2.实现代码: import torch.nn as nn conv nn.Conv2d(in_channels3, #输入通道out_channels64, #输出通道kerne…

缺省和重载.引用——初识c++

. 个人主页&#xff1a;晓风飞 专栏&#xff1a;数据结构|Linux|C语言 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 C输入&输出cout 和cin<<>> 缺省参数全缺省半缺省应用场景声明和定义分离的情况 函数重载1.参数的类型不同2.参数的个数不同3.参数的顺…

【AI】『Suno』哎呦不错呦,AI界的周董,快来创作你的歌曲吧!

前言 &#x1f34a;缘由 Suno AI的旋风终于还是吹到了音乐圈 &#x1f3c0;事情起因&#xff1a; 朋友说他练习时长两天半&#xff0c;用Suno发布了首张AI音乐专辑。震惊之余&#xff0c;第一反应是音乐圈门槛也这么低了&#xff0c;什么妖魔鬼怪都可以进军了嘛&#xff01;…

【详细讲解MNN介绍,安装和编译】

&#x1f308;个人主页:程序员不想敲代码啊&#x1f308; &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家&#x1f3c6; &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提…