通過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結合前端自動化部署，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/248647.html
標籤：區塊鏈
上一篇：一級市場與二級市場