Last active
November 11, 2018 16:23
-
-
Save yukal/d669d84ae92a10eab020cabc3e3f8216 to your computer and use it in GitHub Desktop.
Serving a vuejs project using docker and webpack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/bin/sh | |
# Author: Yukal Alexander <[email protected]> | |
# License MIT | |
# Version: 2.0 | |
# Usage: | |
# * $ ./docker-vuejs init - Init Project (starts 'vue init webpack .') | |
# - $ ./docker-vuejs - Start Project (starts 'webpack-dev-server') | |
# $ ./docker-vuejs clean - Remove Project | |
# $ ./docker-vuejs clean-folder - Remove files and directories except for app.sh | |
# $ ./docker-vuejs clean-docker - Remove the Docker files of the project | |
APPNAME="appvue" | |
WORKDIR="/app" | |
IMAGE="node:10-alpine" | |
PORT_EXT=8080 #External | |
PORT_INN=8080 #Internal | |
PORTS="$PORT_EXT:$PORT_INN" | |
SCRIPT_NAME=$(basename -- $0) | |
SCRIPT=$WORKDIR/$SCRIPT_NAME | |
function PKG_ABSENT { return `which "$1" 2>/dev/null | grep -cm1 "$1"`; } | |
function IMG_ABSENT { return `docker images 2>/dev/null | grep -cm1 "$1"`; } | |
function MSG_TITLE { echo -e "\n#\033[32m $1 ...\033[0m\n# ========================\n"; } | |
function MSG_ERROR { echo -e "\033[31m${1}\033[0m"; } | |
function UCFIRST { FIRST[1]=${1:0:1}; echo ${FIRST[@]^}${1:1}; } | |
function CONFIRM { | |
printf '\e[1;37m%s\e[0m (y/n) ' "$1" | |
read -n 1 -r; echo; | |
if [[ $REPLY =~ ^[Yy]$ ]]; then return 0; else return 1; fi | |
} | |
function REQUIRED { | |
if PKG_ABSENT "$1"; then | |
pkgname=$(UCFIRST "$1") | |
MSG_ERROR "$pkgname requred! Please install it first" | |
exit 1 | |
fi | |
} | |
clean_folder() { | |
find . -mindepth 1 -maxdepth 1 -not -name "$SCRIPT_NAME" -print0 | xargs -0 -I {} rm -fr {} | |
} | |
clean_docker() { | |
MSG_TITLE "Trying to remove docker files" | |
# Remove container and volumes | |
docker container rm -fv "$APPNAME" | |
# Remove image and network | |
docker image rm -f "$APPNAME" | |
docker network rm "${APPNAME}_network" | |
# Remove unnamed images and volumes | |
if CONFIRM "Remove unnamed images and volumes?"; then | |
docker rmi $(docker images -qf "dangling=true") | |
fi | |
} | |
clean_project() { | |
clean_docker; | |
clean_folder; | |
} | |
read -r -d '' DOCKERFILE << EOM | |
FROM $IMAGE | |
#RUN npm install -g vue-cli | |
EXPOSE $PORT_EXT | |
CMD ["npm", "run", "dev"] | |
EOM | |
if [ ! -f /.dockerenv ]; then | |
# Entry for a host machine environment | |
# Removes files and directories except for docker-vuejs | |
if [ "$1" == "clean-folder" ]; then | |
clean_folder; | |
exit 0; | |
fi | |
REQUIRED "docker"; | |
# Removes the Docker files of the project | |
if [ "$1" == "clean-docker" ]; then | |
clean_docker; | |
exit 0; | |
fi | |
# Removes the project source | |
if [ "$1" == "clean" ]; then | |
clean_project; | |
exit 0; | |
fi | |
# Init project | |
if [ "$1" == "init" ]; then | |
# Remove unnamed images and volumes | |
if CONFIRM "Remove old docker files of the project?"; then | |
clean_project; | |
fi | |
echo -e "$DOCKERFILE" > Dockerfile; | |
docker run -it --rm --name $APPNAME -p "$PORTS" -v "$PWD":"$WORKDIR" -w "$WORKDIR" $IMAGE sh $SCRIPT $1 "$UID:$GROUPS" | |
fi | |
# Build an image | |
if IMG_ABSENT "$APPNAME"; then | |
MSG_TITLE "Building an image" | |
docker build --no-cache --tag $APPNAME . | |
fi | |
# Start project | |
docker run -it --rm --name $APPNAME -p "$PORTS" -v "$PWD":"$WORKDIR" -w "$WORKDIR" $APPNAME | |
else | |
# Entry for an image environment | |
REQUIRED "node"; | |
REQUIRED "npm"; | |
# Init project | |
if [ "$1" == "init" ]; then | |
if PKG_ABSENT "vue"; then | |
MSG_TITLE "Install vue-cli" | |
npm install -g vue-cli | |
fi | |
if [ ! -f "$WORKDIR/package.json" ]; then | |
MSG_TITLE "Init project" | |
vue init webpack . | |
fi | |
fi | |
# Install dependencies | |
if [ ! -d "$WORKDIR/node_modules" ]; then | |
MSG_TITLE "Installing project dependencies" | |
npm install | |
fi | |
# Access listening on the host machine | |
LISTEN_LOCAL() { return `cat package.json | grep -cm1 "webpack-dev-server --host 0.0.0.0"`; } | |
if LISTEN_LOCAL; then | |
sed -i 's/"dev": "webpack-dev-server /"dev": "webpack-dev-server --host 0.0.0.0 /' $WORKDIR/package.json | |
fi | |
# Fix owner | |
chown -R $2 $WORKDIR | |
fi | |
exit 0; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment