原创

使用 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文件。否则会影响镜像生成！

正文到此结束

所属分类：博主自留地默认分类

本文标签： VUE Docker
版权声明： 本文由HARRIES原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

使用 Docker 打包和运行 Vue 应用

1. 项目准备

2. 创建 Dockerfile

说明

3. 构建 Docker 镜像

说明

4. 运行 Docker 容器

5. 访问应用

6. 常见问题

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流