docker部署前端项目（四）

1、一直想使用docker 部署多个前端项目

咨询了几个方案走不通，他们使用的是 创建 Nginx 容器
或者 直接 用 NGINX 起项目 跟我的路子 用docker 和 dockerfile 来部署 不太一样

所以使用了自己的方法：

方案 : 一个容器对应一个前端项目
对于每一个前端项目，创建一个单独的Docker镜像。这意味着你需要分别为每个项目准备一个Dockerfile。下面是基本步骤：

创建Dockerfile：在每个前端项目的根目录下创建一个Dockerfile。这个文件应该包含必要的指令来构建应用，比如基于Node.js镜像，复制源代码，安装依赖，构建生产静态文件，然后使用Nginx或其他Web服务器来服务这些静态文件。

例如，对于Vue项目，Dockerfile如下：

# bash复制代码# 使用 Node.js 16 作为基础镜像
FROM node:16

# 将当前工作目录设置为/app
WORKDIR /app

# 将 package.json 和 package-lock.json 复制到 /app 目录下
COPY package*.json ./

# 运行 npm install 安装依赖
RUN npm install

# 将源代码复制到 /app 目录下
COPY . .

# 打包构建
RUN npm run build

# 将构建后的代码复制到 nginx 镜像中
FROM nginx:latest
COPY --from=0 /app/dist /usr/share/nginx/html

# 暴露容器的 8080 端口，此处其实只是一个声明作用，不写的话也可以，后面运行容器的
# docker run --name container_name -p <host_port>:<container_port>命令中container_port可以覆盖此处的声明，不写就默认80端口
EXPOSE 80

# 启动 nginx 服务
CMD ["nginx", "-g", "daemon off;"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

构建镜像：在每个项目的目录中，运行以下命令来构建Docker镜像：

命令：注意是一个项目一个镜像

docker build -t my-frontend1 .
docker build -t my-frontend2 .
1
2

运行容器：为每个镜像启动一个容器，指定不同的端口映射：

命令：

docker run -d -p 8080:80 my-frontend1
docker run -d -p 8081:80 my-frontend2
1
2

如何部署多个前端项目：

如果遇到构建的时候，一直找不到问题，就可以清理一下缓存数据

清理构建缓存和其他无用数据:
docker system prune -af
清理缓存与重新构建
docker build --no-cache -t your-image-name .
1
2
3
4