一个vue项目如何运行在docker

将 Vue.js 应用程序通过 Docker 发布是一个非常常见的做法,它可以帮助你轻松地部署应用到不同的环境中。下面是一个简单的指南,介绍如何为 Vue.js 项目创建 Dockerfile 并进行构建和运行。

第一步:安装 Docker

确保你的开发机器上已经安装了 Docker。你可以从 Docker 官方网站下载并安装适合你操作系统的 Docker 版本。

第二步:准备 Vue.js 项目

如果你还没有 Vue.js 项目,可以使用 Vue CLI 创建一个新的项目:

bash 复制代码
npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

因为vue 项目需要nginx运行,需要一个配置文件nginx.conf,所以创文件

bash 复制代码
server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
}

包括文件目录如下

第三步:创建 Dockerfile

在项目的根目录下创建一个名为 Dockerfile 的文件,然后添加以下内容:

dockerfile 复制代码
# 复制 package.json 和 package-lock.json 到工作目录
COPY package*.json ./

# 安装依赖
RUN npm ci --only=production

# 如果有其他需要编译的资源(例如:Vue.js 应用),先复制所有文件
COPY . .

# 构建 Vue.js 应用
RUN npm run build

# 使用 nginxinc/nginx-unprivileged 镜像来服务 Vue.js 应用
FROM nginxinc/nginx-unprivileged:alpine

# 设置工作目录
WORKDIR /app

# 删除默认的 nginx html 文件夹,并将 Vue.js 应用复制到 nginx 的默认目录中
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 确保 nginx 配置文件正确
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 启动 nginx
CMD ["nginx", "-g", "daemon off;"]

这个 Dockerfile 分为两个阶段:构建阶段和运行阶段。构建阶段使用 Node.js 镜像来构建 Vue.js 应用,而运行阶段则使用 Nginx 镜像来服务构建好的静态文件。

第四步:构建 Docker 镜像

在包含 Dockerfile 的目录中打开终端,执行以下命令来构建 Docker 镜像:

bash 复制代码
docker build -t my-vue-app .

这里的 -t 参数用于指定镜像的名字,你可以根据自己的需求修改名字。

第五步:运行 Docker 容器

构建完成后,你可以使用以下命令来运行 Docker 容器:

bash 复制代码
docker run -p 8080:80 -d my-vue-app

这条命令会启动一个新的容器,并将容器内的 80 端口映射到宿主机的 8080 端口上。现在,你可以通过访问 http://localhost:8080 来查看你的 Vue.js 应用了。

第六步:推送镜像到 Docker Hub 或其他仓库

如果你想让其他人也能使用你的 Docker 镜像,可以将其推送到 Docker Hub 或其他 Docker 镜像仓库:

bash 复制代码
docker tag my-vue-app your-dockerhub-username/my-vue-app
docker push your-dockerhub-username/my-vue-app

这样就完成了 Vue.js 应用的 Docker 化过程。

相关推荐
雾江流7 分钟前
Olib 2.4.2 | 一款开源电子书下载软件,可以免梯免登录下载ZLibrary上的书籍
软件工程
小醉你真好13 分钟前
17、Centos9 安装 1Panel
linux·docker·运维开发
写不来代码的草莓熊43 分钟前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
二十雨辰1 小时前
eduAi-智能体创意平台
前端·vue.js
m0dw2 小时前
vue懒加载
前端·javascript·vue.js·typescript
M17迪Pq:00072 小时前
学会“做减法”之--用户体验优化
人工智能·贪心算法·产品运营·动态规划·软件工程
国家不保护废物2 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js
小光学长3 小时前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
麦麦大数据4 小时前
F029 vue游戏推荐大数据可视化系统vue+flask+mysql|steam游戏平台可视化
vue.js·游戏·信息可视化·flask·推荐算法·游戏推荐
insight^tkk5 小时前
【Docker】记录一次使用docker部署dify网段冲突的问题
运维·人工智能·docker·ai·容器