使用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在服务器运行多个php版本
这篇文章主要介绍了利用docker在服务器运行多个版本php,本文以php7为例，通过实例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
Docker使用数据容器的具体示例
本文主要介绍了Docker使用数据容器的具体示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
docker 容器自定义 hosts 网络访问操作
这篇文章主要介绍了docker 容器自定义 hosts 网络访问操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2021-03-03
docker配置Runner容器的方法
今天通过本文给大家介绍docker配置Runner容器的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2021-11-11
远程docker服务器携带证书连接的实现方法
本文主要介绍了远程docker服务器携带证书连接的实现方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
如何利用Docker部署一个简单的springboot项目
这篇文章主要介绍了如何利用Docker部署一个简单的springboot项目,本文通过实例图文实例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
2024-02-02
docker-compose 配置spring环境的方法步骤
这篇文章主要介绍了docker-compose 配置spring环境的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
win7环境下Docker快速构建及阿里云容器加速配置详解
这篇文章主要介绍了win7环境下Docker快速构建及阿里云容器加速配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
Docker容器与宿主机相互访问更方便的方法
Docker是当今使用范围最广的开源容器技术之一,具有高效易用的优点,然而如果使用Docker时采取不当安全策略,则可能导致系统面临安全威胁,这篇文章主要给大家介绍了关于Docker容器与宿主机相互访问更方便的方法,需要的朋友可以参考下
2023-05-05
通过Dockerfile构建Docker镜像的方法步骤
这篇文章主要介绍了通过Dockerfile构建Docker镜像的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02