#! /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 @jd:registry http://registry.m.xx.com
npm config set sass-binary-site http://npm.taobao.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/propertiesCopy the code

Briefly explain the above script, breaking it down into five small, blank lines, as is my custom. The first part gets the current path and determines if the env environment is empty (env represents the environment in which the project is deployed and is usually an enumeration value, I’m used to [‘pro’, ‘pre’, ‘test’, ‘dev’] for production, pre-release, test, and local). The second part is to set the path of content placement after packaging, project name, and packaging command to use, which can be set according to personal habits. The third part is the directory where the published content is placed mkdir [p] dirname(-p make sure the directory exists and create one if it doesn’t). If env is not in [‘dev’, ‘test’, ‘pre’, ‘pro’], exit the script and prompt the corresponding message. /control is the start script, and the container knows how to start your project. /control usually has a function named start().

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

Using dockerfile is basically a configuration parameter, the general content is roughly as follows

# stage 0
FROM node:10-alpine as build-stage
WORKDIR /app
COPY package*.json ./
ENV SASS_BINARY_SITE https://npm.taobao.org/mirrors/node-sass/
ARG NPMREGISTRY='https://registry.npm.taobao.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)The FROM nginx: 1.18 - alpine COPY the config/nginx. Conf/etc/nginx/conf. D/default. Conf COPY - FROM = build - stage/app/dist /usr/share/nginx/html EXPOSE 8081Copy the code

1. In the text, http://registry.m.xx.com is theoretically inaccessible, because xx is the abbreviation of the content, XXXXXX is another name, HHH 2. This hydrological project takes the front-end project as an example. When WRITING, a friend asked how to switch the NPM source. The steps are as follows

NPM I NRM -g (NRM is the NPM resource manager and can quickly switch between NPM sources.) NRM add xx XX URL NRM use xxCopy the code

3. If you have any questions, please give me more advice. Thanks