docker部署vue(nginx)

docker部署vue(nginx)

1. 打包vue源文件

   在终端中运行npm run build，取出dist文件夹

2. 创建数据卷

   # 创建总数据卷文件夹
   mkdir /home/centos/data-volume
   # 创建nginx数据卷文件夹
   mkdir /home/centos/data-volume/nginx-volume
   # 创建nginx-dist、nginx-config、log文件夹
   cd /home/centos/data-volume/nginx-volume; mkdir nginx-dist; mkdir nginx-config; mkdir log;
   

3. 编辑数据卷

   1. 通过工具或者命令把dist文件夹里的内容传到/home/centos/data-volume/nginx-volume/nginx-dist目录下

   2. 在nginx-config下创建default.conf文件，输入以下内容

      server {
          listen       80; # 监听端口，默认80，与后面运行容器时的端口映射相对应
          listen  [::]:80;
          server_name  localhost;
      
          #access_log  /var/log/nginx/host.access.log  main;
      
          location / {
              root   /usr/share/nginx/html; # vue项目打包后dist里的文件所存放的目录
              index  index.html index.htm;
          }
      
          # 后端反向代理配置
          location /api { 
              # 相对应把vue中以api为开头的请求路径指向http://ip:8088/
              proxy_pass   http://ip:8088/; 
          }
      
          #error_page  404              /404.html;
      
          # redirect server error pages to the static page /50x.html
          #
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   /usr/share/nginx/html;
          }
      
          # proxy the PHP scripts to Apache listening on 127.0.0.1:80
          #
          #location ~ \.php$ {
          #    proxy_pass   http://127.0.0.1;
          #}
      
          # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
          #
          #location ~ \.php$ {
          #    root           html;
          #    fastcgi_pass   127.0.0.1:9000;
          #    fastcgi_index  index.php;
          #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
          #    include        fastcgi_params;
          #}
      
          # deny access to .htaccess files, if Apache's document root
          # concurs with nginx's one
          #
          #location ~ /\.ht {
          #    deny  all;
          #}
      }
      
      

4. 下载镜像并创建运行容器

   # 下载指定镜像版本或者下载最新版本(postgres:latest)
   docker pull nginx:latest
   # 创建并运行容器
   docker run -it -d --name demo-nginx \
   -v /home/centos/data-volume/nginx-volume/nginx-dist:/usr/share/nginx/html \
   -v /home/centos/data-volume/nginx-volume/nginx-config/default.conf:/etc/nginx/conf.d/default.conf \
   -v /home/centos/data-volume/nginx-volume/log:/var/log/nginx \
   -p 8087:80 nginx:latest
   

   参数	说明
   -i	以交互模式运行容器，通常与 -t 同时使用
   -t	为容器重新分配一个伪输入终端，通常与 -i 同时使用
   -d	后台运行容器，并返回容器ID
   –name	为容器指定一个名称
   -v	绑定一个数据卷，数据卷不会随着容器的删除而消失，格式为：主机(宿主)数据卷文件或目录:容器文件或目录
   -p	指定端口映射，格式为：主机(宿主)端口:容器端口

5. 查看容器信息

   # 查看容器是否运行
   docker ps
   # 查看容器列表（得到容器名或者容器ID）
   docker ps -a
   # 查看容器日志
   docker logs 容器名或者容器ID
   # 获取容器的元数据
   docker inspect 容器名或者容器ID
   

6. 访问前端页面

   # 宿主机ip:映射到宿主机的端口/访问路径
   

7. 保存日志

   # 将容器的日志实时下载到指定路径：  docker logs -f 容器名或者Id >> 路径/文件 &
   docker logs -f demo-nginx >> /home/centos/data-volume/nginx-volume/log/demo-nginx.log &
   #查看日志
   docker logs -f demo-nginx
   cat /home/centos/data-volume/nginx-volume/log/demo-nginx.log