docker部署本地前端项目思路

1. 准备工作

确保你已经在你的Mac上安装了Docker Desktop，并且它正在运行。

2. 创建Vue3项目

如果你还没有一个Vue3项目，可以使用create-vue脚手架来创建：

npm init vue@latest

3. 创建Dockerfile

在项目根目录下创建一个Dockerfile文件，这个文件将告诉Docker如何构建你的镜像。一个基本的Dockerfile可能如下所示：

# 使用官方Nginx镜像作为基础镜像
FROM nginx:latest

# 设置维护者信息
LABEL maintainer="刘伟"

# 清除默认的Nginx配置文件
RUN rm /etc/nginx/conf.d/default.conf

# 将自定义的nginx配置文件复制到容器中
COPY ./nginx.conf /etc/nginx/conf.d/

# 创建用于存放前端静态文件的目录
RUN mkdir -p /usr/share/nginx/html

# 将构建好的前端静态文件复制到Nginx的html目录下
COPY ./dist /usr/share/nginx/html

# 暴露端口，以便主机可以访问
EXPOSE 80

# 设置容器启动时执行的命令，确保Nginx正常运行
CMD ["nginx", "-g", "daemon off;"]

同时，你可能需要一个nginx.conf文件来配置Nginx服务，例如：

worker_processes  1; 
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

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

4. 创建.dockerignore文件

在项目根目录下创建.dockerignore文件，以排除不需要复制到镜像中的文件或目录：

node_modules/
.yarn/
dist/

5. 构建Docker镜像

在项目根目录下运行以下命令来构建镜像：

docker build -t your-image-name .

6. 运行Docker容器

使用以下命令运行容器：

docker run -d -p 8080:80 --name your-container-name your-image-name

这将启动容器并将其映射到主机的8080端口。

7. 访问应用

在浏览器中输入http://localhost:8080来访问你的Vue3应用。

8. 使用Docker Compose（可选）



version: '3'
services:
  web:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./dist:/usr/share/nginx/html
    networks:
      - frontend
      - backend

  backend:
    image: node:latest
    volumes:
      - ./src:/usr/src/app
    networks:
      - backend

networks:
  frontend:
    driver: bridge
  backend:
    driver: bridge

如果你有多个服务需要一起管理，可以使用Docker Compose。创建一个docker-compose.yml文件，并定义你的服务，然后用docker compose up命令启动所有服务。

以上步骤应该可以帮助你在Mac上使用Docker部署Vue3前端项目。如果遇到任何问题，检查Docker的日志输出，通常可以提供错误信息帮助你解决问题。