Docker 部署 Vue

简介: 在 Docker 中使用 Node 和 Nginx 基础镜像来部署一个 Vue 项目,通常可以按照以下步骤进行。这些步骤涵盖了从构建 Vue 项目到配置 Dockerfile 和 Nginx 的过程。

创建 Dockerfile

在Vue.js项目根目录下创建一个 Dockerfile 的文件

# 使用最新的官方 Node.js 镜像作为基础镜像,并命名为 `builder` 阶段
FROM node:latest AS builder

# 设置工作目录  
WORKDIR /app

# 将当前目录下的所有文件复制到容器的工作目录 `/app` 中
COPY . .

# 在容器中安装项目依赖
RUN npm install

# 在容器中构建项目
RUN npm run build

# 使用轻量级的官方 Nginx 镜像作为基础镜像
FROM nginx:alpine

# 时区
ENV TZ=Asia/Shanghai

# 本地的 `nginx.conf` 文件复制到容器的 `/etc/nginx/conf.d/default.conf`
COPY nginx.conf /etc/nginx/conf.d/default.conf

# `builder` 阶段中复制构建好的文件到 Nginx 容器的网页根目录 `/usr/share/nginx/html`
COPY --from=builder /app/dist /usr/share/nginx/html

创建 Nginx 配置文件

在Vue.js项目根目录创建一个 nginx.conf 文件

gzip on;

server {
   
    listen 80;
    server_name localhost;

    location / {
   
        # Vue.js应用目录
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
}

构建 Docker 镜像

在Vue.js项目根目录下运行Docker构建镜像命令

docker build -t vue-app:1.0 .
选项或参数 含义
docker build 命令,用于从Dockerfile构建一个新的Docker镜像
-t vue-app:1.0 为构建的镜像指定一个标签(tag),这里是 vue-app:1.0
. 指定构建上下文的路径,这里是当前目录

运行 Docker 容器

运行你的Vue.js应用容器命令

docker run -d --restart=always --name vue-app -p 5000:80 vue-app:1.0
选项或参数 含义
docker run 命令,用于创建并运行一个新的容器
-d 以分离模式(后台)运行容器
--restart=always 容器退出时总是重新启动(无论退出代码是什么),在Docker守护进程启动时也重新启动
--name vue-app 给容器指定一个名称为 vue-app
-p 5000:80 将主机的5000端口映射到容器的80端口
vue-app:1.0 使用 vue-app:1.0 镜像来创建容器

现在,你的Vue.js应用应该可以通过浏览器访问了,地址为 http://localhost:5000。

目录
相关文章
|
1月前
|
Kubernetes Docker Python
Docker 与 Kubernetes 容器化部署核心技术及企业级应用实践全方案解析
本文详解Docker与Kubernetes容器化技术,涵盖概念原理、环境搭建、镜像构建、应用部署及监控扩展,助你掌握企业级容器化方案,提升应用开发与运维效率。
445 108
|
1月前
|
运维 Devops 持续交付
揭秘 Docker 自动部署神器 Websoft9:热门开源软件一键部署
在企业IT建设中,软件部署常面临效率低、易出错等问题。通过Docker与自动化工具,可实现高效、标准化和可追溯的部署流程,提升企业应用交付效率,降低运维门槛,助力中小企业实现自动化部署。
147 5
揭秘 Docker 自动部署神器 Websoft9:热门开源软件一键部署
|
17天前
|
JavaScript 算法 前端开发
【Docker项目实战】使用Docker部署paopao-ce微社区
【Docker项目实战】使用Docker部署paopao-ce微社区
172 84
【Docker项目实战】使用Docker部署paopao-ce微社区
|
27天前
|
运维 Cloud Native 开发者
Docker:现代化应用开发与部署的神器
Docker:现代化应用开发与部署的神器
173 101
|
1月前
|
设计模式 Linux 开发工具
Docker部署会吗?
本段内容主要介绍了Docker常用命令、Linux基础指令及日志查看方法,还涉及SpringMVC的执行流程、设计模式与注解,适合用于面试中技术能力的展示。
81 0
|
9天前
|
存储 Docker Python
docker 部署 sftp
本文介绍SFTP服务的部署与配置,包括users.conf用户配置规则、Docker容器运行命令及上传目录权限说明,重点解析atmoz/sftp镜像的chroot机制与子目录映射,确保用户登录后正确访问/upload目录,并提供Python脚本实现文件上传示例。
51 12
docker 部署 sftp
|
10天前
|
运维 Linux 数据库
基于 Docker 部署 n8n 指南,新手一看就会
本教程详解如何通过 Docker 快速部署开源自动化工具 n8n,适合新手快速上手。内容涵盖官方部署步骤、常见难点及第三方一键部署方案,助你高效搭建自动化工作流平台。
203 6
|
16天前
|
前端开发 JavaScript 应用服务中间件
在Docker部署的前端应用中使用动态环境变量
以上步骤展示了如何在 Docker 配置过程中处理并注入环墨遁形成可执行操作流程,并确保最终用户能够无缝地与之交互而无须关心背后复杂性。
60 13
|
20天前
|
存储 Kubernetes 持续交付
为什么Docker容器化改变了开发与部署?
为什么Docker容器化改变了开发与部署?
|
1月前
|
关系型数据库 MySQL 数据库
为什么 MySQL 不推荐用 Docker 部署?
本文探讨了MySQL是否适合容器化的问题,分析了Docker容器在数据安全、性能瓶颈、状态管理及资源隔离等方面的挑战,并指出目前主流分布式数据库如TDSQL和OceanBase仍倾向于部署在物理机或KVM上。
102 0