docker 打包h5

原创

mob64ca12edea6e 2024-09-22 04:40:26 ©著作权

文章标签 Docker Dockerfile json 文章分类 Docker 云计算

©著作权归作者所有：来自51CTO博客作者mob64ca12edea6e的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 Docker 打包 H5 应用的全流程指南

一、整体流程概述

在使用 Docker 打包 H5 应用之前，首先要明确一些基本的步骤和流程。下面是整个过程的一个简单示意。

| 步骤              | 描述                     |
|------------------|--------------------------|
| 1. 编写 Dockerfile | 创建一个用于构建镜像的 Dockerfile |
| 2. 构建 Docker 镜像 | 使用 Dockerfile 构建镜像   |
| 3. 运行容器        | 从构建的镜像中运行容器     |
| 4. 访问应用        | 通过浏览器访问你的 H5 应用 |

二、每一步具体操作

1. 编写 Dockerfile

在项目根目录下创建一个名为 Dockerfile 的文件。这个文件用于定义如何构建你的 Docker 镜像。

# 使用官方的 Node.js 镜像，并指定版本
FROM node:14

# 设置工作目录
WORKDIR /app

# 将 package.json 和 package-lock.json 拷贝到工作目录
COPY package*.json ./

# 安装项目依赖
RUN npm install

# 将应用源代码拷贝到容器
COPY . .

# 构建项目（假设你使用的是 Vue.js）
RUN npm run build

# 暴露服务端口
EXPOSE 8080

# 指定启动命令
CMD ["npm", "start"]

代码解释：

FROM node:14：使用指定版本的 Node.js 镜像作为基础镜像。
WORKDIR /app：设置容器内的工作目录为 /app。
COPY package*.json ./：将本地的 package.json 和 package-lock.json 文件拷贝到工作目录。
RUN npm install：安装应用所需的依赖。
COPY . .：将项目的所有文件拷贝到容器内。
RUN npm run build：构建应用（此处假设你使用的是 Vue.js；根据不同框架可能会有不同的构建命令）。
EXPOSE 8080：告诉 Docker 容器要监听的端口。
CMD ["npm", "start"]：容器启动后执行的命令，这里是启动服务。

2. 构建 Docker 镜像

在项目目录下打开终端，运行以下命令：

docker build -t my-h5-app .

代码解释：

docker build：构建 Docker 镜像的命令。
-t my-h5-app：为镜像指定一个名字（my-h5-app）。
.：指定当前目录为上下文。

3. 运行容器

运行如下命令以启动容器：

docker run -p 8080:8080 my-h5-app

代码解释：

docker run：启动一个新的容器。
-p 8080:8080：将容器内的 8080 端口映射到宿主机的 8080 端口。
my-h5-app：要运行的镜像名称。

4. 访问应用

打开浏览器，输入 http://localhost:8080 进行访问。

三、甘特图示例

下面是整个打包和部署的甘特图，可以让你更好的理解每一步的时间安排：

gantt
    title Docker 打包 H5 应用流程
    dateFormat  YYYY-MM-DD
    section 步骤
    编写 Dockerfile      :done,    d1, 2023-10-01, 1d
    构建 Docker 镜像     :active,  d2, 2023-10-02, 1d
    运行容器            :         d3, 2023-10-03, 1d
    访问应用            :         d4, 2023-10-04, 1d