Docker+Nginx镜像部署 Vue 项目

@Docker + Nginx 镜像部署 Vue 项目

一、编译打包Vue项目

进入Vue项目目录，执行命令

yarn build / npm run build

生成dist文件夹

二、构建镜像

新建 Dockerfile

vi Dockerfile

// An highlighted block
#导入nginx镜像
FROM nginx
MAINTAINER soapy 
#把当前打包工程的html复制到虚拟地址
COPY dist/ /usr/share/nginx/html/
#使用自定义nginx.conf配置端口和监听，如果后面启动容器使用挂载方式可以不用执行如下两个命令
RUN rm /etc/nginx/conf.d/default.conf
ADD nginx/default.conf /etc/nginx/conf.d/
RUN /bin/bash -c 'echo init ok!!!'

nginx的主配置在容器的/etc/nginx/nginx.conf，该文件又会include配置文件/etc/nginx/conf.d/default.conf，注意这些目录都是容器的目录，不是服务器的目录。

Nginx配置

新建nginx/default.conf

vi default.conf

server {
    #项目中定义的端口号
    listen       8000; 
    server_name  127.0.0.1; 
    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        #add_header backendIP $upstream_addr;
        #add_header backendCode $upstream_status;
    }
    #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   html;
    }
    
    location /api {
            add_header backendIP $upstream_addr;
            add_header backendCode $upstream_status;
            proxy_pass http://192.168.45.136:8060; ##后端springboot项目地址
	    proxy_set_header Host $http_host;
	}
}

Docker 打包

打包前项目目录下应该有这几个文件(夹)：
nginx/default.conf, dist, Dockerfile
执行命令生成镜像：

docker build -t vue-demo .

别忘了末尾的小点点

查看镜像

docker images

运行

docker run -d -p 8080:8000 vue-demo

docker run -d -v ~/MyWorkDir/test3/vue-demo/nginx/default.conf:/etc/nginx/conf.d/default.conf -p 8090:8000 vue-demo

命令中的-d意为后台运行，-p 为端口号，前半部分为外网访问的端口，后半部分为 Nginx 反向代理寻找的内部端口；-v ~/MyWorkDir/test3/vue-demo/nginx/default.conf:/etc/nginx/conf.d/default.conf 将我们自己创建的 nginx.conf 挂载到容器的 /etc/nginx/conf.d/default.conf。

查看运行结果

docker ps

这条命令等价于docker container ls，加上 -a 则可显示全部

查找日志

如果遇到程序崩溃或者镜像启动失败

docker logs 'CONTAINER ID'

使用 ps 命令可以找到到 CONTAINER ID

docker命令

进入容器：

docker exec -it  /bin/bash

执行exit命令就可以退出容器

查询存在的容器：

docker ps -a

删除容器：

docker -rm  CONTAINERID 

强制删除容器：

docker -rm -f  CONTAINERID 

不能够删除一个正在运行的容器，会报错。需要先停止容器。

查看镜像：

docker images

删除镜像：

docker -rmi  IMAGEID  

强制删除镜像：

docker -rmi -f  IMAGEID

删除所有停止的容器：

docker container prune

删除所有不使用的镜像：

docker image prune --force --all或者docker image prune -f -a

停止、启动、杀死、重启一个容器：

docker stop Name或者ID  
docker start Name或者ID  
docker kill Name或者ID  
docker restart name或者ID