vue项目发布到docker nginx的方法总结

我总结了以下两种方法可用

一、通过制作镜像，使用镜像生成docker   这个是比较常用的方法，制作镜像(images)后，如果还要生成docker可以直接使用镜像比较方便以下是操作步骤

　　1.创建目录 分别对应网站文件目录，日志目录，和配置文件目录

mkdir -p /home/OnlineBusiness/nginx_admin_docker/www /home/OnlineBusiness/nginx_admin_docker/logs /home/OnlineBusiness/nginx_admin_docker/conf.d 

　　2.使用npm run build发布vue项目，并且上传到创建的文件目录，并且修改好nginx的配置文件conf.d目录下面的default.conf并且上传到conf.d目录，每个人的配置可能都不一样，以下是我的配置文件

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    location / {
       root   /usr/share/nginx/html;
       index  index.html index.htm;
       client_max_body_size 200m;
       if (!-e $request_filename) {
           rewrite ^/(.*) /index.html last;
           break;
       }
        # To allow POST on static pages
        error_page 404 /index.html;
        error_page  405     =200 $uri;
       # error_page  405 200 $uri;
    }

    location ~ /api/  {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-Ip $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        rewrite  ^/api/(.*)$ /$1 break;
        proxy_pass http://172.16.19.155:8004;
    }
    location ~ /admin/  {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-Ip $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        rewrite  ^/(.*)$ /$1 break;
        proxy_pass http://172.16.19.155:8030;
    }
     location ~ /WebApi/  {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-Ip $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        rewrite  ^/(.*)$ /$1 break;
        proxy_pass http://172.16.19.155:8030;
    }
    #access_log  /var/log/nginx/host.access.log  main;
}

　　3.编写dockerfile文件，说明：第一行：指定nginx的镜像来源，第二行：指定作者，第三行：删除默认的配置文件，第四行 添加本地的配置文件，第五行 复制项目文件到nginx目录
dockerfile文件不能带扩展名，放在根目录里面（我这里就是放在/home/OnlineBusiness目录下面）

FROM nginx

MAINTAINER rxyhj
RUN rm /etc/nginx/conf.d/default.conf
ADD conf.d/default.conf /etc/nginx/conf.d/
COPY www/ /usr/share/nginx/html/

　　4.创建镜像文件，在命令行下面，切换到dockerfile所在的文件夹，使用以下命令创建镜像文件,后面的.不能忘记，表示dockerfile文件夹在当前目录

docker build -t 镜像名称:版本号 .

　　5. 使用镜像文件创建并启动容器,其中8002是本机使用的端口号，80是容器的端口，执行完命令后可使用本地IP加端口号访问

docker run --name=容器名称 -p 8002:80 -d 镜像名称:版本号　.

二、通过命令行的方法发布，该方法稍微麻烦一点，如果只发布一次可以使用该方法，操作步骤如下

　　1.新建一个默认的nginxdocker，其中nginx是本地已有的nginx文件，如果没有要先创建

docker run -id --name --restart=always -e TZ=Asia/Shanghai -d nginx -p 80:80 nginx

　　2.创建目录 分别对应网站文件目录，日志目录，和配置文件目录

mkdir -p /home/OnlineBusiness/nginx_admin_docker/www /home/OnlineBusiness/nginx_admin_docker/logs /home/OnlineBusiness/nginx_admin_docker/conf.d /home/OnlineBusiness/nginx_admin_docker/conf

　　3.复制默认nginx默认配置文件到配置文件目录，其中 de3bd9fcb694 是默认nginxdocker的容器Id,可以通过dokcer ps查看

docker cp de3bd9fcb694:/etc/nginx/nginx.conf /home/OnlineBusiness/nginx_test/conf
docker cp de3bd9fcb694:/etc/nginx/conf.d /home/OnlineBusiness/nginx_test/

　　4.停止默认配置nginx docker 其中 de3bd9fcb694 是默认nginxdocker的容器Id

docker stop de3bd9fcb694

　　5.删除默认配置 其中 de3bd9fcb694 是默认nginxdocker的容器Id

docker rm de3bd9fcb694

　　6.将发布后的vue项目上传到创建的网站文件目录，修改配置文件,如果有默认的配置文件，前面1,3,4,5步可以不需要，直接将配置文件复制到配置文件夹中即可
　　7.重新创建容器,并且指定容器的文件目录，日志目录、配置文件目录与本地的目录映射，映射后如果修改了本地对应目录的文件，重启容器后会同步过去

docker run -d -p 8200:80 --name shoppc --restart=always -e TZ=Asia/Shanghai -d -v /home/OnlineBusiness/nginx_admin_docker/www:/usr/share/nginx/html -v /home/OnlineBusiness/nginx_admin_docker/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/OnlineBusiness/nginx_admin_docker/conf.d:/etc/nginx/conf.d -v /home/OnlineBusiness/nginx_admin_docker/logs:/var/log/nginx nginx

　　8.启动容器  shoppc为容器名称，也可以使用Id

docker start shoppc

　　9.修改nginx映射配置 -it参数表示分配一个伪终端 shoppc为容器名称 /bin/bash表示对容器执行bash操作,也可以在本地目录修改配置文件，然后重启容器也可以生效

　　　　1). docker exec -it shoppc /bin/bash // 进入容器内部
　　　　2). vim /etc/nginx/conf.d/default.conf // 修改nginx配置文件(如果vim命令不可用则需要安装执行以下命令安装 apt-get update (更新安装包源，否则可能无法运行vim的安装语句)，apt-get install vim 安装vim）

以上方法和步骤都经过亲自动手实践是可以走得通的，在此记录下来，以免以后不记得了