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;"]

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

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

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

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

命令:

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

如何部署多个前端项目:

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

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

相关推荐

  1. docker部署前端项目

    2024-04-27 07:28:05       17 阅读
  2. 前端项目docker部署

    2024-04-27 07:28:05       31 阅读
  3. Docker部署前后项目

    2024-04-27 07:28:05       14 阅读
  4. docker:安装nginx并部署一个前端项目

    2024-04-27 07:28:05       31 阅读
  5. docker部署前端项目(三)简易迅速版本

    2024-04-27 07:28:05       14 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-27 07:28:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-27 07:28:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-27 07:28:05       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-27 07:28:05       20 阅读

热门阅读

  1. NPM简介

    2024-04-27 07:28:05       14 阅读
  2. Mac运行npm run serve报错opensslErrorStack

    2024-04-27 07:28:05       16 阅读
  3. B站秒杀项目学习心得

    2024-04-27 07:28:05       16 阅读
  4. Elasticsearch简介及安装

    2024-04-27 07:28:05       15 阅读
  5. 数据结构常见算法

    2024-04-27 07:28:05       14 阅读
  6. go中标签创建与引用

    2024-04-27 07:28:05       13 阅读
  7. Android常用开源库所使用的设计模式有哪些?

    2024-04-27 07:28:05       15 阅读
  8. sym和syms--Matlab学习

    2024-04-27 07:28:05       17 阅读
  9. 大模型流式任务转发终结篇python版本实现

    2024-04-27 07:28:05       15 阅读
  10. Ajax学习笔记

    2024-04-27 07:28:05       13 阅读