dockerfile部署前端vue打包的dist文件实战

最新推荐文章于 2024-04-23 10:06:02 发布
最新推荐文章于 2024-04-23 10:06:02 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： docker 文章标签： 前端 docker dockerfile 运维开发 持续部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44808225/article/details/132498415
版权

背景：一般前端开发后会将打包后的dist文件交由我们部署，部署的方式有很多，这里提供一种思路

在服务器的路径下新建一个目录，在目录中新建Dockerfile，编辑这个文件

FROM nginx

COPY ./dist  /home/front
COPY nginx.conf /etc/nginx/nginx.conf

执行(注意后面有一个空格和英文的句号)

docker build -t image_name:version .

运行镜像生成容器

docker run -id --name contain_name -p server_port:contain_port  --restart always image_name:version
Mall4j商城实战 - 部署 前后端 到 docker
yueerba126的博客
11-19 806
🌌。
Angular项目从新建、打包到nginx部署全过程记录
08-28
一直比较喜欢angular，正巧最近有个项目用到了，所以想和大家来分享下，下面这篇文章主要给大家介绍了关于Angular项目从新建、打包到nginx部署的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
Vue.js - Vue 项目 dist 利用 Docker 一键部署方案
陆氪和他的那些代码
03-28 976
Vue.js - Vue 项目 dist 利用 Docker 一键部署方案
docker部署vue项目包(nginx dist包)
qq_34843271的博客
06-09 522
docker nginx部署vue项目
Docker部署前端dist打包项目
weixin_67511648的博客
08-18 1403
【代码】Docker部署前端dist打包项目。
docker 部署
clks_的博客
11-14 232
linux环境安装docker docker 要求运行在centos 7以上，要求系统64位，系统内核版本3.10以上* uname -an//查看系统版本 yum -y install docker//下载安装docker service docker start// 启动docker服务 docker version// 检查docker是否安装成功 mkdir simpl...
Docker部署Nginx&&发布前端dist包
z_xiaoluan的博客
11-15 1861
docker部署nginx
使用各种姿势舒服的部署微前端项目（上：打包与上传）
qq_15390381的博客
02-24 1474
微前端作为解决巨石应用模块化和降低技术框架变动风险的神器，我觉得是当下前端发展的一大方向，可以在未来5-10年内保持生命力。 作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了一年多的时间，形成了、脚手架、工程结构设计、日常开发维护、性能优化、部署等一整套流程。 之前有两篇文章讲了qiankun的入门文章： qiankun微前端实战看这篇就够了 - Vue项目篇:这篇文章编写的较早，大致在19年12月份当时qiankun还在1.x版本，现在关于微应用注册及应用间通信的部分已经和现版本
Next.js 网站部署踩坑经历小记及前端站点部署技巧
小陈的博客
06-06 2673
在入职两个月后，我开始了第一个完全由我一个人负责开发的网站项目。这个网站的用途是用于 宣传一个开源社区峰会 以及 沉淀峰会视频内容 ，在峰会进行期间还需要在网站进行 直播 。从网站的开发到部署上线，可谓是踩坑无数，最终实现的网站在这里 apisix-summit.org/由于时间有限，整体网站的架构是基于 vercel 的一个网站脚手架 virtual-event-starter-kit 之上进行开发，因此并不需要从头构建项目。 这个脚手架使用的是 next.js 实现服务端渲染，其中已经预设了很多第三方平
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下： 1. 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置) 执行成功如下图所示： 然后此时你会发现项目下多了一个 dist 文件夹，dist下文件便是项目打包之后生成的文件。 此时我们直接在浏览器中打开index.html，是会报错的，什么都看不到。 2. 安装express-generator生成器 执行  $ npm install express-generator -g
使用各种姿势舒服的部署微前端项目
qq_15390381的博客
01-25 501
微前端作为解决巨石应用和降低技术框架变动风险的神器，我觉得是当下前端发展的一大方向，可以在未来5-10年内保持生命力。 作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了一年多的时间，期间也产出了两篇入门文章：qiankun微前端实战看这篇就够了 - Vue项目篇 和 vue3.0&qiankun2.0极速尝鲜，微前端进阶实战！，有兴趣或者刚接触微前端的同学可以去看下。 经过拆分之后，一个巨石应用变成了几个甚至几十个子应用，那么这么多应该该如何友好又舒服的部署呢，下面就来详细
手把手教你Docker+nginx部署Springboot+vue前后端分离项目
最新发布
2401_84093054的博客
04-23 715
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。6848)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
docker 部署vue dist文件 使用nginx
RanGe的博客
06-09 1439
Dockerfile 内容 FROM nginx:latest MAINTAINER front COPY dist/ /home/myhtml/front/ #拷贝dist文件到容器中 COPY nginx.conf /etc/nginx/nginx.conf #替换nginx中的配置文件使用自定义的配置 RUN echo 'echo init ok!!' nginx.cong内容 user nginx; worker_processes 1; error_log /var/log
docker简单部署
chenfl的博客
05-30 590
一、使用docker部署一个前端项目 1.创建一个工作的目录 mkdir /mywork 2.项目进行打包 npm run build 会生产一个dist文件夹，如下，将打包好的dist文件上传到/mywork目录下 3.准备nginx配置文件 为了方便管理，创建的配置文件也放置在/mywork目录下，nginx.conf.template文件内容如下 user nginx; #user nobody; worker_processes 1; #error_log logs/error.
docker使用nginx镜像部署的vue的dist问题
qq_34168515的博客
07-19 1608
文章目录一、前提1.1 结构二、运行nginx三、修改镜像中的 nginx.conf 一、前提 docker的基础可以自己查找资料 用最基本的nginx镜像 docker pull docker.io/nginx 1.1 结构 使用nginx进行动态代理dist文件，该案例使用的端口为9000，并且把dist挂载到宿主机子上 二、运行nginx docker run -itd -p 9000:9000 --privileged=true --name=cz-buy-chat -v /usr/share/c
如何使用docker快速部署vue前端项目dist包
weixin_42600128的博客
01-09 164
好的，使用 Docker 快速部署 Vue 前端项目的步骤如下： 在项目根目录中创建一个 Dockerfile 文件。Dockerfile 文件用于描述如何构建镜像。 在 Dockerfile 中使用以下命令来创建一个基于 Nginx 的镜像： FROM nginx:latest COPY dist /usr/share/nginx/html EXPOSE 80 ...
前端部署流程详解
m0_52973251的博客
08-10 1242
作用：用vue-cli内部集成的webpack，把 .vue, .less, .js 等打包成浏览器可直接执行的代码 html，css，js。这样的话你在服务器的这个路径上上传dist之后，你容器里面的 /etc/nginx/conf.d 这个路径下就会同时挂载上dist文件夹。2.复制配置文件(为什么以这种方式复制配置文件，详细看下面403问题博客，这个博主写的很清楚)结果：会在项目根目录下创建 /dist目录，在这个目录下产出打包后的结果。这个一般就是nginx的配置文件你写错了。
vue(dist) + docker + nginx + shell 一键部署方案
qq_29170455的博客
07-04 1594
vue（dist）+docker+nginx+shell 一键部署方案
vue打包dist文件 部署到服务器上样式移位vu
05-26
这样，打包后的文件中的样式和其他资源引用的路径就会是绝对路径，而不会受部署路径的影响。 2. 设置基础路径：在 index.html 中设置 base 标签的 href 属性为部署路径，例如： ```html <!DOCTYPE html> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值