目录

一、先说明下主要的步骤

二、具体详解

1.确保docker环境能够正常运行

2.确保vue项目能够正常运行

3.将vue项目编译

4.编写Dockerfile文件

5.使用docker build命令生成镜像

6.使用docker run命令生成容器

---

一、先说明下主要的步骤

1. 确保docker环境正常运行，不论是远程的还是本地的        
2. 确保vue项目能正常运行
3. 将vue项目编译
4. 编写Dockerfile文件
5. 使用docker build命令生成镜像
6. 使用docker run命令生成容器

二、具体详解

1.确保docker环境能够正常运行

linux安装docker环境：以CenterOS为例，参考CentOS Docker 安装 | 菜鸟教程

使用官方安装脚本自动安装

安装命令如下：

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

也可以使用国内 daocloud 一键安装命令：

curl -sSL https://get.daocloud.io/docker | sh

使用命令：docker，弹出如图所示即说明安装成功

windows安装docker环境：以windows10为例，参考Windows Docker 安装 | 菜鸟教程

本次介绍windows10的安装方式，windows7/8请利用 docker toolbox 来安装，国内可以使用阿里云的镜像来下载，下载地址：docker-toolbox-windows-docker-toolbox安装包下载_开源镜像站-阿里云

windows10安装docker环境

1.需要开启Hyper-V，方式如图所示，在程序和功能打开

或者通过命令来启用 Hyper-V ，请右键开始菜单并以管理员身份运行 CMD/PowerShell，执行以下命令：Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All 

2.下载和安装Docker桌面环境：Redirecting…

下载完后按安装引导安装即可，傻瓜式安装，不多做介绍

安装完，启动docker，然后在CMD/PowerShell输入docker，弹出如图所示即说明安装成功

打开桌面管理工具就是长这样

远程连接docker服务

上面步骤做完，就可以在本地使用docker了，如果想要使用远程docker环境，则要配置远程docker（本地需要有docker环境才使用docker命令）

配置远程CenterOS环境下的docker

vi /lib/systemd/system/docker.service

CenterOS7及以上的，修改ExecStart这行为下面的值

ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H unix://var/run/docker.sock

 CenterOS7以下的，修改ExecStart这行为下面的值

ExecStart=/usr/bin/dockerd -H fd:// -H tcp://0.0.0.0:2375

然后就是保存文件，重载，重启

systemctl daemon-reload
service docker restart

查看以下能不能连接上docker服务，有信息打印出来就可以了

curl http://localhost:2375/version

配置windows环境下的docker可以参考我的另一篇文章

【Docker】windows环境下的docker如何开放远程2375端口_源林氏的博客-CSDN博客indows环境下的Docker是运行在Hyper-v的虚拟机中或者是wsl windows子系统中，这些虚拟机和宿主机是NAT方式连接的，宿主机的物理网络和虚拟机网是不在同一子网中。因此需要解决虚拟机和宿主机网络不在同一子网的问题。.........https://blog.csdn.net/ET1131429439/article/details/126541568

补充：在idea连接远程docker环境：设置idea连接远程docker环境 

在linux 本地可以访问，但远程又连接不上（非Connection successful），很有可能是linux没有开放2375端口，检查一下linux的防火墙设置，具体可参考我的文章。

 【Linux】防火墙开放端口_源林氏的博客-CSDN博客

windows同理，如果访问不到，就需要在windows防火墙开放端口

2.确保vue项目能够正常运行

这里以vue3.0项目为例子，编译运行

直接使用npm，如果不知道是什么，建议学一下vue3.0

npm run serve

3.将vue项目编译

编译项目得到dist文件夹

npm run build

 

4.编写Dockerfile文件

直接在src同级目录下，新建名为Dockerfile的文件，

编写Dockerfile文件，Dockerfile文件，具体怎么写，参考Docker Dockerfile | 菜鸟教程，下面是例子

# Docker image for vue application
# VERSION 1.0.0
# Author: Kannokaze

### 基础镜像，使用nginx镜像
FROM nginx

#暴露8080端口
EXPOSE 80


#作者
MAINTAINER Kannokaze <1131429439@qq.com>

#应用构建成功后的文件被复制到镜像内
COPY /dist /usr/share/nginx/html

#启动容器时的进程
ENTRYPOINT nginx -g "daemon off;"

5.使用docker build命令生成镜像

使用命令，最后的【.】是必须的，代表Dockefile文件的路径，当然可以项目任意位置内，只要填写的Dockerfile路径正确即可

-t ：指定要创建的目标镜像名

. ：Dockerfile 文件所在目录，可以指定Dockerfile 的绝对路径

docker build -t kantools:v1.0.0 .

 沒有出現警告或异常就算成功了，

然后去远程docker环境看下有没有镜像

docker images 

6.使用docker run命令生成容器

使用命令，生成名为kantoolsContains的容器

docker run -ti -d --name kantoolsContains1 -p 2333:80 kantools:v1.0.1

--name 容器命名

-p 2333:80     指定容器内部端口80指向宿主机容器端口2333

 查看，容器是否正确生成

docker ps

大功告成，访问一下，http://ip:port（需要开放远程docker宿主linux的端口）