阅读数:7 评论数:0

一、准备vue项目

1、确保项目可以正常运行。

project-root/
├── dist/               # Vue 构建后的静态文件
├── nginx.conf          # （可选）自定义 Nginx 配置文件
├── Dockerfile          # Docker 构建文件
├── package.json
└── src/

2、执行以下命令来安装依赖并构建项目

npm install
npm run build

3、构建完成后，会在项目根目录生成一个dist文件夹，包含用于部署的静态资源。

二、创建Dockerfile

在项目根目录创建一个名为 Dockerfile 的文件，用于定义如何构建 Docker 镜像。以下是一个示例：

# 使用 Nginx 作为基础镜像
FROM nginx:alpine

# 维护者信息（可选）
LABEL maintainer="your_email@example.com"

# 删除默认的 Nginx 配置文件
RUN rm -rf /usr/share/nginx/html/*

# 将项目的静态资源拷贝到 Nginx 的默认目录
COPY dist /usr/share/nginx/html

# 替换 Nginx 配置文件（可选）
# COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 80

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

三、（可选）自定义Nginx配置

如果需要自定义 Nginx 的行为，可以在项目根目录创建一个 nginx.conf 文件，并将其添加到 Dockerfile 中：

1、nginx.conf

server {
    listen 80;
    server_name localhost;

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

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

2、Dockerfile中修改

COPY nginx.conf /etc/nginx/conf.d/default.conf

四、构建 Docker镜像

在项目根目录运行以下命令：

docker build -t vue-app .

• vue-app 是镜像的名称，可以根据需要修改。
• . 指定当前目录为构建上下文。

五、运行Docker容器

构建完成后，使用以下命令运行容器：

docker run -d -p 8080:80 --name vue-container vue-app

• -d：后台运行容器。
• -p 8080:80：将主机的 8080 端口映射到容器的 80 端口。当然也可以直接使用-p 80:80来映射主机80端口。
• --name vue-container：为容器指定名称。
• vue-app：前面构建的镜像名称。

访问 http://localhost:8080 即可查看项目。

1、关于80端口

（1）权限问题

非 root 用户运行容器时无法绑定到主机的 80 端口（低于 1024 的端口需要特权）。

sudo docker run -d -p 80:80 --name nginx-container nginx

（2）使用--network host（直接使用主机网络）

在某些场景下，可以使用 Docker 的主机网络模式，使容器直接使用主机的网络。

这种模式下，容器中的服务将直接监听主机的端口（如 80 端口），无需额外映射。

docker run -d --network host --name nginx-container nginx

--network host 模式仅适用于 Linux 主机，不支持 Docker Desktop（Windows/Mac）。

六、推送到Docker Registry(可选)

如果需要将镜像推送到 Docker Hub 或私有镜像仓库：

1、登录 Docker Hub

docker login

2、给镜像打标签

docker tag vue-app your_dockerhub_username/vue-app:latest

3、推送镜像

docker push your_dockerhub_username/vue-app:latest