Docker中配置部署运行VUE项目

我们通过Docker中配置部署运行VUE项目

1.Vue项目打包

1.打包项目

首先先进入vue项目中键入npm run build 打包项目
npm run build
然后在项目的根目录下dist文件夹，里面通常有一个static文件夹及index.heml页面也是项目的入口。

2.上传项目文件夹

将项目scp 到linux中，如果使用的xshell连接的虚拟机可以在下载个xftp连接一下传文件比较方便，如果没有即在windows环境下使用cmd命令连接虚拟机进行传输项目

scp -r 本地地址 root@192.168.2.11:虚拟机地址
例如：scp F:\个人\dist root@192.168.2.11:/data/nginx

2.Docker中配置部署运行项目

1.首先要下载个nginx镜像(已玩转过可以跳过这步)

docker pull nginx
#如果需要指定版本可以在nginx后面加上   :版本号

2，然后进入刚才存放dist目录中在我这也就是/opt/nginx，编写一个nginx的默认文件。

#进入list存放的目录
cd /data/nginx
#写个nginx的配置文件
vim default.conf
#按照下方填写
server {
    listen       8081;# 配置端口
    server_name  192.168.2.11; # 修改为docker服务宿主机的ip
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
 
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

3.当前目录下创建Dockerfile

FROM nginx #指定基础镜像
  
MAINTAINER ps #说明信息
 
RUN rm /etc/nginx/conf.d/default.conf  
 
ADD default.conf /etc/nginx/conf.d/  #删除基础镜像中的Nginx配置文件替换成自己写的
 
COPY dist/ /usr/share/nginx/html/ #将打包好的vue项目复制到基础镜像中Nginx配置文件的指定路径下  

4.创建镜像

docker build -t distvue .\
#distvue就是镜像名，可以自行更改
#后面的那个点表示在当前目录下创建镜像，不要忘了

5.查看docker 镜像

查看下docker 的镜像就多出了一个已经配置好的distvue

docker images #查看镜像
bash-4.4# docker images
REPOSITORY    TAG       IMAGE ID       CREATED        SIZE
distvue       latest    068153ec6e2c   21 hours ago   147MB

6.启动容器

docker run --name disvue -p 8089:8081 -d distvue
–name：指定容器名
-p：指定容器和宿主机之间的端口映射
-d：守护进程运行
distvue：指定启动 distvue 镜像

配置容器自启动

1，每次重开机后需要手动start一下容器比较繁琐，可以将容器也设置为自启

systemctl enable docker.service #开机自启
 
然后docker ps -a 就能看到我们配置好8081端口的容器id
# 启动
docker start 容器id
 
# 自动启动
docker update --restart=always 容器id