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

【Docker】docker镜像+nginx部署vue项目:

文章目录

            • 一、文档:
            • 二、打包vue项目:
            • 三、配置nginx:
            • 四、配置Dockerfile:
            • 五、构建镜像:
            • 六、运行容器:
            • 七、最终效果:


一、文档:

【1】菜鸟教程:https://www.runoob.com/docker/docker-tutorial.html

【2】Docker部署Vue项目的项目实践:https://www.jb51.net/server/292938nb9.htm

【3】Docker部署vue项目:https://www.cnblogs.com/newcapecjmc/p/16443866.html

二、打包vue项目:
yarn build

在这里插入图片描述

三、配置nginx:
docker pull nginx  #终端=》拉取nginx镜像
server {listen       80;server_name  localhost;#charset koi8-r;access_log  /var/log/nginx/host.access.log  main;error_log  /var/log/nginx/error.log  error;# location / {#     root   /usr/share/nginx/html;#     index  index.html index.htm;#     #  注意⚠:如果vue-router使用的是history模式,try_files $uri $uri/ /index.html;  非常重要!!!#     # 如果使用了hash模式,可以省略这个#     try_files $uri $uri/ /index.html;# }location /keda {#注意:此时路径需要加上/kedaalias  /usr/share/nginx/html/kedav2/;index  index.html index.htm;#解决404错误try_files $uri $uri/ /keda/index.html;}#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   /usr/share/nginx/html;}
}
四、配置Dockerfile:
# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER SunPeng <3246756017@qq.com>
#指定环境变量
ENV LANG en_US.UTF-8
#将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面(注意这个目录别乱写)
COPY /dist /usr/share/nginx/html/kedav2
#用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY /nginx/default.conf /etc/nginx/conf.d/default.conf
#暴露80端口,供容器外部连接使用
EXPOSE 80
ENTRYPOINT nginx -g "daemon off;" 
五、构建镜像:
docker build -t 镜像名称xxx .  #注意 . 不能缺
#如
docker build -t kdv2 .   #终端=》构建镜像

在这里插入图片描述

六、运行容器:
docker run --name  容器名称(每次运行容器不同名称)xxx -d -p 9020:80 镜像名称xxx(上一步生成镜像的名称)
#如
docker run --name  keda -d -p 9002:80  kdv2   #终端=》运行容器
或者

在这里插入图片描述

七、最终效果:

打开前端项目:localhost:9002/keda
在这里插入图片描述

相关文章:

【Docker】docker镜像+nginx部署vue项目:

文章目录 一、文档&#xff1a;二、打包vue项目&#xff1a;三、配置nginx&#xff1a;四、配置Dockerfile&#xff1a;五、构建镜像&#xff1a;六、运行容器&#xff1a;七、最终效果&#xff1a; 一、文档&#xff1a; 【1】菜鸟教程&#xff1a;https://www.runoob.com/do…...

文件编辑(vi/vim)

在所有的命令执行前&#xff0c;先按Esc 1、vi的基本概念   基本上vi可以分为三种状态&#xff0c;分别是命令模式&#xff08;command mode&#xff09;、插入模式&#xff08;Insert mode&#xff09;和底行模式&#xff08;last line mode&#xff09;&#xff0c;各模式…...

1007 Maximum Subsequence Sum (PAT甲级)

惭愧&#xff0c;知道该用DP做&#xff0c;但是又翻了参考书才想起来。dp[i]表示以i项为结尾的最大子列。 #include <cstdio> #include <vector>int K, maxx, u, pu, pv; std::vector<int> vec, dp;int main(){scanf("%d", &K);vec.resize(K)…...

虚拟机centos7配置网络

虚拟机centos7配置网络 centos7克隆之后需要配置网络才能联网。 实验环境&#xff1a; VMware Workstation Pro 16CentOS 7系统虚拟机主机Windows 11系统 1.VMware网络模式设置为NAT模式 虚拟机–设置–网络适配器– ​​ ‍ 2.查看虚拟机 子网IP和网关IP 编辑–虚拟网…...

ChatGPT实战:创业咨询,少走弯路,少踩坑

用九死一生形容创业再适合不过&#xff0c;不过一旦成功回报也很诱人&#xff0c;这也是为什么那么多人下场创业。纸上得来终觉浅&#xff0c;绝知此事要躬行&#xff0c;创过业的人都知道其中的心酸&#xff0c;而他们也建议你去创业&#xff0c;因为那真不是一般人能干的事。…...

LangChain手记 Overview

整理并翻译自DeepLearning.AILangChain的官方课程&#xff1a;Overview 综述&#xff08;Overview&#xff09; LangChain是为大模型应用开发设计的开源框架 LangChain目前提供Python和JavaScript&#xff08;TypeScript&#xff09;两种语言的包 LangChain的主攻方向是聚合和…...

Vue_02:详细语法以及代码示例 + 知识点练习 + 综合案例(第二期)

2023年8月4日15:25:01 Vue_02_note 在Vue中&#xff0c;非相应式数据&#xff0c;直接往实例上面挂载就可以了。 01_Vue 指令修饰符 什么是指令修饰符呢&#xff1f; 答&#xff1a; 通过 " . " 指明一些指令后缀&#xff0c;不同 后缀 封装了不同的处理操作 —…...

[腾讯云 Cloud studio 实战训练营] 制作Scrapy Demo爬取起点网月票榜小说数据

首语 最近接触到了一个关于云开发的IDE&#xff0c;什么意思呢&#xff1f; 就是我们通常开发不是在电脑上吗&#xff0c;既要下载编译器&#xff0c;还要下载合适的编辑器&#xff0c;有的时候甚至还需要配置开发环境&#xff0c;有些繁琐。而这个云开发的IDE就是只需要一台…...

使用paddle进行酒店评论的情感分类5——batch准备

把原始语料中的每个句子通过截断和填充&#xff0c;转换成一个固定长度的句子&#xff0c;并将所有数据整理成mini-batch&#xff0c;用于训练模型&#xff0c;下面代码参照paddle官方 # 库文件导入 # encodingutf8 import re import random import requests import numpy as n…...

04-1_Qt 5.9 C++开发指南_常用界面设计组件_字符串QString

本章主要介绍Qt中的常用界面设计组件&#xff0c;因为更多的是涉及如何使用&#xff0c;因此会强调使用&#xff0c;也就是更多针对实例&#xff0c;而对于一些细节问题&#xff0c;需要参考《Qt5.9 c开发指南》进行学习。 文章目录 1. 字符串与普通转换、进制转换1.1 可视化U…...

Centos 从0搭建grafana和Prometheus 服务以及问题解决

下载 虚拟机下载 https://customerconnect.vmware.com/en/downloads/info/slug/desktop_end_user_computing/vmware_workstation_player/17_0 cenos 镜像下载 https://www.centos.org/download/ grafana 服务下载 https://grafana.com/grafana/download/7.4.0?platformlinux …...

【代码解读】RRNet: A Hybrid Detector for Object Detection in Drone-captured Images

文章目录 1. train.py2. DistributedWrapper类2.1 init函数2.2 train函数2.3 dist_training_process函数 3. RRNetOperator类3.1 init函数3.1.1 make_dataloader函数 3.2 training_process函数3.2.1 criterion函数 4. RRNet类&#xff08;网络模型类&#xff09;4.1 init函数4.…...

python人工智能可以干什么,python人工智能能干什么

大家好&#xff0c;给大家分享一下python做人工智能需要什么水平&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 人工智能包含常用机器学习和深度学习两个很重要的模块&#xff0c;而python拥有matplotlib、Numpy、sklearn、keras等大量的…...

K8s工作原理

K8s title: Kubernetes之初探 subtitle: K8s的工作原理 date: 2018-09-18 18:26:37K8s概述 我清晰地记得曾经读到过的一篇博文&#xff0c;上面是这样写的&#xff0c; “云端教父AWS云端架构策略副总裁Adrian Cockcroft曾指出&#xff0c;两者虽然都是运用容器技术&#xff0…...

go错误集(持续更新)

1.提示以下报错 Build Error: go build -o c:\Users\Administrator\Desktop__debug_bin2343731882.exe -gcflags all-N -l . go: go.mod file not found in current directory or any parent directory; see ‘go help modules’ (exit status 1) 解决办法&#xff1a; go …...

【Docker】Docker中network的概要、常用命令、网络模式以及底层ip和容器映射变化的详细讲解

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…...

arcgis栅格数据之最佳路径分析

1、打开arcmap&#xff0c;加载数据&#xff0c;需要对影像进行监督分类&#xff0c;如下&#xff1a; 这里任选一种监督分类的方法&#xff08;最大似然法&#xff09;&#xff0c;如下&#xff1a; 这里会先生成一个.ecd文件&#xff0c;然后再利用.ecd文件对影像进行分类。如…...

docker服务器部署Django

Django是一个广泛使用的Python Web框架&#xff0c;而Docker是一个增强应用程序部署的流行容器平台。结合这两个技术&#xff0c;可以轻松地部署和维护Django应用程序。在本文中&#xff0c;我们将探讨如何使用Docker在服务器上部署Django应用程序。 1、安装Docker和Docker Co…...

SpringBoot集成百度人脸识别实现登陆注册功能Demo(二)

前言 上一篇SpringBoot集成百度人脸demo中我使用的是调用本机摄像头完成人脸注册&#xff0c;本次demo根据业务需求的不同我采用文件上传的方式实现人脸注册。 效果演示 首页 注册 后端响应数据&#xff1a; 登录 后端响应数据&#xff1a; 项目结构 后端代码实现 1、Bai…...

FPGA纯verilog实现 LZMA 数据压缩,提供工程源码和技术支持

目录 1、前言2、我这儿已有的FPGA压缩算法方案3、FPGA LZMA数据压缩功能和性能4、FPGA LZMA 数据压缩设计方案输入输出接口描述数据处理流程LZ检索器数据同步LZMA 压缩器 为输出LZMA压缩流添加文件头 5、vivado仿真6、福利&#xff1a;工程代码的获取 1、前言 说到FPGA的应用&…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...

论文笔记:Large Language Models for Next Point-of-Interest Recommendation

SIGIR 2024 1 intro 传统的基于数值的POI推荐方法在处理上下文信息时存在两个主要限制 需要将异构的LBSN数据转换为数字&#xff0c;这可能导致上下文信息的固有含义丢失仅依赖于统计和人为设计来理解上下文信息&#xff0c;缺乏对上下文信息提供的语义概念的理解 ——>使用…...