使用构建Docker镜像的方式部署Vue项目

准备工作：

1. 自己电脑安装了node.js
2. 配置了vue-cli 环境
3. 远程服务器上安装了docker
4. 有远程连接和文件上传的工具（我使用的是Xshell于Xftp）
5. 配置了端口暴露（我使用的是阿里云的ECS需要进行安全组配置）

1. build vue 项目

   #在vue的main.js的目录下执行npm run build命令
   npm run build
   

2. 执行完npm run build 命令就会生成多出一个dist目录，然后将该文件夹上传到远程服务器上
   

3. 编写Dockerfile 文件,放在与dist目录所在的同一个目录下，Dockerfile内容如下

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

4. 运行生成镜像的命令（一定要达到文件夹里 里面有dist 和Dockerfile文件,最后有一个"."注意）

   #docker build -t imagename:tag .
   
   dockr build -t hello_world:1.0 .
   

   

5. 运行镜像

   #docker run --name='container-name' -p 本机端口:80 -d  image-name:tag
   docker run --name='hello_8056' -p 8056:80 -d hello_world:1.0
   

6. 访问成功 http://xxxx.xxxx.xxx:8056/#/