項目編譯構建經常使用的兩種方式

一些項目發佈平臺一般對編譯構建提供兩種可選方式，一是經過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.文中若有問題，還請多多指教，感恩