Docker 部署 Vue

2024-05-31 50

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在 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` 镜像来创建容器