传统的前端部署方式
首先打包编译生成一系列的静态文件（dist），然后把这些文件scp（放）到远程部署的服务器中，放完之后配置nginx指向到你存放静态资源的目录，完成nginx指向才能保证请求能访问到相应的资源
可参考之前写的文章 🚀基于 Vue-cli 3x的项目部署
什么是Docker
Docker是一个虚拟环境容器,可以将开发环境、代码、配置文件等一并打包到这个容器中,最后发布应用
使用docker
通过将部署的操作集中成一个部署脚本完成传统的部署流程，通过在服务器上运行docker容器来运行前端应用
部署环境
- vue cli --version 3.3.0
- CentOS Linux release 7.7.1908
- 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...] //删除镜像
