[JavaScript知识库]使用docker-compose部署Vue、react脚本

受限于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

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖