当前位置: 首页 > 工具软件 > docker-npm > 使用案例 >

使用docker-compose部署Vue、react脚本

阎璞瑜
2023-12-01

受限于node环境的苦恼,写了一个通用的docker-compose脚本。

作用:可灵活切换node版本,一件部署。

操作流程:

  1. 在node项目(Vue、react)工作目录下创建DockerFile和docker-compose.yml文件
  2. 在DockerFile中输入对应内容(下面给出,可以固定化)
  3. 在docker-compose.yml中输入内容(下面给出,也强标注了对应命令)
  4. 运行docker-compose up -d

详细操作

  1. 在node项目(Vue、react)工作目录下创建DockerFile和docker-compose.yml文件
    1. 例如,Vue项目工作目录为:/home/use/workspace/shop,Vue的代码都在shop下,就在shop下创建DockerFile和docker-compose.yml文件
    2. 注意:工作目录路径中不能有其它特殊字符,-也不行,可以有_
  2. 在DockerFile中输入对应内容(下面给出,可以固定化)
    1.  在node后面指定对应node版本号
      1. # 需要安装的node的版本
        FROM node:14.19.1-alpine3.14
        # 将当前目录(dockerfile和docker-compose.yml所在的目录)映射到容器中/www/webl目录下
        ADD  ./ /www/web
        # 在容器中创建工作目录 /www/web
        WORKDIR /www/web

  3. 在docker-compose.yml中输入内容(下面给出,也强标注了对应命令)
    1. 在command指定要run start还是build
      version: '3.8'  # docker-compose的版本
      services:
        node:
          build:
            context: .  # 使用上下文为当前
            dockerfile: DockerFile 
          volumes:
            - ./:/www/web  # 把本地目录挂载到虚拟机的/www/web/下
          command: sh -c "cd /www/web && npm install && npm start"  # 开发调试用npm start,部署改为npm run build
          ports:
            - "13001:3000"  # 端口映射自定义,13001是宿主机端口,3000是Vue、react的端口
          stdin_open: true  # 启用输入

  4. 运行docker-compose up -d
    1. # 在工作目录下(DockerFile和docker-compose.yaml所在目录),执行
      # 后台启动
      docker-compose up -d
      # 查看日志
      docker-compose logs -f

 类似资料: