【Docker篇】vue前端项目部署

传统的前端部署方式

首先打包编译生成一系列的静态文件（dist），然后把这些文件scp（放）到远程部署的服务器中，放完之后配置nginx指向到你存放静态资源的目录，完成nginx指向才能保证请求能访问到相应的资源

可参考之前写的文章 🚀基于 Vue-cli 3x的项目部署

什么是Docker

Docker是一个虚拟环境容器,可以将开发环境、代码、配置文件等一并打包到这个容器中,最后发布应用

使用docker

通过将部署的操作集中成一个部署脚本完成传统的部署流程，通过在服务器上运行docker容器来运行前端应用

部署环境

1. vue cli --version 3.3.0
2. CentOS Linux release 7.7.1908
3. docker-ce 社区版本

如何安装

yum install docker-ce

项目目录

部署项目需要准备Dockerfile和nginx.conf

Dockerfile 配置

dockerfile是一个配置文件,用来让docker build命令清楚运行那些操作，创建dockerfile并编写相关配置

FROM node:latest as builder 
WORKDIR /app
COPY package.json 
RUN npm install   
COPY . .
RUN npm run build
FROM nginx:latest
COPY nginx.conf /etc/nginx
COPY --from=builder /app/dist  /usr/share/nginx/html
//ps: 每一个指令的前缀都必须是大写的。

• ADD和COPY：   将文件或目录复制到Dockerfile构建的镜像中

• EXPOSE：  指定运行该镜像的容器使用的端口，可以是多个。

• RUN ： 指令告诉docker 在镜像内执行命令

• FROM ：通过FROM指定的镜像名称，这个镜像称之为基础镜像，必须位于第一条非注释指令

• WORKDIR：  在容器内部设置工作目录

Nginx.conf 配置如下

events {
    worker_connections  1024;
}
http{
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }   
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

创建文件并编写后，用docker创建镜像

创建镜像

使用当前目录的 Dockerfile 创建镜像，标签为 frontend

docker build -t frontend .

• -t ：指定要创建的目标镜像

• . ：Dockerfile 文件所在目录，可以指定Dockerfile 的绝对路径

镜像成功生成

本地镜像

docker image ls | grep frontend

出现结果则应用镜像 frontend 成功创建,然后我们基于该镜像启动一个Docker容器

用容器启动镜像

使用docker镜像frontend:latest以指定80端口映射模式启动容器,并将容器命名为frontend

docker run --name frontend -p 80:80 frontend:latest

• -p: 指定端口映射，格式为：主机(宿主)端口:容器端口 将宿主的80端口映射到容器的80端口

• --name: 为容器指定一个名称；

完成 docker 部署

访问80端口，成功进入页面

其他常用docker命令

docker rm -f  [DOCKER...] //删除docker
docker ps -a // 查看所有容器
docker images // 查看所有镜像
docker rmi [IMAGE...] //删除镜像