docker创建vue镜像

1.确保你已经安装了 Node.js 和 Vue CLI。

2.创建一个 Vue.js 项目(如果你还没有一个)

vue create my-vue-app

3.进入目录

cd my-vue-app

4.构建vue.js

npm run build

5.创建一个 Dockerfile 来构建 Vue 应用的 Docker 镜像:

基于 Node 官方镜像

FROM node:lts-alpine

设置工作目录

WORKDIR /app

复制 package.json 和 package-lock.json (如果有)

COPY package*.json ./

安装项目依赖

RUN npm install

复制项目文件和目录到工作目录

COPY . .

构建 Vue 应用

RUN npm run build

使用 Nginx 镜像作为基础来提供 web 服务器

FROM nginx:stable-alpine

从 Vue 应用镜像中复制构建好的文件到 Nginx 服务器的 html 目录中

COPY --from=0 /app/dist /usr/share/nginx/html

暴露 80 端口

EXPOSE 80

启动 Nginx,并且 Nginx 将持续运行

CMD ["nginx", "-g", "daemon off;"]

6.使用以下命令创建docker镜像

docker build -t my-vue-app .

7.运行vue.js应用的docker容器

docker run -d -p 8080:80 --name vue-app my-vue-app

相关推荐
drebander2 小时前
Docker 与 Kubernetes(K8s)初探
docker
ccmjga5 小时前
升级 SpringBoot3 全项目讲解 — Spring Boot 3 中如何发Http请求?
java·spring boot·后端·docker·gradle·springboot·spring security
程序员小续8 小时前
Excel 表格和 Node.js 实现数据转换工具
前端·javascript·react.js·前端框架·vue·excel·reactjs
胖头鱼不吃鱼-9 小时前
开源低代码平台与 Vue.js
开源·vue
曹天骄11 小时前
Docker Compose Installation on CentOS 7.9
docker·eureka·centos
零凌林11 小时前
WEB前端将指定DOM生成图片并下载最佳实践(html2canvas)
前端·vue·html2canvas·blob·图片下载·dom转图片
wgslucky12 小时前
docker 安装jenkins
docker·容器·jenkins
Karoku06612 小时前
【CI/CD】持续集成及 Jenkins
运维·ci/cd·docker·云原生·容器·kubernetes·jenkins
鸡鸭扣17 小时前
Docker:3、在VSCode上安装并运行python程序或JavaScript程序
运维·vscode·python·docker·容器·js
神秘_博士19 小时前
自制AirTag,支持安卓/鸿蒙/PC/Home Assistant,无需拥有iPhone
arm开发·python·物联网·flutter·docker·gitee