vue 项目创建docker镜像和启动

最新推荐文章于 2024-07-31 08:22:27 发布

chuancheng3824

最新推荐文章于 2024-07-31 08:22:27 发布

阅读量883

点赞数

文章标签： javascript 运维操作系统 ViewUI

原文链接：https://my.oschina.net/u/2328490/blog/3095683

版权

Linux 命令：

cd /opt/code
npm install -g @vue/cli
vue create vue-first
cd vue-first
npm run build

新建Dockerfile文件，内容如下：

FROM nginx
COPY dist /usr/share/nginx/html

Linux 命令：

docker build -t vue-first .
docker run -d --name vue-first -p 8081:80 vue-first

文件目录如下：

转载于:https://my.oschina.net/u/2328490/blog/3095683

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chuancheng3824

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Docker打包vue项目镜像（生产环境）

qq_37312180的博客

10-14

1121

通过xsell连接centos服务器，进入刚上传的文件夹，执行打包docker镜像的命令构建镜像。把vue项目打包后的dist文件夹拷贝到该文件夹目录下。在该文件夹目录下，在建一个Dockerfile文件。使用xftp把改文件夹上传至centos服务器。浏览器访问测试：http://IP:8089。生成(启动)一个容器。

Docker打包vue项目镜像（开发环境）

qq_37312180的博客

10-17

1629

docker run -d -p 3006:80 vue_npm_arcgis_image2 #启动（运行）容器。docker build . -t vue_npm_arcgis_image2 #打包成docker镜像。运行npm run docker打包docker镜像并启动（运行）容器。vue_npm_arcgis_image2 镜像名称。浏览器访问http://IP:Port测试。-t title设置镜像名称。

参与评论您还未登录，请先登录后发表或查看评论

docker+vue云服务器打包镜像相关操作

黄钢的博客

05-30

1377

容器化部署似乎成了当前一个非常主流的趋势，无论是前端还是后端，流行的操作就是给你一个镜像地址，让你自己去拉取镜像并运行镜像。这似乎是运维的工作，但是在没有专有运维的情况下，不得不自己先了解一下。docker相对来说还是比较麻烦的，需要对服务器有一定的了解，还要对Linux命令比较熟练，然而我对这两个都不熟悉，摸索了一段时间，记录一下自己打包docker镜像的完整过程。

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

最新发布

qq_42371932的博客

07-31

526

接着就可以在本地通过http://localhost:8080/访问前端服务。首先下载vue的依赖，并且打包在本地生成dist文件。另外准备一份nginx.conf文件（网上可搜）dockerfile文件：基本配置如下。然后运行docker命令。

VUE在Docker镜像中部署到根目录

weixin_45357522的博客

06-06

132

我们项目都是使用vue开发，部署到k8s，制作docker镜像时发现，想把VUE部署到镜像根目录。上面是网关的根路，下面是页面根。

vue项目打包到服务器，构建docker镜像

hey_lie的博客

07-25

2365

左上方为本地目录，进入dist，左下方显示dist中内容，右击static和index.html，进行上传。#将dist文件中的内容复制到/usr/share/nginx/html/这个目录下面。使用文件传输工具filezilla进行文件上传(注意是将dist整个目录进行上传)右上方为服务器目录，进入刚才创建的目录(mall_vue)，双击打开。最后一个mall_vue为镜像名称，也可以使用镜像ID。查看镜像，发现已经创建好mall_vue镜像。其中mall_vue为自定义镜像名，注意。...

手动构建前台vue项目的docker镜像

qingkong6178的博客

05-15

451

手动构建前台vue项目的docker镜像

Docker结合Jenkins部署vue项目

01-20

Docker结合Jenkins部署vue项目接上篇 Vue项目没什么好说的，在本地一般使用vue ui启动vue管理的前端，然后在里面进行启动 Vue官方说可以不通过ngin来部署，但是如果上生产环境，建议还是要走nginx 安装nginx 这里...

在Docker中使用Nginx部署Vue项目

什么都干的派森

04-18

5561

文章目录一、前置需求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

vue前端打包Docker镜像并nginx运行

xiaogg3678的专栏

01-03

1365

vue前端打包Docker镜像并nginx运行，cpoy目录到到容器中

docker 部署Vue项目

m0_67403013的博客

04-30

2103

第一步：vue项目打包成dist。 npm run build 第二步：构建Dockerfile # 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了 FROM nginx # 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面 COPY dist/ /usr/share/nginx/html/ 第三步：安装nginx docker pull nginx docker run --name nginx -d -p 4030:80 nginx 访问

Docker镜像+nginx 部署 vue 项目的方法

01-09

一、打包vue项目　　在开发完的vue项目输入如下命名，打包生成dist文件夹 yarn build / npm run build 　　此时根目录会多出一个文件夹：dist文件夹，里面就是我们要发布的东西。　　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。二、获取nginx 镜像　　nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。　　在终端输入： docker pull nginx 　　即可以获取到nginx镜像。　　Docker镜像是一个特殊的文件系统，除了提供容器运行时

使用Docker将vue前端项目构建成容器镜像并运行

雨云21的博客

07-08

1614

将项目构建成容器镜像，然后再使用Docker运行该容器镜像

docker vue项目打成镜像并推送到仓库

weixin_42903592的博客

12-18

475

【代码】docker vue项目打成镜像推送到仓库。

vue项目如何打包成docker镜像

weixin_35756892的博客

02-19

870

为了将 Vue 项目打包成 Docker 镜像，你需要使用 Dockerfile 来构建镜像，并确保该文件中包含所有必要的指令，以便正确安装和配置 Vue 应用程序。另外，你还需要确保已经构建了 Vue 项目，以便将其打包到 Docker 镜像中。 ...

vue打包docker镜像并推送阿里云简单步骤

CN_wangsanhua的博客

08-23

303

1、安装docker https://www.docker.com/products/docker-desktop/7、Docker login 与镜像仓库建立连接。2、设置setting 阿里云加速。3、编写dockerFIle。8、打包镜像docker。6、阿里云创建镜像仓库。4、项目下进入cmd。

如何命令行结束react程序_新手入门系列之React / Vue 应用持续集成Docker 化

weixin_39588679的博客

11-21

164

前言以前一直有疑问困扰着我：人人都在吹的Docker容器化，与前端有何关系？然而在近两年的编程生涯，在每一次产品迭代中，渐渐体会到了容器化其魅力所在。应用部署从刀耕火种，到DevOps崛起，原来不止前端在迅捷发展。接下来，我将用一首歌的时间，带大家真实的体验一番Docker容器化。1. 朴素的Dockerfile 首先准备一个有标准运行指令的Web应用，用脚手架creat-react-...

Vue项目如何打包成Docker镜像包

Confused_的博客

05-10

2831

参数指定要绑定的主机端口和容器端口。在这个例子中，将主机端口 8080 绑定到容器端口 80。中定义应用程序所需的环境，例如 Node.js 运行时和依赖项。在 Vue 项目根目录下创建一个名为。是你要为镜像取的名称。

安装jenkins的docker镜像，并一键部署vue项目

admin_jo的博客

03-22

1514

由于jenkins是基于java开发的软件，有些同学可能不想电脑里有多余的环境，所以只介绍docker镜像的安装方法，简单干净，如果有不会使用docker的小伙伴可以看一下我之前的帖子。

Docker部署Vue项目详解：从创建到实战

本文将详细指导如何使用Docker部署Vue项目，Docker作为一个轻量级的容器化平台，能提供持续集成、版本控制、可移植性和安全性等优点，尤其适用于前后端分离的开发场景。以下是实现步骤： 1. **准备工作**: - 确保...