docker+nginx部署vue项目

一、先准备好nginx的镜像包

         （如何拉取nginx镜像包，网上有教程，这里略过了...）

二、(这里主要讲挂载步骤)

           nginx容器搭好后，为了方便后续工作，我们需要把 nginx 容器里的几个配置文件给挂载到我们本地文件上。

 1.

          mkdir -p /mydata/nignx/conf 挂载容器里面的配置，即nginx.conf
          mkdir -p /mydata/nignx/conf.d 挂载容器里面的子配置,即nginx.conf里面include的配置文件
          mkdir -p /mydata/nignx/logs 挂载容器里面的代理的日志文件
          mkdir -p /mydata/nignx/html 挂载容器里面的界面的访问
2.

      启动nginx(先不挂载nginx.con配置文件)
           docker run  --name nginx -d -p 80:80 --name nginx1.0 \    
            -v /mydata/nignx/logs:/var/log/nginx nginx
 3. 

     然后使用如下命令进入交互式终端：
          docker exec -it nginx1.0 /bin/bash
            进入后可以看到在nginx1.0的容器中：
            /etc/nginx/目录下存在nginx.conf，
           /etc/nginx/conf.d/目录下存在default.conf文件

4.

     退出容器，使用下面的命令，将容器中的两个文件拷贝到我们前面准备的指定挂载目录
 docker cp nginx1.0:/etc/nginx/nginx.conf /mydata/nignx/conf/ #使用id或names【mynginx】
 docker cp nginx1.0:/etc/nginx/conf.d/default.conf /mydata/nignx/conf.d/

5.

       删除容器
 docker stop nginx1.0
 docker rm -f nginx1.0

 

6.

   使用挂载目录去创建nginx容器并启动命令：
 docker run  --name nginx -d -p 7070:80 \
-v /mydata/nignx/html:/usr/share/nginx/html \
-v /mydata/nignx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /mydata/nignx/conf.d:/etc/nginx/conf.d \
-v /mydata/nignx/logs:/var/log/nginx nginx
 命令解读：
    run：启动一个docker容器
    name：容器的名称
    d: 后台启动
    p: 绑定别的端口 -p a:b 将宿主机器的a端口绑定到容器的b端口 -P 为随机绑定到端口
    v : 挂载的内容 宿主机器的文件夹：容器的文件夹
7.

   随便写一个html页面放到/mydata/nignx/html下，否则会报403
 效果：

 

 

二、docker发布vue项目（这里开始想讲如何发布vue项目）

1.安装号nginx

2.在任意目录下新建文件 dockerfile .。内容如下：（其中把vue包也放在同级目录下）

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER jiangyu
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/

3.构建镜像：

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

查看新生的镜像：

docker images

4、启动容器：

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

查看是否运行成功：

5.浏览访问：http://服务器IP:3000/#/

这就是我项目的测试页面。 OK 了。

 

具体可参考：

https://blog.csdn.net/K_520_W/article/details/106924112?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242

挂载文件

https://www.pianshen.com/article/7530103974/    docker部署vue项目