使用 Docker 打包和运行 Vue 应用

在现代开发中，Docker 是一个强大的工具，可以帮助开发者将应用及其依赖打包到一个轻量级的容器中。本文将基于你提供的 Dockerfile 示例，指导你如何使用 Docker 打包和运行一个 Vue 应用。

1. 项目准备

首先，确保你已经安装了 Node.js 和 Docker。然后，创建一个新的 Vue 项目（如果你还没有项目的话）：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

2. 创建 Dockerfile

在项目根目录下创建一个名为 Dockerfile 的文件，内容如下：

FROM node:18

WORKDIR /opt/web
COPY . /opt/web/

# 安装特定版本的 pnpm
RUN npm install -g pnpm@9.15.0

# 设置 pnpm 的存储目录
RUN pnpm config set store-dir /root/.local/share/pnpm/store

# 设置 pnpm 的注册表和其他配置
RUN pnpm set registry https://registry.npmmirror.com/ && \
 pnpm config set ignore-workspace-root-check true

# 安装开发依赖
RUN pnpm add cross-env --save-dev

# 安装项目依赖
RUN pnpm install

EXPOSE 8080/tcp

CMD ["pnpm", "dev:daas"]

说明

• 基础镜像：使用 Node.js 18 作为基础镜像。
• 工作目录：设置工作目录为 /opt/web，所有后续命令将在此目录下执行。
• 复制文件：将当前目录的所有文件复制到工作目录。
• 安装 pnpm：全局安装特定版本的 pnpm。
• 配置 pnpm：设置 pnpm 的存储目录和注册表。
• 安装依赖：安装开发依赖和项目依赖。
• 暴露端口：暴露 8080 端口，以便外部访问。
• 启动命令：使用 pnpm 启动应用。

3. 构建 Docker 镜像

在项目根目录下，使用以下命令构建 Docker 镜像：

docker build -t cloud/console:v1 .

说明

• -t cloud/console:v1：为镜像指定一个标签（名称）。
• .：表示 Dockerfile 的上下文目录。

4. 运行 Docker 容器

构建完成后，可以使用以下命令运行 Docker 容器：

docker run -it  -p 18080:8080 cloud/console:v1

5. 访问应用

在浏览器中输入 http://localhost:18080，你应该能够看到你的 Vue 应用。

6. 常见问题

注册要记得打包镜像时忽略node_modules文件。否则会影响镜像生成！