您的位置:首页 > Web前端 > Vue.js

windows 10环境下docker的使用(以发布vue项目为例)

2019-06-04 15:36 691 查看

1.安装docker for windows
此步骤略去
2.将打包好的vue项目放在一个目录下

在项目同一目录下新建dockerfile文件内容如下,./vue表示当前目录下的vue目录
/home/web标识上传至docker镜像后,执行的容器内部的目录。

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER ccz
# 将vue文件中的内容复制到 /home/web 这个目录下面
COPY ./vue  /home/web

打开命令行cmd,进入项目和dockerfile文件所在目录。执行

# -t 是给镜像取名。
# 最后有一个点 “.”,表示使用当前路径下的 dockerfile 文件,也可以指定使用其它路径的。
docker build -t face-cloud .

执行成功后,输入docker images 可以查看镜像

docker images


3.启动docker容器

# -p :配置端口映射,格式是外部访问端口:容器内端口
# -d :后台运行
# --name : 给容器取名
# 最后有 2 个 face-cloud,前面一个是给容器取的名字,后面一个是使用的镜像的名字
docker run -p 8099:8090 -d --name face-cloud face-cloud

启动完成后执行docker ps 可以查看当前正在运行的容器。

4. 进入docker 容器内部进行配置
docker exec -it 容器ID /bin/bash
(你可以理解为每启动一个docker容器即启动一个系统)

在前面上传镜像的步骤中我们将vue项目打包上传到了容器内部的/home/web目录下,此时进入该目录进行查看到相应的打包文件。

5.配置容器内部的nginx
可以通过执行

find / -name nginx.conf
查找nginx配置文件

由于需要编辑nginx.conf文件,需要安装vim

apt-get install -y vim
(apt-get安装过程中可能会提示apt-get版本过低,此时需apt-get update)

编辑nginx.conf监听8090端口,配置项目的文件目录,8090为项目启动端口。同时上面我们启动容器时已经通过8099端口转发容器内部的8090端口。

重新加载nginx配置
/usr/sbin/nginx -s reload

此时访问浏览器localhost:8099可以看到项目已经成功发布。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: