Docker 通过Nginx镜像部署Vue项目

最新推荐文章于 2024-08-23 16:43:03 发布
最新推荐文章于 2024-08-23 16:43:03 发布
阅读量2w 收藏 17
点赞数 6
分类专栏： vue-js 文章标签： docker nginx vue-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jason_jeson/article/details/78200623
版权
本文介绍了如何通过Docker部署Vue.js项目，详细步骤包括下载Nginx镜像，编写Dockerfile，打包并运行Docker容器。在成功部署后，可以通过访问http://localhost:9000查看运行结果。这是一个适合初学者的实践教程，欢迎大家指正。
摘要由CSDN通过智能技术生成
  1. 下载Nginx image
  2. 编写Dockerfile
  3. 部署运行

为了演示我这边新建一个项目

这里写图片描述

# cd vue-docker
# cnpm install //等待安装
# cnpm run build //build打包发布文件

这里写图片描述

可以看到这里dist文件夹中已经包含我们要发布的东西了

开始准备Docker发布

我这里使用hub163中的镜像

最低0.47元/天 解锁文章
程序狗儿
关注
专栏目录
在Docker中使用Nginx部署Vue项目
什么都干的派森
04-18 5547
文章目录一、前置需求1.liunx环境2.安装Docker二、部署方法1.打包Vue项目2.Docker拉取Nginx镜像3.创建一个打包镜像的目录4.上传Vue项目5.编写Nginx配置文件6.编写Dockerfile7.创建镜像8.启动容器三、访问测试 一、前置需求 1.liunx环境 本人用的 Centos7 2.安装Docker 参考这篇文章 https://blog.csdn.net/weixin_43721000/article/details/124237932 二、部署方法 1.打包Vu
docker 安装 nginx 发布Vue项目
热门推荐
Good Luck
08-02 1万+
docker 安装 nginx 发布Vue项目 nginx配置文件、html文件、logs日志文件。
如何快速部署vue项目
qq_43558959的博客
07-02 2622
如何快速部署自己的vue项目呢，读完这篇文章你应该可以获得自己想要的答案
docker部署vue项目
xiaoliu_alone的博客
02-11 1397
本篇文章主要帮助前端小白解决不会在服务器上部署前端打包的文件问题。以及如何nginx反向代理访问后端接口。主要使用docker+nginx的部署方式。其中也加入了websocket的代理方式，在nginx.conf文件中的路径代理上。
Jenkins利用docker部署vue项目
Button的博客
02-23 2254
jenkins利用docker部署vue项目
Docker搭建jenkins(Vue自动化部署)
前端阿皓
03-06 2199
需要提前准备的条件Docker环境Docker官网：https://hub.docker.com/u/library有2台服务器的情况下，将当前jenkins配置的服务器打包文件发送到另外一台服务器1、需要先设置远程服务器的host,账号,密码，点击系统管理->点击系统配置,找到Publish over SSH选项2、需要配置Name,Hostname,Username,Remote Directory，账号认证可以使用密码,key文件,key内容参数说明字段描述Passphrase。
Docker结合Jenkins部署vue项目
01-20
Docker结合Jenkins部署vue项目 接上篇 Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动 Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx 安装nginx 这里安装过程不再赘述，如果不清楚可以参考下面这篇文章 https://blog.csdn.net/qq_42815754/article/details/82980326 配置Jenkins 具体填Jenkins配置可以参考我的上一篇文章，这里需要安装一个额外的插件 dockerfile 在前端项目的根目录下添加dockerfile文件，内容如下： #
Docker+Nginx镜像部署 Vue 项目
soapy2010的博客
10-24 1078
@Docker + Nginx 镜像部署 Vue 项目 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助...
Docker镜像+nginx 部署 vue 项目的方法
01-09
一、打包vue项目 　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　此时根目录会多出一个...　即可以获取到nginx镜像。 　Docker镜像是一个特殊的文件系统，除了提供容器运行时
Jenkins+Vue+docker实现前端的CI/CD
weixin_43484014的博客
07-25 693
Jenkins+docker实现前端项目的CI/CD（持续集成与持续部署）
jenkins自动部署vue前端项目
08-15
jenkins自动打包vue前后端分离项目，部署到远程服务器
Jenkins+Docker实现部署你的Vue应用
老曹的博客
09-12 2349
什么是自动化 在没有工具的时代，有很多重复性的工作都是人手工完成的，比如在田地里收割果实、在流水线上加工等。而有了工具后，我们解放了双手，从而把精力放在更重要的事情上，让工具帮我们去完成那些重复性的工作，来提高效率，这就是我理解的自动化。在软件开发中更是如此，大家为了“变懒”，使自动化测试、自动化部署、自动化构建等类型的工具层出不穷。而这篇文章主要是记录一下我学习使用CI/CD工具jenkins来...
docker+jenkins构建vue项目
weixin_45337170的博客
04-18 1900
1、安装docker 我的是腾讯云主机 CentOS 8 1.1 使用命令安装 curl -sSL https://get.daocloud.io/docker | sh 参考菜鸟教程 1.2 启动docker和设置开机自启 # 启动 systemctl start docker #开机自启 systemctl enable docker 1.3 测试是否安装成功 docker version 2、安装Docker Compose 2.1 运行这个命令下载当前稳定版本 sudo curl -L
docker部署Jenkins自动化打包部署vue、java项目上线
最新发布
m0_73210955的博客
08-23 598
前后端部署完毕，小编踩了很多坑，有不懂的可以后台私信，我会的我就告诉你，至于为什么没有数据库，数据库一般都是提前部署好的，开发跟前端代码里就已经指定好数据库的IP等信息了，如果你是一个人，那你可以这样部署MySQL。location /api/ {###这里的/api/指的是前端只要有xxxx.api的时候匹配到/api/就转发到后端。/你创建Jenkins时候映射的目录/jenkins_home/workspace/你刚才起的项目名称/build/libs/gitlab是代码仓库。
基于Docker安装的Jenkins 部署 Vue项目案例教程
weixin_52359996的博客
06-24 524
Jenkins 前端 Vue 项目 部署
安装jenkins的docker镜像，并一键部署vue项目
admin_jo的博客
03-22 1508
由于jenkins是基于java开发的软件，有些同学可能不想电脑里有多余的环境，所以只介绍docker镜像的安装方法，简单干净，如果有不会使用docker的小伙伴可以看一下我之前的帖子。
jenkins docker 自动部署 构建_jenkins+docker+vue项目的自动部署环境
weixin_39883079的博客
12-03 747
亮点采用shell自定义脚本，控制集成部署环境更加方便灵活如果服务器更换，重新部署的工作量会比较小准备工作首先我们得有一台服务器。我这里用的是阿里云ECS，华东节点。具体的购买操作的话百度会有教程。购买完成以后你会有一个公网的ip，以及一个通过ssh登录服务器的密码。关于Docker的话，如果不了解的可以先去看文档。Docker的Container(容器)就像轮船上的集装箱。集装箱各自装着各自的货...
如何用docker运行Nginx
weixin_67526098的博客
08-09 215
【代码】如何用docker运行Nginx。
docker部署nginx部署访问vue项目
04-21
当使用Docker部署Nginx来访问Vue项目时，可以按照以下步骤进行操作： 1. 首先，确保已经安装了Docker和Docker Compose。这两个工具可以帮助我们管理和运行容器。 2. 创建一个新的文件夹，用于存放相关的配置文件和...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值