Docker 构建前端项目镜像

参考资料：

1. Dockerfile reference
2. Docker CLI commands
3. Docker Hub
4. Docker 入门教程 - 阮一峰

 

一、使用 Docker 构建前端项目镜像：

1. 下载安装 Docker Desktop (建议电脑内存 8G+ 使用 Docker)
2. 准备一个 React / Vue / 其他 项目
3. 在项目的根目录新建名为 Dockerfile 的文件 (语法请看参考资料1)
   
   Dockerfile 文件示例：
   

   FROM node:current-slim AS build
   COPY . /frontend
   WORKDIR /frontend
   RUN npm i --registry=https://registry.npm.taobao.org
   RUN npm run build
   
   FROM nginx
   COPY --from=build /frontend/<打包后的文件目录>/ /usr/share/nginx/html/
   

    

4. 打开终端运行 Docker build 命令构建镜像 （命令使用请看参考资料2, 注意：以下的命令都是在Dockerfile所在的目录下执行）
   
   

   docker build -t name:tag .

   例：docker build -t demo:v0.0.1 .

   注意：name:tag name 是你要构建的镜像名，tag 可设为版本号。最后的 . 代表你当前目录
   
   

5. 启动容器
   
   

   docker run -d -p 8080:80 --name name name:tag

   例：docker run -d -p 8080:80 --name demo demo:v0.0.1

   注意：name:tag 是你构建镜像时设置的镜像名和标签，8080:80 代表 将本地的 8080 端口 映射到容器的 80 端口，--name name 代表给你启动的容器起个名字
   
   

6. 打开浏览器，访问 localhost:8080，页面正常，则成功。

 

二、上传到镜像仓库：

Push an image or a repository to a registry

1.  tag the image
   

   docker tag name:tag Repository:tag

   例：docker tag demo:v0.0.1 18001700016/demo:v0.0.1

   注意：name:tag 是你构建镜像时设置的镜像名和标签，Repository:tag  Repository 代表仓库地址, tag 可设为版本号
   
   

2. push the image to the registry
   

   docker push Repository:tag

   例：docker push 18001700016/demo:v0.0.1

   注意：Repository:tag 是第一步设置的