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

Docker(Nginx)部署Vue

简介:目标使用docker将vue生成的dist文件,结合nginx生成镜像,然后运行;

1、首选确保vue项目正确运行,并能正确打包dist文件;
第一个是运行命令,第二个是打包命令
2、查看已经生成的dist文件
在这里插入图片描述
3、将dist文件打包为rar文件或者zip文件,本文使用rar文件
在这里插入图片描述
4、确保服务器已经安装docker;
新建文件夹:/home/questionaire-app/
将dist.rar 上传到该目录下,并解压到当前目录下;

unrar x dist.rar

5、在/home/questionaire-app/下新建nginx配置文件default.conf,新建Dockerfile文件;
1)编辑default.conf文件

server {listen       80;server_name  127.0.0.1;#charset koi8-r;#access_log  /var/log/nginx/log/host.access.log  main;location / {root   /usr/share/nginx/html;try_files $uri $uri/ /index.htmlindex  index.html index.htm;}location /prod-api/ {proxy_pass  http://127.0.0.1:18080/;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {#    proxy_pass   http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {#    root           html;#    fastcgi_pass   127.0.0.1:9000;#    fastcgi_index  index.php;#    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;#    include        fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#    deny  all;#}
}

代理可以根据需求配置,不强求
在这里插入图片描述

2)编辑Dockerfile文件:

# 使用nginx镜像
FROM nginx
# 作者
MAINTAINER cmh
# 删除nginx 默认配置
RUN rm /etc/nginx/conf.d/default.conf
# 添加我们自己的配置 default.conf 在下面
ADD default.conf /etc/nginx/conf.d/
# 把刚才生成dist文件夹下的文件copy到nginx下面去
COPY dist/  /usr/share/nginx/html/

最终该目录下是这样的:
在这里插入图片描述

6、生成镜像并运行

1)生成镜像
“ . ” 这个点不要省略

docker build -t mall-admin-vue .

在这里插入图片描述
2)运行容器

docker run -d --name mall-admin-vue -p 8088:80 mall-admin-vue

7、测试:
浏览器通过ip+端口访问
在这里插入图片描述
参考文档:https://blog.csdn.net/cmh1008611/article/details/144793141

相关文章:

Docker(Nginx)部署Vue

简介:目标使用docker将vue生成的dist文件,结合nginx生成镜像,然后运行; 1、首选确保vue项目正确运行,并能正确打包dist文件; 2、查看已经生成的dist文件 3、将dist文件打包为rar文件或者zip文件&#xf…...

ubuntu22.04的docker容器中安装ssh服务

ubuntu22.04的docker容器中安装ssh服务,以便外部可以连接到容器中操作。 rootnode15:~# cat /etc/issue Ubuntu 22.04.5 LTS \n \l rootnode15:~# docker ps|grep qwen 7d3c36c37d36 vllm/vllm-openai:v0.7.3 "python3 -m …...

卷积这个词在卷积神经网络中应该怎么理解

卷积的定义 数学概念: 在数学上,卷积是一种操作,通常用于两个函数之间的运算。对于图像处理而言,这些函数通常是输入图像和一个称为“卷积核”或“滤波器”的小矩阵。 在CNN中的应用: 卷积操作是通过滑动窗口&#xf…...

设计模式教程:迭代器模式(Iterator Pattern)

迭代器模式(Iterator Pattern)是设计模式中的一种行为型模式,它允许顺序访问一个集合对象中的元素,而无需暴露集合对象的内部结构。换句话说,迭代器模式提供了一个方法,能让你遍历集合中的元素,…...

C语言学习【1】C语言关于寄存器的封装

目录 1.封装寄存的C语言的语法volatile:unsigned int:*pGpiobOdrvolatile unsigned int * 2.进一步C语言的封装 在嵌入式中,底层一定是操作寄存器,我有一个理念,凡事一定要想清楚,把任何知识点融入自己的理解之中&…...

鸿蒙app 开发中的 == 和 === 的区别

在鸿蒙 App 开发中,如果你使用 JavaScript 或 TypeScript 进行编码, 和 是用于比较值的运算符,它们的主要区别在于比较的严格程度,下面为你详细介绍: 1. (宽松相等运算符) 比较规则&#xff1…...

【算法】冒泡排序

目录 一、算法概述 二、算法原理 1. 核心思想 2. 排序过程演示 三、标准实现代码 四、时间复杂度分析 五、优化策略 1. 提前终止优化 2. 记录最后交换位置 六、算法特性 七、实际应用 八、扩展思考 九、总结 一、算法概述 冒泡排序(Bubble Sort&#xff0…...

R Excel 文件:高效数据处理的利器

R Excel 文件:高效数据处理的利器 在数据分析领域,R语言因其强大的统计分析和可视化功能而备受推崇。而R Excel文件,作为R语言与Excel的桥梁,使得数据在R和Excel之间的高效转换成为可能。本文将详细介绍R Excel文件的概念、应用场景以及操作方法。 一、R Excel文件的概念…...

数据库(MySQL):使用命令从零开始在Navicat创建一个数据库及其数据表(一).创建基础表

一. 使用工具和命令 1.1 使用的工具 Navicat Premium 17 :“Navicat”是一套可创建多个连接的数据库管理工具。 MySQL版本8.0.39 。 1.2 使用的命令 Navicat中使用的命令 命令 命令解释 SHOW DATABASES; 展示所有的数据库 CREATE DATABASE 数据…...

电力通信物联网应用,国密网关守护电力数据安全

电力国密网关是用于保护电力调度数据网路由器和电力系统的局域网之间通信安全的电力专用网关机,主要为上下级控制系统之间的广域网通信提供认证与加密服务,实现数据传输的机密性、完整性。 国密算法网关功能特点 身份认证:对接入的设备和用户…...

vue:vite 代理服务器 proxy 配置

Vite 代理服务器(Proxy)的配置通常用于开发环境,以解决跨域请求等问题。以下是一个详细的配置步骤: 通过以上步骤,你就可以在 Vite 项目中配置代理服务器,以便在开发过程中方便地访问后端服务。 ‌找到 Vi…...

Java【网络原理】(2)初识网络续与网络编程

目录 1.前言 2.正文 2.1TCP协议与UDP协议 2.2socket API进行网络编程 2.2.1DatagramPacket类 2.2.1.1发送数据报 2.2.1.2接收数据报 2.2.1.3获取数据报内容 2.2.1.4设置数据报内容 2.2.2DatagramSocket类 2.2.2.1构造方法 2.2.2.2常用方法 2.2.3具体代码与解释 3…...

AI+集装箱号码识别技术,主要发展方向和应用潜力

集装箱号码识别技术作为物流数字化的重要工具,其应用前景随着全球供应链的智能化升级和绿色转型需求不断扩大。结合当前技术发展和行业实践,以下是其未来的主要发展方向和应用潜力: 1.物流与港口智能化管理 自动化识别与效率提升&#xff1…...

安装可视化jar包部署平台JarManage

一、下载 下载地址:JarManage 发行版 - Gitee.com 🚒 下载 最新发行版 下载zip的里面linux和windows版本都有 二、运行 上传到服务器,解压进入目录 🚚 执行java -jar jarmanage-depoly.jar 命令运行 java -jar jarmanage-dep…...

后端之JPA(EntityGraph+JsonView)

不同表之间的级联操作或者说关联查询是很多业务场景都会用到的。 对于这种需求最朴素的方法自然是手动写关联表,然后对被关联的表也是手动插入数据。但是手写容易最后写成一堆shit代码,而且修改起来也是非常麻烦的。 学会使用现成的工具还是非常有利的…...

Java数据结构第十三期:走进二叉树的奇妙世界(二)

专栏:数据结构(Java版) 个人主页:手握风云 目录 一、二叉树的遍历 1.1. 前序遍历 1.2. 中序遍历 1.3. 后序遍历 1.4. 完整代码 二、二叉树的基本操作 2.1. 获取树中结点个数 2.1. 获取叶子结点个数 2.3. 获取第k层结点的个数 2.4. 获取二叉树的…...

JavaScript系列(86)--现代构建工具详解

JavaScript 现代构建工具详解 🔨 现代前端开发离不开构建工具,它们帮助我们处理模块打包、代码转换、资源优化等任务。让我们深入了解主流的构建工具及其应用。 构建工具概述 🌟 💡 小知识:构建工具主要解决代码转换…...

docker容器网络配置及常用操作

Linux内核实现名称空间的创建 ip netns(网络名称空间)命令 可以借助ip netns命令来完成对 Network Namespace 的各种操作。ip netns命令来自于iproute安装包,一般系统会默认安装,如果没有的话,请自行安装。 注意&am…...

Docker 性能优化指南

Docker 提供了强大的容器化功能,能够帮助开发者在不同的环境中构建、测试和部署应用。然而,随着容器化应用的不断增长,Docker 容器可能会面临一些性能瓶颈,影响其运行效率、资源占用和扩展能力。为了确保容器在生产环境中的高效运…...

课程1. 深度学习简介

课程1. 深度学习简介 神经网络结构逻辑回归XOR问题(异或问题) 中间特征的生成全连接神经网络中间网络层的激活函数Sigmoid函数Tanh函数ReLU函数其它激活函数 使用全连接神经网络解决 XOR 问题神经网络用于回归问题训练神经网络 不同类型的神经网络 附加材…...

XCTF-web-easyupload

试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...