docker容器化部署前端项目

这次我们整一下docker部署的问题 会涉及到docker、vue、nginx

Step One

安装docker: 从docker官网下载 https://docs.docker.com/docker-for-mac/
安装步骤略过…

安装nginx: docker pull nginx 一顿操作balabala…
安装node: docker pull node

使用vue-cli3整一个vue项目 直接vue create docker-vue 又是一通balabala…

整个安装过程比较慢 先普及一下几个基本的docker命令

  1. docker images: 查看镜像
  2. docker ps: 查看容器
  3. docker exec -it { containerId } /bin/bash: 进入某个容器的命令行
  4. docker stop { containerId }: 停止某个容器
  5. docker rm { containerId }: 移除某个容器
  6. docker rmi { imageId }: 移除某个镜像
  7. docker build -t { imageName } .: 生成一个镜像
  8. docker run -p {容器端口:宿主端口} -d { imageName }: 启动某个容器

基本用到的命令就是以上几个了

Step Two

好了 该装的都装好了 我们直接开搞
在vue项目立新建Dockerfile文件 写入以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
FROM node

COPY . /docker-work/docker-vue

WORKDIR /docker-work/docker-vue

RUN rm -rf dist/ node_modules/

RUN npm install

RUN npm run build

FROM nginx

# 设置跨域
COPY --from=0 /docker-work/docker-vue/nginx/default.conf /etc/nginx/conf.d/default.conf

COPY --from=0 /docker-work/docker-vue/dist /usr/share/nginx/html

解释一下参数
FROM 表示使用docker的哪个镜像 可以是本地安装的 也可以是docker镜像库里的
COPY 表示将文件从本地拷贝到这个docker镜像对应的工作目录里 可以通过docker exec命令查看到
WORKDIR 表示当前的工作目录
RUN 需要启动的命令

一般COPY的操作都是用以拷贝当前项目文件或者覆盖镜像配置 我们也可以覆盖nginx的default.conf配置等

上面的操作就是将门项目拷贝到docker镜像的目录 通过装好的node 依次执行npm install和npm run build
打包完毕后呢再将打包后的dist目录拷贝到当前镜像工作目录的nginx配置静态资源的目录 启动nginx就行了

流程大概是这样
输入 docker build -t docker-vue . 构建镜像
构建完毕 docker images查看是否构建成功

输入 docker run -p 10000:80 -d docker-vue 启动容器 一个小流程就算完成啦