1.準備

• 拉取Nginx鏡像

  docker pull nginx
  

• 創(chuàng)建文件夾，用來存放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.部署

• 輸入以下命令創(chuàng)建容器

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

• 查看容器

  image-20201124131807254

• 訪問容器，即可看到界面

  image-20201124131852450