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/
相关推荐
勇哥的编程江湖7 小时前
starrocks官网docker部署mysql无法连接
运维·docker·容器
水瓶_bxt8 小时前
Centos安装HAProxy搭建Mysql高可用集群负载均衡
mysql·centos·负载均衡
bingbingyihao9 小时前
Node.js 模拟 Linux 环境
linux·node.js
小码过河.10 小时前
CentOS 搭建 Docker 私有镜像仓库
linux·docker·centos
贾斯汀玛尔斯11 小时前
ubuntu/centos系统ping 不通域名的解决方案
linux·ubuntu·centos
吳所畏惧12 小时前
NVM踩坑实录:配置了npm的阿里云cdn之后,下载nodejs老版本(如:12.18.4)时,报404异常,下载失败的问题解决
前端·windows·阿里云·npm·node.js·batch命令
飞询13 小时前
部署 coze-loop
docker·coze
龙卷风040513 小时前
使用本地IDEA连接服务器远程构建部署Docker服务
后端·docker
半梦半醒*13 小时前
Linux网络管理
linux·运维·网络·centos·运维开发
JS_Love14 小时前
nodejs 手动实现 multipart/byteranges 分块下载
node.js