将Vue项目部署在本地Linux虚拟机的docker上

1.打包Vue项目

npm run build

这里一般项目都是这个打包指令，如果不对自己去package.json文件找自己的打包指令是什么，比如我的文件打包指令就是：把build换成build:prod 

打包成功后可以看到目录中多出一个dist文件：

 将其复制到一个英文目录下。（这个目录之后要复制到Linux系统下）

2.拉取Nginx的docker镜像

docker pull nginx

使用命令查看Nginx镜像是否安装成功。

docker images

 3.编写配置文件

3.1nginx.conf

在上文提到的英文目录下，创建nginx.conf文件，内容如下：

worker_processes  1;
  
events {
    worker_connections  1024;
}
  
  
http {
    include       mime.types;
    default_type  application/octet-stream;
  
    sendfile        on;
 
    keepalive_timeout  65;
  
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  虚拟机ip地址;
 
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
 
    }
  
}

虚拟机ip地址注意换成自己的。

3.2Dockerfile

整个docker镜像都是基于该文件构建的。

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf

最后整个文件结构如下;

 4.构建镜像

将整个文件夹复制到Linux任意目录下，进入到文件目录下，右键打开控制台，执行命令

docker build -t vue .

注意：这里vue是镜像名称任意；结尾的“.”和前面的“vue”之间存在空格。

再次输入docker images即可查看自己创建成功地镜像：

 5.启动镜像

docker run -p 8080:80 -d vue

• -p 做一个端口暴露
• -d 后台运行
• vue 镜像名字

启动成功，可以通过docker ps或者docker ps -a查看

在本地访问虚拟机ip地址的8080端口，访问成功！！