稍微修改,也可以适用于所有前端框架。
简版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
执行生产环境。