使用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程序的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用Dockerfile构建docker镜像的方法，帮助大家更好的理解和学习使用docker，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了docker 清理缓存脚本解析，文章围绕主题展开详细的内容介绍，具有一定的参考价价值，需要的小伙伴可以参考一下2022-07-07
本篇文章主要介绍了Docker镜像保存为文件及从文件导入镜像的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
OpenResty可以用来构建高性能的Web应用和服务,本文主要介绍了Docker创建openresty容器的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-03-03
这篇文章主要介绍了docker run的--rm选项使用说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家详细介绍了Linux下Docker CE使用从包中安装的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
本文主要介绍了云centos开启docker远程服务链接，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Docker是一个非常有趣的项目,容器是独立运行的一个或一组应用，及他们的运行环境,容器是Docker中的一个重要的概念,这篇文章主要给大家介绍了关于docker该如何删除已停止的容器的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了如何使用Docker部署Go Web应用的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
Prometheus是一款开源的监控和告警工具,它可以收集系统的各种指标数据,如CPU使用率、内存使用量等,本文主要介绍了Docker部署Prometheus的实现示例,感兴趣的可以了解一下2024-08-08
最新评论