Nginx+docker部署vue-cil项目

1. 编写dockerfile文件

   FROM-–指定哪个镜像作为新镜像的基础镜像

   MAINTAINER—-指明该镜像的作者信息

   COPY—将主机的文件复制到镜像内

   FROM nginx
   MAINTAINER chenqitian
   COPY dist/ /usr/share/nginx/html/
   COPY default.conf /etc/nginx/conf.d/default.conf

2. 打包vue-cil项目

   cmd中输入以下命令，打包生成dist文件

   npm run build

3. 修改nginx配置文件default.conf

server {
        listen       8200;
        server_name  localhost;


        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
			try_files $uri $uri/ @router;
        }

		location @router {
            rewrite ^.*$ /index.html last;
        }
		location ^~ /api {
            proxy_pass   http://47.106.128.108:8100;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Max-Age 3600;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Headers $http_access_control_request_headers;
            if ($request_method = OPTIONS ) {
                return 200;
            }
        }
		
		
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

3.上传到服务器

​ 使用xftp，把dockerfile文件和default.conf上传到服务器

4.打包成镜像

docker build -t [镜像名]

5.docker images查看所安装的镜像

docker images

6.运行构建的镜像

docker run -d -p 8200:8200 [镜像名]

7.完成

​ 浏览器访问 xx.xx.xx.xx:8200即可

常用命令

查看docker进程 -a（全部，包括不正常的）
docker ps -a
删除容器
docker rm [容器id]
删除镜像
docker rmi [镜像id]
查看镜像
docker images
进入容器
docker exec -it [容器id] /bin/bash