Dockerfile部署Vue项目

博客介绍了Vue项目基于Nginx和Docker的部署流程。先安装Nginx,拉取其最新镜像并运行容器;接着打包Vue项目,编译后生成静态文件;然后在Linux空目录构建Dockerfile,设置基础镜像并复制文件;最后构建镜像、生成容器,若容器停止则启动,可通过指定地址访问。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 安装Nginx
    部署Vue项目依赖Nginx,首先拉取Nginx的镜像,这里使用Nginx最新的镜像,然后根据Nginx镜像运行容器。

    docker pull nginx
    # -d参数:容器启动后会进入后台。
    # -p参数:容器的80端口映射到本机的4030端口。
    docker run --name nginx -d -p 4030:80 nginx
    

    在这里插入图片描述

  2. 打包Vue项目
    编译项目,编译完成之后,在项目的根目录下面就会生成一个dist-production文件夹,里面都是一系列的静态文件。

    npm run build
    

    在这里插入图片描述

  3. 构建Dockerfile
    Linux上找个空目录放项目文件和Dockerfile。

    vi Dockerfile
    

    Dockerfile文件内容:

    设置基础镜像,这里使用最新的Nginx镜像,前面已经拉取过了。将dist-production文件中的内容复制到 /usr/share/nginx/html/这个目录下面。

    FROM nginx
    COPY dist-production/ /usr/share/nginx/html/
    
  4. 构建镜像

    # -t参数:指定image文件的名字,后面还可以用冒号指定标签。如果不指定,默认的标签就是latest。
    # .:表示Dockerfile文件所在的路径,是当前路径,所以是一个点。
    docker build -t dockervue .
    

    在这里插入图片描述

  5. 生成容器

    # --name参数:指定容器名称。
    # -d参数:容器启动后会进入后台。
    # -p参数:容器的80端口映射到本机的8081端口。
    docker run --name dockervue -d -p 8081:80 dockervue
    

    在这里插入图片描述

    # -p参数:容器的 80 端口映射到本机的 8081 端口。
    # -it参数:容器的 Shell 映射到当前的 Shell,然后你在本机窗口输入的命令,就会传入容器。
    # dockervue:image 文件的名字。
    /bin/bash:容器启动以后,内部第一个执行的命令。这里是启动 Bash,保证用户可以使用 Shell。
    docker container run --name dockervue -p 8081:80 -it dockervue /bin/bash
    

    如果容器停止,则启动容器,使用下面命令进入容器。

    docker ps -a
    docker restart 容器ID
    docker exec -it 容器ID /bin/bash
    
  6. 访问192.168.137.4:8081
    在这里插入图片描述

### 如何在 KubeSphere 上部署 Vue.js 项目 #### 准备工作 为了成功地在 KubeSphere 平台上部署 Vue.js 项目,需先完成一些准备工作。这包括但不限于安装并配置好 KubeSphere 环境以及准备好待发布的 Vue 应用程序源码。 #### 创建 DevOps 工程 进入 KubeSphere 控制台,在目标的工作空间内创建一个新的 DevOps 工程用于承载整个 CI/CD 流水线流程[^2]。 #### 配置 Git 源仓库 通过集成 GitHub 或其他支持的版本控制系统来指定项目的代码库地址,以便后续能够自动拉取最新版次的应用代码进行构建处理[^1]。 #### 构建与测试阶段 利用内置工具链执行 npm install 安装依赖包操作;随后运行必要的单元测试确保应用质量稳定可靠。此过程可通过编写 Jenkinsfile 来定义具体的任务指令集实现自动化控制。 ```groovy pipeline { agent any stages { stage('Checkout') { steps { git 'https://github.com/example/vue-app.git' } } stage('Install Dependencies') { steps { sh 'npm ci' } } stage('Build Application') { steps { sh 'npm run build' } } // Add more stages as needed... stage('Test') { steps { sh 'npm test' } } } } ``` #### 打包 Docker 镜像 当所有前期准备就绪之后,则可以着手制作应用程序对应的容器化镜像文件。通常情况下会采用官方 Node.js 基础映像作为起点,并在其之上添加自定义设置项以满足特定业务需求。 ```dockerfile FROM node:lts-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci --only=production COPY . . RUN npm run build FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` #### 推送至私有仓库 构建完成后应立即将新生成的镜像推送到预先设定好的 Harbor 私有注册中心里保存起来供以后调用。这一环节同样可以在 Jenkins Pipeline 中加入相应命令行脚本来简化操作步骤。 #### 发布到 Kubernetes 最后一步就是把之前做好的镜像资源正式上线发布出去啦!借助 Helm Chart 描述符文档描述服务组件间关系结构图谱,再配合 kubectl CLI 实现一键式快速部署效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值