docker部署前端项目，区分开发环境，生产环境 ～ 本文基本适用于所有前端工程化项目

通过docker部署前端项目，包括node服务～

稍微修改，也可以适用于所有前端框架。
简版demo请看上一篇文章。
https://blog.csdn.net/qq_40146880/article/details/112474594

本文使用next.js框架来做一个说明，其实和用什么框架并没有任何关系，基本通用

默认大家都装好了docker 和 docker-compose

先上一个package.json配置

"scripts": {
    "dev": "next -p 8081",
    // 测试环境
    "alpha": "./build.sh dbg",
    "dbg_build": "NODE_ENV=development next build",
    "dbg_start": "NODE_ENV=development next start -p 8080",
    // 生产环境
    "prod": "./build.sh m"
    "build": "next build",
    "start": "next start -p 8080",
 },

玩docker第一件事情，新建一个Dockerfile

FROM node:alpine
ARG DIST_DIR
COPY . /usr/share/nginx/${DIST_DIR}

上面我们复制了所有文件，但是有一些文件需要忽略掉，和git一样新建一个.dockerignore文件

# dependencies
# /node_modules # 如果使用挂载，首要忽略node_modules，其他都不是特别重要

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# vercel
.vercel

按照一般我们开发项目，不管是 vue，react，或者其他任何工程化项目…，都有一个环境变量的区分。
在这里我们不用来区分环境，只用来设置版本号。
.env文件

version="1.0.0"

使用docker-compose.yml来编排任务
./docker-compose-dbg.yml

version: '3.1'

services:
# 测试环境镜像任务
  cli_dbg:
    image: weike-robot_cli_dbg:${version}  # 当前镜像
    build: .
    working_dir: /usr/share/nginx/dbg # 执行工作区
    environment:
      - NODE_ENV=development
    volumes:
      # - ./node_modules:/usr/share/nginx/html/node_modules  # 如需挂载，则打开
    ports: # 端口映射
      - '8081:8080' 
    command: 'npm run dbg_start'  # 在docker中将测试环境跑起来
    restart: always
   

./docker-compose-m.yml

version: '3.1'

services:
# 正式环境镜像任务
  cli_m:
    image: weike-robot_cli_m:${version}
    build: .
    working_dir: /usr/share/nginx/m
    environment:
      - NODE_ENV=production
    ports:
      - '8080:8080'
    command: 'npm start'
    restart: always

接下来，我们写一个脚本build.sh来运行docker和docker-compose

# bash
set -e

pwd=$PWD 
source .env # 读取.env
version=$version # 将env的$version赋值给version

echo ""
echo ✔ $1 # 环境参数，默认m为生产环境，dbg为测试环境。
echo ✔ version: $version 
echo ""
 
function buildImage(){
    # 区分环境打包
    if [ $2 == 'dbg' ]; then 
        npm run dbg_build
    else
        npm run build
    fi

    dockerImage=weike-robot_$1:${version}
    echo ${dockerImage}
    # 使用 Dockerfile 创建镜像。
    docker build ${pwd} -t ${dockerImage} --build-arg DIST_DIR=$2 

    # 查看进程是否存在
    if [ `docker inspect --format '{{.State.Running}}' weike-robot_$1_1` == "true" ]; then
        # docker restart weike-robot_$1_1 # 重启容器
        echo " ---> 重启docker容器，容器名称：weike-robot_$1_1"
        echo y | docker image prune # 清除空,废弃镜像
    else
        echo " ---> 首次编译，容器名称：weike-robot_$1_1"
    fi

}

npm install
buildImage cli_$1 $1 # 传入环境参数，用以区分镜像
docker-compose -f docker-compose-$1.yml up -d # 执行docker-compose
echo " ---> $1环境，执行docker-compose-$1.yml"

完事，使用npm run alpha执行测试环境，使用npm run prod执行生产环境。

👇放两张成果展示一下～


以上就是docker部署了，后续有时间更新docker结合前端自动化部署。