Docker部署Vue应用

一、概述

首先，需要安装docker环境。本文是在Ubuntu系统中部署了Docker环境。

二、vue静态文件生成

-在vue工程目录下执行命令：

npm run build

命令执行成功后，会在当前目录产生dist文件夹，将dist文件夹拷贝到ubuntu虚拟机中。

三、准备Dockerfile和nginx.conf

首先要下载nginx基础镜像：

docker pull nginx

该条命令会下载最新版本的nginx基础镜像。

• Dockerfile:

FROM nginx
COPY nginx.conf /etc/nginx/nginx.conf
COPY dist/ /usr/vuejs/nginx/

• nginx.conf :

worker_processes  1;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    keepalive_timeout  65;
 
    server {
        listen       11000;
        server_name  localhost;
        root /usr/vuejs/nginx/;
        index index.html;
       
        location ~^/usersrv[/\w*]*$ {
            proxy_pass http://192.168.10.12:3000; // 服务地址
        }
    }
}

四、制作docker镜像

docker build -t imageName:v1.0 .

五、启动docker镜像

docker run --name ContainerName -p 11000:11000 -d  imageName:v1.0  

查看是否运行成功：
浏览器打开：http://localhost:11000

六、镜像、容器管理

• 查看镜像
  docker images
• 删除镜像
  docker rmi imageId
• 查看容器
  docker ps
• 停止容器
  docker stop containerId
• 刪除容器
  docker rm containerId