使用Docker容器部署Vue程序

更新时间：2022年03月26日 09:53:23 作者：.NET开发菜鸟

这篇文章介绍了使用Docker容器部署Vue程序的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、安装Nginx

我们部署Vue程序依赖Nginx，首先拉取Nginx的镜像，这里使用Nginx最新的镜像

docker pull nginx

如图所示

我们查看镜像

已经有了nginx镜像。

我们根据nginx镜像运行容器

docker run --name=nginx -d -p 4030:80 nginx

如图所示

然后在浏览器里面访问4030端口，验证容器是否运行正常

出现上面的截图，说明容器运行正常。

二、创建Vue程序

1、创建项目

我们使用下面的命令创建一个Vue程序，这里使用PowerShell创建

vue create docker-vue

创建过程省略，创建完成

使用VSCode打开项目，然后执行运行命令

npm run serve

如图所示

在浏览器里面访问

2、编译项目

项目创建完成以后，我们编译项目

npm run build

如图所示

编译完成之后，在项目的根目录下面就会生成一个dist文件夹，里面是编译后的项目

3、添加Dockerfile文件

我们要构建镜像，必须依靠Dockerfile文件，我们在项目的根目录下面创建一个Dockerfile文件，没有后缀名，文件内容如下

# 设置基础镜像，这里使用最新的nginx镜像，前面已经拉取过了
FROM nginx
# 定义作者 Edison
MAINTAINER Edison 
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

4、上传文件

我们在Linux里面的demo文件夹下面创建vue文件夹，然后把dist文件夹和Dockerfile文件上传到该目录下

5、构建镜像

文件上传以后，我们构建Vue程序的镜像

docker build -t dockervue .

如图所示

可以看到镜像构建成功了。

6、运行容器

我们根据上步构建的镜像去运行镜像

docker run --name=dockervue -d -p 9020:80 dockervue

如图所示

可以看到容器在运行，我们在浏览器里面访问9020端口

可以看到Vue程序使用Docker部署就成功了。

到此这篇关于使用Docker容器部署Vue程序的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

docker 容器数据在盘与盘之间迁移方法
这篇文章主要介绍了docker 容器数据在盘与盘之间迁移方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-04-04
使用Docker搭建minio的详细图文教程
本文介绍了Docker配置镜像源的方法,以及如何在Docker中拉取镜像和创建运行容器,详细说明了使用MinIO创建Bucket、设置AccessKey、安装和配置Cpolar以及SpringBoot集成MinIO的步骤,需要的朋友可以参考下
2024-10-10
深入理解docker的四种网络方式
本篇文章主要介绍了深入理解docker的四种网络方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
mysql8.4.0实现主从复制部署
主从复制是 MySQL 中一种用于实现数据冗余、提高可用性和性能的重要机制,本文主要介绍了mysql8.4.0实现主从复制部署,具有一定的参考价值,感兴趣的可以了解一下
2024-07-07
详解使用Dockerfile创建带Apache服务的CentOS Docker镜像
本篇文章主要介绍了使用Dockerfile创建带Apache服务的CentOS Docker镜像，具有一定的参考价值，有兴趣的可以了解一下。
2016-12-12
windows docker环境设置注意事项
这篇文章主要介绍了windows docker环境设置注意事项的相关资料,需要的朋友可以参考下
2017-01-01
docker部署微信小程序自动构建发布和更新的详细步骤
通过 Jenkins 和 Docker 部署微信小程序,并实现自动构建、发布和版本更新,主要涉及到几个步骤,下面给大家分享docker部署微信小程序自动构建发布和更新的详细步骤,感兴趣的朋友一起看看吧
2024-12-12
Docker Desktop安装本地Kubernetes集群的实现
Kubernetes用于协调高度可用的计算机集群,本文主要介绍了Docker Desktop安装本地Kubernetes集群的实现,具有一定的参考价值,感兴趣的可以了解一下
2024-02-02
一文教会你用Docker打包Python运行环境
Docker提供了容器级别的资源隔离,由于Python的外部依赖管理中存在的问题,我们通常会使用virtualenv来对不同的项目创建其唯一的依赖环境,下面这篇文章主要给大家介绍了如何通过一篇文章教会你用Docker打包Python运行环境的相关资料,需要的朋友可以参考下
2022-05-05
Docker搭建并启动Logstash的实现方式
这篇文章主要介绍了Docker搭建并启动Logstash的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-08-08