如何使用 docker 在本地部署 vite 项目

如何使用 docker 在本地部署 vite 项目

  1. 创建 Dockerfile 文件
  2. 创建.dockerignore 文件
  3. 构建镜像
  4. 运行容器

1. 创建 Dockerfile 文件

# 使用官方的 Node 镜像作为基础镜像
FROM node:16.15.1

# 设置工作目录
WORKDIR /usr/src/app

# 将本地的 Vite 项目文件复制到工作目录
COPY . .

# 安装依赖
RUN npm install

# 执行 Vite 构建命令,生成 dist 目录
RUN npm run build

# 使用 Nginx 镜像作为运行时镜像
FROM nginx:latest

# 将 Vite 项目的 dist 目录复制到 Nginx 的默认静态文件目录
COPY --from=0 /usr/src/app/dist /usr/share/nginx/html

# 暴露容器的 80 端口
EXPOSE 80

# Nginx 会在容器启动时自动运行,无需手动设置 CMD

2. 创建 .dockerignore 文件

node_modules
dist

3. 构建镜像

docker build -t vite-app .

4. 运行容器

docker run -d -p 8080:80 vite-app

5. 访问

直接访问 http://localhost:8080 即可看到效果

注意

  1. 不能直接复制本地的 nodemodels 文件夹到容器中,因为容器中的 node 环境和本地的 node 环境不一样,所以需要重新安装依赖,且 docker 镜像中使用的是 linux 系统,所以安装的依赖也是 linux 版本的,如果本地是 windows 系统,那么就不能直接复制本地的 node_modules 文件夹到容器中,因为 windows 和 linux 的 node_modules 文件夹是不一样的,所以需要重新安装依赖。
  2. 文中的 80 端口是容器内部的端口,8080 端口是容器外部的端口,所以访问的时候需要使用 8080 端口,而不是 80 端口。
  3. 文中的 COPY --from=0 /usr/src/app/dist /usr/share/nginx/html 命令是将第一个 FROM 的容器中的 /usr/src/app/dist 目录复制到第二个 FROM 的容器中的 /usr/share/nginx/html 目录,这样就可以将 vite 项目的 dist 目录复制到 nginx 的默认静态文件目录中,从而可以通过访问 nginx 的默认静态文件目录来访问 vite 项目。
### 如何在 Docker Desktop 上部署 Vue 应用 #### 准备工作 为了能够在本地机器上通过 Docker 运行一个 Vue.js 应用,需要准备几个前提条件。确保已经安装并配置好 Docker Desktop 和 Node.js 开发环境。 #### 创建项目结构 建立一个新的文件夹用于存放 Vue 项目的源码以及后续所需的 `Dockerfile` 文件。如果使用 Maven 构建工具,则可以参照类似的思路来管理资源文件[^3]。 ```bash mkdir vue-docker-app && cd $_ npm init vite@latest my-vue-app --template vue cd my-vue-app ``` #### 编写 Dockerfile 在一个名为 `Dockerfile` 的文本文件里定义镜像构建指令: ```dockerfile # 使用官方 Nginx 镜像作为基础镜像 FROM nginx:alpine # 设置工作目录 WORKDIR /usr/share/nginx/html # 将当前目录下的 dist 文件复制到容器内的指定位置 COPY ./dist . # 暴露端口给外部访问,默认情况下 Nginx 占用80端口 EXPOSE 80 ``` 在此之前,需先编译 Vue 项目以生成静态页面至 `dist/` 目录下: ```bash npm run build ``` #### 构建与运行容器 利用上述创建好的 `Dockerfile` 来制作自定义的 Docker 映像,并启动相应的服务实例。注意要将宿主机上的某个可用端口号映射到容器内部的服务监听地址上去[^2]。 ```bash docker build -t my-vue-app . docker run -d -p 8080:80 my-vue-app ``` 此时应该可以通过浏览器访问 http://localhost:8080 查看已成功发布的 Vue 应用了。 #### 推送至远程仓库 当测试无误之后还可以考虑把构建完成后的镜像推送到公共或私有的注册中心以便于团队协作共享或者持续集成流程中的自动化部署操作[^1]。 ```bash docker tag my-vue-app username/my-vue-app:v1.0.0 docker login docker push username/my-vue-app:v1.0.0 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

易风920

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值