Dockerfile部署Vue项目

1. 安装Nginx
   部署Vue项目依赖Nginx，首先拉取Nginx的镜像，这里使用Nginx最新的镜像，然后根据Nginx镜像运行容器。

   docker pull nginx
   # -d参数：容器启动后会进入后台。
   # -p参数：容器的80端口映射到本机的4030端口。
   docker run --name nginx -d -p 4030:80 nginx
   

   

2. 打包Vue项目
   编译项目，编译完成之后，在项目的根目录下面就会生成一个dist-production文件夹，里面都是一系列的静态文件。

   npm run build
   

   

3. 构建Dockerfile
   Linux上找个空目录放项目文件和Dockerfile。

   vi Dockerfile
   

   Dockerfile文件内容：

   设置基础镜像，这里使用最新的Nginx镜像，前面已经拉取过了。将dist-production文件中的内容复制到 /usr/share/nginx/html/这个目录下面。

   FROM nginx
   COPY dist-production/ /usr/share/nginx/html/
   

4. 构建镜像

   # -t参数：指定image文件的名字，后面还可以用冒号指定标签。如果不指定，默认的标签就是latest。
   # .：表示Dockerfile文件所在的路径，是当前路径，所以是一个点。
   docker build -t dockervue .
   

   

5. 生成容器

   # --name参数：指定容器名称。
   # -d参数：容器启动后会进入后台。
   # -p参数：容器的80端口映射到本机的8081端口。
   docker run --name dockervue -d -p 8081:80 dockervue
   

   

   # -p参数：容器的 80 端口映射到本机的 8081 端口。
   # -it参数：容器的 Shell 映射到当前的 Shell，然后你在本机窗口输入的命令，就会传入容器。
   # dockervue：image 文件的名字。
   /bin/bash：容器启动以后，内部第一个执行的命令。这里是启动 Bash，保证用户可以使用 Shell。
   docker container run --name dockervue -p 8081:80 -it dockervue /bin/bash
   

   如果容器停止，则启动容器，使用下面命令进入容器。

   docker ps -a
   docker restart 容器ID
   docker exec -it 容器ID /bin/bash
   

6. 访问192.168.137.4:8081