使用docker部署nginx&&发布Vue前端

使用docker部署nginx&&发布Vue前端

搭建nginx服务器

• 查看本地是否存在可用的nginx镜像
  

  如果本地没有nginx镜像，直接docker pull nginx 拉取镜像

• 尝试启动nginx，将nginx镜像启动为一个容器

  docker run --name nginx-scene02 -p 8034:80 -d nginx
  

  启动后在window 浏览器输入 虚拟机ip：端口号 测试是否能正常启动nginx，如下为启动成功截图

• 使用docker ps 命令查看启动容器的容器id，如下查看到的容器ID为（c9dd5fa6b6a7）
  

• linux主机随便找个目录创建三个文件夹
  

  我在本地data目录下创建了nginx-scene文件夹，文件夹下创建三个文件（conf、logs、www）

• 拷贝容器内 Nginx 默认配置文件到本地当前目录下的 conf 目录，可先进入容器内查看容器内配置文件存放路径等情况

  docker exec -it 容器ID bash
  

拷贝容器内配置文件到本地已经建好的文件夹conf内

docker cp 容器id:/etc/nginx/conf.d/default.conf nginx-scene/conf/

如上命令中的nginx-scene/conf/ 为本地创建的conf目录地址，根据你当前所在目录去写这个conf的地址

• 停止nginx容器并删除容器

  docker stop c9dd5fa6b6a7 //先停止容器
  docker rm c9dd5fa6b6a7	//删除容器
  //启动容器
  sudo docker run -p 8034:80 -d --name nginx-scene -v /data/nginx-scene/www:/usr/share/nginx/html -v /data/nginx-scene/conf/nginx.conf/nginx.conf:/etc/nginx/nginx.conf -v /data/nginx-scene/logs:/var/log/nginx nginx
  

  命令说明：

  -p 将容器80端口映射到主机8034端口

  –name 给容器命名：nginx-scene

  -d 后台启动

  -v 本地创建的目录挂载到容器内目录

  -v /data/nginx-scene/www:/usr/share/nginx/html
  -v /data/nginx-scene/conf/nginx.conf/nginx.conf:/etc/nginx/nginx.conf
  -v /data/nginx-scene/logs:/var/log/nginx nginx
  
  -v 本地文件目录：容器内目录
  

  启动成功后，在本地www目录下创建index.html文件测试浏览器能否正常看到改文件内容
  
  测试截图：
  
  至此，你已经搭建完nginx服务器

发布vue前端项目

• 将前端项目打包成dist.zip包并上传到虚拟机www文件夹下，unzip解压（打包方法和上传不做赘述）

• 进入nginx配置文件配置代理

  vi /data/nginx-scene/conf/nginx.conf/nginx.conf
  

  原配置文件如下

  http {
      include       /etc/nginx/mime.types;
      default_type  application/octet-stream;
  
      log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                        '$status $body_bytes_sent "$http_referer" '
                        '"$http_user_agent" "$http_x_forwarded_for"';
  
      access_log  /var/log/nginx/access.log  main;
  
      sendfile        on;
      #tcp_nopush     on;
  
      keepalive_timeout  65;
  
      #gzip  on;
  
      include /etc/nginx/conf.d/*.conf;
  }
  
  

  配置代理

  server {
      listen 8033;
  location / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
  }
  

  完整配置文件

  http {
      include       /etc/nginx/mime.types;
      default_type  application/octet-stream;
  
      log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                        '$status $body_bytes_sent "$http_referer" '
                        '"$http_user_agent" "$http_x_forwarded_for"';
  
      access_log  /var/log/nginx/access.log  main;
  
      sendfile        on;
      #tcp_nopush     on;
  
      keepalive_timeout  65;
  
      #gzip  on;
  
      include /etc/nginx/conf.d/*.conf;
  
  server {
      listen 8033;
  
      location / {
          root   /usr/share/nginx/html;
          index  index.html index.htm;
      }
  }
  
  
  }
  
  

  配置代理需要注意

  1. 正确的格式应该为 http {

     server {}

  }

  2. 修改完配置文件重启容器 docker restart 容器ID

  注意：

  1. 监听端口为80映射端口，即为启动容器是80端口映射为8033

  2. root 地址为docker容器内nginx存放html文件，即为localhost：端口启动时，前端请求到的html文件地址，可以进容器内进行查看

     [root@hadoop01 nginx.conf]# docker exec -it c9dd5fa6b6a7 bash
     root@c9dd5fa6b6a7:/# cd /d
     dev/                  docker-entrypoint.d/  docker-entrypoint.sh
     root@c9dd5fa6b6a7:/# cd /usr/share/
     root@c9dd5fa6b6a7:/usr/share# ls
     X11              bug              dict        fonts  keyrings  maven-repo  pam-configs  sensible-utils  zoneinfo
     adduser          ca-certificates  doc         gcc    libc-bin  menu        perl5        tabset          zsh
     base-files       common-licenses  doc-base    gdb    lintian   misc        pixmaps      terminfo
     base-passwd      debconf          dpkg        info   locale    nginx       polkit-1     ucf
     bash-completion  debianutils      fontconfig  java   man       pam         readline     xml
     root@c9dd5fa6b6a7:/usr/share# cd nginx/html/
     root@c9dd5fa6b6a7:/usr/share/nginx/html# ls
     50x.html  index.html
     root@c9dd5fa6b6a7:/usr/share/nginx/html# pwd
     /usr/share/nginx/html
     

     测试请求发布前端地址
     

至此完结撒花！！！