Dockerfile项目实战-单阶段构建Vue2项目

单阶段构建镜像-Vue2项目

1 项目层级目录

以下是项目的基本目录结构:

2 Node版本

博主的Windows电脑安装了v14.18.3的node.js版本,所以直接使用本机电脑生成项目,然后拷到了 Centos 7 里面

bash 复制代码
# 查看本机node版本
node -v

3 创建Vue2项目

bash 复制代码
# 全局安装 Vue CLI 工具
# 
# 参数说明:
# -g:表示全局安装,这样 Vue CLI 可以在系统任何地方使用
# @vue/cli:Vue CLI 的包名,这是 Vue.js 官方提供的项目脚手架工具
# 
# 作用:
# Vue CLI 是一个命令行工具,用于快速创建和管理 Vue.js 项目
# 安装完成后,可以通过 `vue` 命令来创建项目、添加插件等
npm install -g @vue/cli
bash 复制代码
# 使用 Vue CLI 创建一个新的 Vue.js 项目
# 
# 参数说明:
# my-vue-project:项目名称,将创建一个名为 my-vue-project 的目录
# 
# 作用:
# 这条命令会启动 Vue CLI 的交互式流程,帮助你创建一个新的 Vue 项目
# 在交互过程中,你可以选择预设配置或手动选择需要的功能(如 Vue Router、Vuex 等)
# 
# 注意:
# 如果你不想进入交互模式,可以直接运行:
# vue create -d my-vue-project
# 这会使用默认配置快速创建项目
vue create my-vue-project







4 本地启用测试

bash 复制代码
# 进入本地项目目录
cd D:\MySelfStudy\Vue\my-vue-project
# 构建vue项目
npm run build
# 启动vue项目
npm run serve
# 浏览器测试
http://localhost:8080/

5 将项目copy的Centos7里面

bash 复制代码
# 创建项目文件夹,并将项目拷进去
mkdir my-vue-project

6 创建Dockerfile文件

bash 复制代码
# 创建Dockerfile文件
vim Dockerfile

Dockerfile文件内容

Dockerfile 复制代码
# 使用官方 Node.js 镜像作为基础镜像
FROM node:14.18.3-alpine

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json(或 yarn.lock)
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制项目源代码
COPY . .

# 构建 Vue 项目
RUN npm run build

# 安装 serve 用于静态文件服务
RUN npm install -g serve

# 暴露端口
EXPOSE 8080

# 启动应用
CMD ["serve", "-s", "dist", "-p", "8080"]

7 构建镜像

bash 复制代码
# 构建镜像
docker build -t my-vue-project:1.0 .

8 运行镜像

bash 复制代码
# 构建镜像
docker run -d -p 8080:8080 my-vue-project:1.0

9 浏览器测试

bash 复制代码
# 浏览器测试
http://localhost:8080/
相关推荐
做运维的阿瑞5 分钟前
Kubernetes网络通信与Pod基础详解:从架构图看K8s核心组件
云原生·容器·kubernetes
江拥羡橙34 分钟前
css实现拼图样式,响应不同屏幕宽度
vue·less·css3·html5·1024程序员节·calc
梁萌10 小时前
Linux安装BiliNote
linux·运维·服务器·docker·bilinote
行思理11 小时前
docker新手教程
运维·docker·容器
着迷不白13 小时前
华为堡垒机
linux·运维·服务器·centos
莫陌尛.15 小时前
docker安装中间件
docker·中间件·容器
tuokuac16 小时前
虚拟机挂起,重启后主机连接不上虚拟机docker中的mysql?(docker网络状态假死)
网络·mysql·docker
集智飞行18 小时前
docker login方法
运维·docker·容器
不开心就吐槽20 小时前
docker-compose方式快速安装MySQL
运维·docker·容器
芥子沫20 小时前
Docker安装思源笔记&使用指南
笔记·docker·容器·思源笔记