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

qingkong2358103969

已于 2023-05-15 17:43:58 修改

阅读量425

点赞数 1

文章标签： docker vue.js 容器

于 2023-05-15 17:42:47 首次发布

本文链接：https://blog.csdn.net/qingkong6178/article/details/130689294

版权

1.前台打包

npm run build

产物： dist文件夹

2.镜像构建 (linux docker)

dist文件夹和dockerfile文件
Dockerfile文件内容：

  FROM nginx:1.23.2
  ADD dist/ /usr/share/nginx/html

将两文件放到统一文件夹下

2.1Linux安装Docker完整教程

1、安装依赖包

yum install -y yum-utils device-mapper-persistent-data lvm2

2、设置阿里云镜像源

yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

3、安装 Docker-CE

yum install -y docker-ce

4、启动docker服务

service docker start

5、设置docker开机自启动

systemctl enable docker

2.2构建镜像

进入到Dockerfile所在目录下

  cd /home/Dockerfile/

执行构建命令

//自定义镜像名称和版本号
  docker build -t frontend:1 .

构建镜像出现的错误

以下是解决办法

(1)创建文件

  vim /etc/docker/daemon.json

(2) 配置镜像源

Dockerfile文件中nginx的版本是1.22.0，后又升级1.23.2

3、部署镜像到生成环境

3.1下载镜像

    docker save -o frontend.tar frontend:1

3.2 tar拷贝到生成环境导入

    docker load -i frontend.tar

如果测试查看docker运行\\ 执行命令：

docker run -d -p 8085:80 -p 8086:3306 -e ADMINER_USER="root" -e ADMINER_PASSWD="password" -e BIND_ADDRESS="false"  --name front front:0.10

启动完成后，使用IP+端口访问

3.4 查看启动日志，可以看到启动成功

docker logs -f front

优惠劵

qingkong2358103969

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
手动构建前台vue项目的docker镜像

手动构建前台vue项目的docker镜像
复制链接

扫一扫

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

qq_37312180的博客

10-17

1414

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设置镜像名称。

Vue+NodeJS前后端分离项目Docker部署1

08-04

1. 整体架构图 2. 环境描述 3. 部署效果 1. 源码获取 4. 创建相关目录与文件 5. 创建docker网络用于容器互联 1. 创建并启动容器 2.

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

前端Vue3项目如何打包成Docker镜像运行

舒一笑的博客

03-01

2105

以上步骤展示了如何将一个Vue3项目打包成Docker镜像并运行。这只是一个基本的流程，根据你的具体需求，可能还需要对Dockerfile进行相应的调整。

将前端vue项目打包，并生成docker镜像文件，并运行

weixin_42630616的博客

05-27

2235

最近做时速云项目部署，需要将前端项目打成镜像文件，但是又不想装linux，所以找了半天，打包好了，特此记录

淘宝镜像到期安装vue时，修改npm镜像源不生效问题

一个平平无奇的搬砖人

03-12

930

原NPM淘宝域名证书过期提醒：npm.taobao.org和registry.npm.taobao.org旧域名于2021年官方公告域名更换事件，已于2022年05月31日零时起停止服务，域名HTTPS证书于2024年1月22日正式到期，不可再用。若有前端工程仍使用旧域名镜像源，会导致编译失败或超时，影响功能迭代上线。为避免受到严重影响，请尽快将代码或流水线中配置的镜像源修改为以下任意源：x-repo(推荐)：http://x-repo.haier.net/repository/npm-public/；

尝试创建一个包含vue项目的docker镜像并进行文件修改与添加

shetty661的博客

09-28

936

首先，了解到创建docker镜像有两种常用的方法，分别是通过已有容器进行修改创建新的镜像并push，另一种是编写dockerFile使用dockerBuild直接将自己的系统与项目创建镜像。当然，dockerFile在后者是必须的，尽管有其他将本地文件添加到容器中的方式，使用dockerFile无疑能够更为方便，并且还能够完成对环境，插件的各种配置。同时，在本地也自动创建了一个文件目录src，这个src文件夹创建与终端打开的位置有关，内部包含了本项目的文件，修改其中内容可以对项目进行修改。

docker构建vue项目镜像并发布到dockerhub中使用

12-09

868

先将本地vue项目打包为一个镜像，不会的可以看文章：使用docker构建vue项目并成功运行在本地和线上_1024小神的博客-CSDN博客然后开始注册一个dockerhub账号并登陆：然后点击 create repositoryDocker Hub 开始填写仓库名称和描述：（此仓库类似代码仓库，可以存储多个不同版本的镜像，就像代码迭代一样，每打一个tag，就相当于一个版本，都会在这个仓库里面进行管理）然后回到本地，查看一下本地镜像：也可以先将容器变为镜像，或者直接tag一个已存在的镜像：为镜像打一个

前端将vue打包成镜像发布

CEVERY的博客

12-18

2595

文章目录一、总体预览二、打包配置2.1 default.conf2.2 Dockerfile2.3 打包提示：以下是本篇文章正文内容，下面案例可供参考一、总体预览二、打包配置 2.1 default.conf server { listen 80; server_name localhost; location / { root /usr/share/nginx/html/; index index.html index

手把手教你实现Docker 部署 vue 项目

09-29

主要介绍了手把手教你实现Docker 部署 vue 项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Docker结合Jenkins部署vue项目

01-20

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

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

01-09

　nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。　在终端输入： docker pull nginx 　即可以获取到nginx镜像。　Docker镜像是一个特殊的文件系统，除了...

docker-compose部署vue项目

03-14

docker-compose部署vue项目 docker-compose部署vue项目 docker-compose部署vue项目

【微服务部署】五、Jenkins+Docker一键打包部署NodeJS（Vue）项目的Docker镜像步骤详解

全栈程序猿的专栏

09-04

5492

维护者信息# 将生成的静态页面文件复制到nginx的/usr/share/nginx/html/目录# 容器启动时运行的命令"]

vue项目如何打包成docker镜像

weixin_35756892的博客

02-19

759

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

Windows docker vue打成镜像运行部署（前端）

CXY_BOY的博客

11-19

1258

docker 构建jvue包为镜像运行

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

雨云21的博客

07-08

1521

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

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

Confused_的博客

05-10

2617

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

怎么通过docker/portainer部署vue项目

沐雨橙风ιε的博客

10-03

1049

这篇文章分享一下如何通过docker将vue项目打包成镜像文件，并使用打包的镜像在docker/portainer上部署运行，写这篇文章参考了vue-cli和docker的官方文档。首先，阅读vue-cli关于docker部署的说明，上面提供了关键的几个步骤。从上面的页面内容中，得出了以下结论：前端项目需要依赖http服务器来部署，比如tomcat、apache、nginx等。

Docker基础篇之常用命令

最新发布

qq_43456605的博客

05-27

1066

启动docker：停止docker：重启docker：查看docker 的运行状态：开机启动：查看docker该要信息：查看docker 帮助文档查看docker命令帮助文档：同一个仓库源可以有多个Tag版本，代表这个仓库源的不同个版本，我们使用Repository:Tag来定义不同的镜像。它的options选项说明如下： docker search [options]：远程库中查找某个镜像的名称它的options选项说明如下： docker pull 某个xxx镜像名字：将

vue项目docker nginx部署

03-14

Vue项目的Docker+Nginx部署可以通过以下步骤完成： 1. 创建Dockerfile：在Vue项目的根目录下创建一个名为Dockerfile的文件，内容如下： ``` # 使用Node作为基础镜像 FROM node:14 as build-stage # 设置工作目录 WORKDIR /app # 复制package.json和package-lock.json到工作目录 COPY package*.json ./ # 安装依赖 RUN npm install # 复制所有文件到工作目录 COPY . . # 构建项目 RUN npm run build # 使用Nginx作为基础镜像 FROM nginx:1.21-alpine # 将构建好的项目复制到Nginx的默认静态文件目录 COPY --from=build-stage /app/dist /usr/share/nginx/html # 复制Nginx配置文件到容器中 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露80端口 EXPOSE 80 # 启动Nginx服务 CMD ["nginx", "-g", "daemon off;"] ``` 2. 创建Nginx配置文件：在Vue项目的根目录下创建一个名为nginx.conf的文件，内容如下： ``` server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } } ``` 3. 构建Docker镜像：在终端中进入Vue项目的根目录，执行以下命令构建Docker镜像： ``` docker build -t vue-app . ``` 其中，`vue-app`是镜像的名称，可以根据需要自行修改。 4. 运行Docker容器：执行以下命令运行Docker容器，并将容器的80端口映射到主机的指定端口（例如8888）： ``` docker run -d -p 8888:80 vue-app ``` 其中，`8888`是主机的端口号，可以根据需要自行修改。至此，Vue项目的Docker+Nginx部署就完成了。你可以通过访问`http://localhost:8888`来查看部署后的项目。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交