Docker部署Vue前端项目

本文详细介绍了如何使用Vue CLI构建前端应用,并通过Docker将打包后的项目部署到Nginx容器中,涉及构建、压缩、Dockerfile配置和运行命令。

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

V u e 前 端 项 目 镜 像 构 建 与 部 署 Vue前端项目镜像构建与部署 Vue

一 通过Vue_cli打包vue

1.1 打包

npm run build

1.2 压缩成zip文件包

在这里插入图片描述

二 Docker部署

2.1 Dockerfile进行Nginx镜像制作

FROM centos:7
LABEL maintainer major_s
RUN yum install -y gcc gcc-c++ make \
    openssl-devel pcre-devel gd-devel \
    iproute net-tools telnet wget curl && \
    yum clean all && \
    rm -rf /var/cache/yum/*

ADD nginx-1.15.5.tar.gz /
RUN cd nginx-1.15.5 && \
    ./configure --prefix=/usr/local/nginx \
    --with-http_ssl_module \
    --with-http_stub_status_module && \
    make -j 4 && make install && \
    mkdir /usr/local/nginx/conf/vhost && \
    cd / && rm -rf nginx* && \
    ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

ENV PATH $PATH:/usr/local/nginx/sbin
COPY nginx.conf /usr/local/nginx/conf/nginx.conf
WORKDIR /usr/local/nginx
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

docker run -d -v /opt/wwwroot:/usr/local/nginx/html --name front_pro -p 9090:80 ngnix:v1
### 如何使用 Docker 部署 Vue.js 前端应用 要通过 Docker 部署 Vue.js 前端应用程序,可以按照以下方法完成构建和运行流程。以下是详细的解释: #### 构建 Dockerfile 为了将 Vue.js 应用程序容器化,需要创建一个 `Dockerfile` 文件。此文件定义了如何构建镜像以及运行容器。 ```dockerfile # 使用官方 Node.js 镜像作为基础镜像 FROM node:14 AS build-stage # 设置工作目录 WORKDIR /app # 将 package.json 和 package-lock.json 复制到容器中 COPY package*.json ./ # 安装依赖项 RUN npm install # 将源代码复制到容器中 COPY . . # 执行构建过程 RUN npm run build # 第二阶段:生产环境 FROM nginx:alpine # 创建 Nginx 的静态文件目录 COPY --from=build-stage /app/dist /usr/share/nginx/html # 暴露 80 端口供外部访问 EXPOSE 80 # 启动 Nginx 服务 CMD ["nginx", "-g", "daemon off;"] ``` 上述脚本分为两个阶段: 1. **Build Stage**: 使用 Node.js 镜像安装依赖并执行构建命令。 2. **Production Stage**: 利用轻量级的 Nginx 镜像提供静态资源[^1]。 --- #### 编写 docker-compose.yml (可选) 如果希望简化多容器管理,还可以引入 `docker-compose.yml` 来编排整个部署流程。 ```yaml version: '3' services: app: container_name: vue-frontend-container build: context: . dockerfile: Dockerfile ports: - "80:80" restart: always ``` 在此配置中,指定了单个服务 (`app`) 并将其映射至主机的 80 端口上[^4]。 --- #### 构建与运行容器 在项目根目录下依次执行以下命令即可完成构建和启动: ```bash # 构建镜像 docker build -t vue-frontend-image . # 运行容器 docker run -d -p 80:80 vue-frontend-image ``` 或者利用 Compose 工具一键启动: ```bash docker-compose up -d ``` 这一步骤会自动拉取必要的基础镜像,并基于本地代码生成最终的应用镜像[^2]。 --- #### 动态更新与 CI/CD 流程支持 对于频繁迭代的需求场景,建议结合 Webhook 或 Git Hook 实现自动化发布机制。例如,在检测到远程仓库的新提交后触发重新构建动作;随后停止旧版实例再启动新版实例[^3]。 具体实现细节可能涉及如下工具链组合: - GitHub/GitLab Actions - Jenkins/Pipeline 脚本 - 自定义 Shell/Bash 脚本调用 API 接口通知目标机器刷新状态 --- ### 注意事项 - 如果前端工程较大,则需优化层缓存策略减少重复下载时间消耗; - 对于 HTTPS 场景记得调整 SSL/TLS 参数适配实际需求; - 生产环境下考虑启用 gzip 压缩功能提升传输效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值