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
    
Logo

前往低代码交流专区

更多推荐