前端-如何通过docker打包Vue服务成镜像并在本地运行(本地可以通过http://localhost:8080/访问前端服务)

1、下载安装docker,最好在vs code里安装docker的插件。

下载链接:https://www.docker.com/products/docker-desktop

🎉 Docker 简介和安装 - Docker 快速入门 - 易文档 (easydoc.net)

2、准备配置文件-dockerfile文件和nginx.conf文件

dockerfile文件:基本配置如下

FROM registry.cn-beijing.aliyuncs.com/hiacloud/nginx:1.25.1
COPY dist/ /usr/share/nginx/html

另外准备一份nginx.conf文件(网上可搜)

3、命令行操作

首先下载vue的依赖,并且打包在本地生成dist文件

然后运行docker命令

//打包成镜像
docker build -t my-nginx-image .
//启动服务
docker run -d -p 8080:80 my-nginx-image

接着就可以在本地通过http://localhost:8080/访问前端服务。

注意点

没有nginx.conf,会导致前端路由跳转报错。

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

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

相关文章

postman查询单条数据Get方法,无任何输出,idea后端也没有任何数据和提示的解决方法

问题描述: 正常使用postman测试,输入内容没有错误,但是却没有任何消息 后端也是,没有任何消息: 解决方法: 问题的原因主要是因为postman: 我们只需要新建一个页面,把刚才的查询语…

《C语言程序设计 第4版》笔记和代码 第十二章 数据体和数据结构基础

12.1从基本数据类型到抽象数据类型 1 所有的程序设计语言都不能将所有复杂数据对象作为其基本数据类型,因此需要允许用户自定义数据类型,在C语言中,就存在构造数据类型(复合数据类型)。 2 结构体是构造数据类型的一种…

记录|如何统一管理多个同一个对象?

目录 前言一、对象就用对象数组管理更新时间 前言 自己的感想 一开始,自己没弄懂C# winform中的testBox是什么,导致创建多个testBox的时候要用很笨的方法来进行管理。 就是下面这种:用数组一个一个掉用里面的单独属性。 string[] str new …

芋道以开源之名行下作之事 恬不知耻 标榜自己开源 公开源码+sql 不用再加入知识星球

资源 链接: https://pan.baidu.com/s/1TeuxbAUfLQ5_BqMBF1kniQ?pwdcqud 提 取码: cqud 依次为后端、补充版的sql、前端 此文档内安装部署等一应俱全

反序列化靶机serial漏洞复现 超详细教程

环境搭建 漏洞环境:https://www.vulnhub.com/entry/serial-1,349/ 下载后使用Vmware打开 创建新的虚拟机: 选择客户机版本为Ubuntu 64位: 一直下一步,知道选择使用现有磁盘: 选择下载的vmdk磁盘文件: 开机…

24年电赛——自动行驶小车(H题)完赛感受

前言: 笔者大二,也算是第一次正式的打电赛省赛(大一电赛的时候还没接触32,校赛的时候就被刷下去了。。。)。经过一年的学习,三天两夜的校赛、两天一夜的七校联赛终于是挺到了省赛。比赛过程中真的是有太多感…

Git、Gitlab以及分支管理

分布式版本控制系统 一、Git概述 Git是一种分布式版本控制系统,用于跟踪和管理代码的变更。它由Linus torvalds创建的,最初被设计用于Linux内核的开发。Git 允许开发人员跟踪和管理代码的版本,并且可以在不同的开发人员之间进行协作。 Githu…

浏览器用户文件夹详解 - WebData(八)

1.WebData简介 1.1 什么是WebData文件? WebData文件是Chromium浏览器中用于存储用户表单数据、自动填充信息和支付信息的一个重要文件。每当用户在浏览器中填写表单或保存支付信息时,这些数据都会被记录在WebData文件中。通过这些记录,浏览…

【C语言】C语言期末突击/考研--指针(一篇就够)

目录 一、指针的本质(间接访问原理) 1.1.指针的定义 1.2.取地址操作符与取值操作符,指针本质 二、指针的传递使用场景 2.1.什么是指针的传递 2.2.指针的传递使用场景 三、指针的偏移使用场景 3.1.指针的偏移 3.2.指针与一维数组 四…

【多线程】阻塞队列

🏀🏀🏀来都来了,不妨点个关注! 🎧🎧🎧博客主页:欢迎各位大佬! 文章目录 1. 阻塞队列是什么2. 简单使用阻塞队列3. 阻塞队列的应用场景——生产者消费者模型3.1 生产者消…

bootStrap中操作行详情,删除,修改等操作

点击列表某一行的操作按钮,结合swtich case 出发不同操作

spring boot 实现 Stream 钉钉事件订阅

1: 参考链接 https://open.dingtalk.com/document/orgapp/develop-stream-mode-push-server 2:钉钉开放平台订阅配置 配置之后运行一下上面提供的链接 里面的main方法,验证通道 3:订阅启动方式 EventListenerThread eventListenerThrea…

nvm管理node版本问题处理集合

windows上通过nvm管理node版本,通过nvm安装node,报错了,信息: > Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt. Get > https://nodejs.org/dist/latest/SHASUMS256.txt: dial tcp 104.20.23.46:443: …

如何通过阿里云服务器部署hexo博客(超详细)

👏大家好!我是和风coding,希望我的文章能给你带来帮助! 🔥如果感觉博主的文章还不错的话,请👍三连支持👍一下博主哦 📝点击 我的主页 还可以看到和风的其他内容噢&#x…

软件测试20个基础面试题及答案

什么是软件测试? 答案:软件测试是指在预定的环境中运行程序,为了发现软件存在的错误、缺陷以及其他不符合要求的行为的过程。 软件测试的目的是什么? 答案:软件测试的主要目的是保证软件的质量,并尽可能…

【C++】类和对象两个必看题

这两个题只有一句代码的差别。 看题目之前我先说一下怎么看汇编指令。 第一题&#xff1a;下面程序运行结果是&#xff1f; A.编译报错 B.运行崩溃 C.正常运行 #include <iostream> using namespace std; class A { public:void Print(){cout << "A::Pri…

【数据结构初阶】二叉树与堆(一)

文章目录 一、树的基础概念1、节点与度数2、树的度与高度3、引入&#xff1a;数组下标为何从0开始4、祖先节点5、树是递归定义的6、树与非树的区别7、代码表示 二、二叉树2.1、满二叉树2.2、完全二叉树2.3、完全二叉树的存储 三、堆 一、树的基础概念 1、节点与度数 节点分为…

多语言海外AEON抢单可连单加额外单源码,java版多语言抢单系统

多语言海外AEON抢单可连单加额外单源码&#xff0c;java版多语言抢单系统。此套是全新开发的java版多语言抢单系统。 后端java&#xff0c;用的若依框架&#xff0c;这套代码前后端是编译后的&#xff0c;测试可以正常使用&#xff0c;语言繁体&#xff0c;英文&#xff0c;日…

Charles怎么修改参数

Charles怎么修改参数 1、再【Structure】下&#xff0c;找到需要抓取的包&#xff0c;鼠标右键&#xff0c;点中断点。 2、在【Proxy】-点击【Breakpoint Settings…】 3、双击设置断点的接口 4、勾选后&#xff0c;点击【OK】。 5、再次刷新&#xff0c;重新发请求&#…

Nginx解析漏洞

一、nginx_parsing 这个解析漏洞其实是PHP CGI的漏洞&#xff0c;在PHP的配置文件中有一个关键的选项cgi.fix_pathinfo默认是开启的&#xff0c;当URL中有不存在的文件&#xff0c;PHP就会向前递归解析。在一个文件/xx.jpg后面加上/php会将/xx.jpg/xx.php解析为php文件。 1、…