传统的前端部署方式


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


​


什么是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


项目目录

【Docker篇】vue前端项目部署_nginx

部署项目需要准备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篇】vue前端项目部署_nginx_02【Docker篇】vue前端项目部署_Docker_03

镜像成功生成


本地镜像

docker image ls | grep frontend

【Docker篇】vue前端项目部署_nginx_04

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


用容器启动镜像

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

docker run --name frontend -p 80:80 frontend:latest
  • -p: 指定端口映射，格式为：主机(宿主)端口:容器端口 将宿主的80端口映射到容器的80端口
  • --name: 为容器指定一个名称；


完成 docker 部署

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

【Docker篇】vue前端项目部署_nginx_05

其他常用docker命令

docker rm -f  [DOCKER...] //删除docker

docker ps -a // 查看所有容器

docker images // 查看所有镜像

docker rmi [IMAGE...] //删除镜像