【工具】【docker】前端构建docker镜像文件入门

前提

在项目开发的过程中遇到了需要将当前前端项目做成docker进行镜像部署的问题。

构建dockerfile

这里我们使用vsCode的docker插件来快速创建一个基于当前项目的docker文件。

vscode安装docker插件

1. 在插件市场中找到对应的docker插件。
   
2. 安装插件并且重启当前的ide
   在ide中使用command+p或者f1打开当前的命令操作栏，输入docker add

3. 插件会根据当前项目的配置选择，生成对应的dockerfile文件

根据dockerfile构建镜像

# 构建一个镜像 名称为dockername 从当前目录进行构建（读取当前目录的dockerfile等配置信息）
docker build -t imagename ./

生成的文件解析

FROM node:lts-alpine # 使用node包
ENV NODE_ENV=production # 设置node环境为development
WORKDIR /usr/src/app # 镜像的主目录
# 复制当前目录的文件到 docker镜像主目录中
COPY ["package.json", "yarn.lock", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
# 在docker镜像中执行对应命令
RUN yarn install --production=false --silent
COPY . .
# 暴露端口
EXPOSE 8808
# 增加操作权限
RUN chown -R node /usr/src/app
USER node
# 执行命令
CMD ["yarn", "start:docker"]

整个配置文件实际上就是对镜像文件的一些相关操作。

根据镜像构建容器

# 运行一个容器 name为dockername 从本机的9909端口 访问容器的8808端口 此容器使用镜像dockername进行加载
docker run --name containername -p 9909:8808 imagename

提交镜像到仓库

# 为当前的镜像打上对应的tag
docker tag imagename imagename:tagname
# 提交当前的镜像
docker push imagename:tagname

扩展知识

怎么在宿主主机上编辑镜像中的配置文件？

# 将镜像中的配置文件复制出来
docker cp imagename:/etc/nginx ~/nginx_config 

# 将复制出来的文件挂载在当前的宿主主机上
docker run -it --name containername -p 9909:8808 -v ~/nginx_config/:/etc/nginx/ imagename