前端使用dockerfile生成镜像

本文详细介绍了如何创建Dockerfile来构建前端应用的镜像,包括基于node的构建阶段和Nginx的生产阶段。同时,讨论了.gitignore与.dockerignore的区别,并指导如何通过docker build创建镜像及docker run启动容器。通过本文,读者可以了解到前端项目如何利用Docker进行部署。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创建Dockerfile 文件

什么是dockerfile他就是一个配置文件,定义了使用什么容器,将什么文件放入docker 中的什么位置 ,定义了向外部暴漏了哪个端口

简单
FROM nginx  #基于Nginx官方镜像
COPY dist/ /usr/share/nginx/html/ #将文件拷贝至指定容器位置
EXPOSE 80 #容器对外暴露接口  注意真实端口映射还需要在创建容器时定义
CMD ["nginx","-g","daemon off;"]
复杂
# dokcerfile
# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm config set registry https://registry.npm.taobao.org/
RUN npm install -g npm@latest
RUN npm install
COPY . . 
RUN npm run build

# production stafe 
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx","-g","Daemon off;"]
  • FROM node:lts-alpine as build-stage 基于node lst-alpine 版本镜像 并通过构建阶段命名 为build-stage
  • WORKDIR /app 将工作区设为app与其他系统文件隔离
  • COPY package*.json ./ 将package.json 与package-lock.json 到/app目录
  • RUN npm install 运行npm install 在容器中安装依赖
  • COPY . . 拷贝其他文件到 /app 分两次拷贝是因为要保持node_modules一致
  • RUN npm run build :运行npm run build

将构建分为两个阶段,第一阶段基于node镜像,第二阶段基于Nginx 镜像

  • FROM nginx:stable-alpine as production-stage 基于nginx stable-alpine 版本镜像 并将有nginx 的环境阶段命名为productuion-stage
  • COPY --from=build-stage /app/dist /usr/share/nginx/html 通过–from 参数可以引用build-stage 阶段生成的产物,并将其复制到 /usr/share/nginx/html
  • EXPOSE 80: 容器对外暴漏80端口
  • CMD [“nginx” ,“-g”,“daemon off”] 容器创建时运行 nginx -g daemon off 命令 一旦COM对映命令结束 容器就会被销毁 所以通过daemon off rang Nginx 一直在前台运行

.gitignore与dockerignore

两者类似都是创建需要忽略的文件

# .dockerignore
node_modules

# .gitignore
node_modules

创建Docker 镜像

docker build . -t dokcerImage:last
  • docker build 创建Docker镜像
  • . 使用当前目录下的Dockerfile文件
  • -t 使用tag 标记版本
  • dockerImage:last 创建名为dockerImage的镜像,并标记为last(最新)版本

创建Docker 容器

docker run -d -p 80:80 --name dockerContainer dockerImage:last
  • docker run :创建并运行docker容器
  • -d 后台运行
  • 80:80 将当前服务的80端口(冒号前的80),映射到容器的80端口(冒号后的80)
  • –name 给容器命名,便于之后定位容器
  • dockerImage:last 基于dockerImage 最新版本镜像创建的容器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值