1.准备

• 拉取Nginx镜像

  docker pull nginx
  

• 创建文件夹，用来存放nginx配置文件和打包好的vue项目

  mkdir cms
  

• 将打包好的dist目录放入cms目录中

• 在cms目录下构建Dockerfile文件

  # 设置基础镜像
  FROM nginx
  # 定义作者
  MAINTAINER wangzh
  # 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
  COPY dist/  /usr/share/nginx/html/
  COPY nginx.conf /etc/nginx/nginx.conf
  RUN echo 'echo init ok!!'
  

• 在cms目录下构建nginx.conf文件

  worker_processes auto;
   
   
  events {
      worker_connections  1024;
  }
   
   
  http {
      include       mime.types;
      default_type  application/octet-stream;
   
   
      sendfile        on;
      #tcp_nopush     on;
   
      #keepalive_timeout  0;
      keepalive_timeout  65;
   
      #gzip  on;
   
      client_max_body_size   20m;
      server {
          listen       80;
          server_name  localhost;
   
          #charset koi8-r;
   
          #access_log  logs/host.access.log  main;
       location / {
          root   /usr/share/nginx/html;
          index  index.html index.htm;
          try_files $uri $uri/ /index.html;
          }
          
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   html;
          }
   
       } 
  }
  

• 构建好的目录内容如下：

  image-20201124131336592

2.构建

• 在cms目录下输入以下命令

  docker build -t cms-vue:1.0 .
  

  一定要在cms目录下

• 构建完毕就会得到cms-vue镜像

  image-20201124131539293

3.部署

• 输入以下命令创建容器

  docker run -di -p 8081:80 --name=cms-vue cms-vue:1.0 
  

• 查看容器

  image-20201124131807254

• 访问容器，即可看到界面

  image-20201124131852450