Vue项目部署到Docker中

随笔

Vue项目打包

1，首先先进入vue项目中键入npm run build 打包项目

npm run build

然后在项目的根目录下dist文件夹，里面通常有一个static文件夹及index.heml页面也是项目的入口。

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

scp D:\workspace\vue root@192.168.2.11:/opt/nginx
#D:\workspace\vue是你windows下的vue项目存放路径，后面root@192.168.2.11:/opt/nginx则是虚拟机的ip:存放的位置

3，如果报错则证明是对的，因为scp 传输文件夹的话需要加一个 -r ，也就变成了下面这样

scp -r D:\workspace\vue root@192.168.2.11:/opt/nginx

4,此时你的vue项目存放到docker中就完成了一半，下面进行linux中的操作

Docker中配置部署运行项目

1，首先要下载个nginx镜像

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

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

#进入list存放的目录
cd /opt/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 的镜像就多出了一个已经配置好的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 front -p 8081:8081 -d distvue
–name：指定容器名
-p：指定容器和宿主机之间的端口映射
-d：守护进程运行
distvue：指定启动 distvue 镜像

7，如果没报错的话可以访问一下项目是否正常进入

配置容器自启动

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

systemctl enable docker.service #开机自启

然后docker ps -a 就能看到我们配置好8081端口的容器id
# 启动
docker start 容器id

# 自动启动
docker update --restart=always 容器id

这样就解决了vue项目部署到nginx中，顺便每次开机自启动。