项目编译构建常用的两种方式

一些项目发布平台通常对编译构建提供两种可选方式，一是通过shell脚本，二是通过dockerfile。以部署一个前端项目为例，简要说明两种方式。
一：使用shell脚本，先上脚本

#!/bin/bash
set -e
SCRIPTS_DIR=$(dirname $(realpath $0))
BASE=$(pwd)
[ -z "$ENV" ] && exit 1

target_dir=$BASE/dist
APP_NAME=pigeon
NPM_RUN_COMMAND="npm run build:$ENV"

mkdir -p output/bin

if [ "$ENV" != "dev" ] && [ "$ENV" != "test" ] && [ "$ENV" != "pre" ] && [ "$ENV" != "prod" ]; then
    echo "invalid profile, only support dev/test/pre/prod" && exit 1
fi

npm config set @xx:registry http://registry.m.xx.com
npm config set sass-binary-site http://npm.xxxxxx.org/mirrors/node-sass
npm install
$NPM_RUN_COMMAND
[ -z $target_dir ] && exit 1
cp -r $target_dir output/target
cp ${SCRIPTS_DIR}/control output/bin
[ -z $APP_NAME ] && exit 1
echo "APP_NAME=$APP_NAME" > output/bin/properties

简要说明以上脚本，按照个人习惯将以上脚本以空行形式分为五个小部分。
第一部分获取当前路径，以及判断env环境是否为空(env代表项目部署的环境，通常情况下是枚举值，个人习惯['pro', 'pre', 'test', 'dev']对应生产、预发、测试、本地四个环境)。
第二部分是设置打包完成后内容放置的路径、项目名称、以及使用的打包命令,均可按照个人习惯设置。
第三部分是放置发布内容的目录 mkdir [p] dirname(-p 确保目录存在，如果不存在就建立一个)。
第四部分判断在云翼上执行构建命令时是否选择了支持的环境，如果env的值不在['dev', 'test', 'pre', 'pro']中，退出脚本且提示相应信息
第五部分设置相关npm源,将上述打包命令生成的内容复制到第三步内容发布目录下，这里面也执行了几个判断，比如第二部分中的存放打包后内容的目录是否存在以及app_name是否存在等，其中/control为启动脚本,有了启动脚本,容器就知道怎么启动你的项目了,/control中通常都会有一个名称类似start()的函数。

start(){
    [ -d "$app_path" ] && rm -rf ${app_path}
    cp -r $BASE_DIR/target ${app_path}
    chown -R nginx:nginx ${app_path} 
}

二：使用dockerfile
使用dockerfile基本上就是配置参数了，通用内容大致如下

# stage 0
FROM node:10-alpine as build-stage
WORKDIR /app
COPY package*.json ./
ENV SASS_BINARY_SITE https://npm.xxxxxx.org/mirrors/node-sass/
ARG NPMREGISTRY='https://registry.npm.xxxxxx.org'
RUN npm install --registry=$NPMREGISTRY
# RUN npm install --registry=http://registry.m.xx.com
COPY . .
RUN npm run build-prod --silent

# stage 1 (nginx)
FROM nginx:1.18-alpine
COPY config/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 8081

三：附属说明
1.文中出现的http://registry.m.xx.com 理论上是不能访问的，因为xx代替的内容是名称简写hhh(这片水文一开始被隐藏了，估计就是因为xx)
2.这个水文是以前端项目为例，写的时候恰好有小伙伴问怎么切换npm源，步骤如下

npm i nrm -g (nrm是npm资源管理器，可以快速切换npm源)
nrm add xx xx的url
nrm use xx

3.文中如有问题，还请多多指教，感恩