Skip to content

Instantly share code, notes, and snippets.

@yukal
Last active November 11, 2018 16:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yukal/d669d84ae92a10eab020cabc3e3f8216 to your computer and use it in GitHub Desktop.
Save yukal/d669d84ae92a10eab020cabc3e3f8216 to your computer and use it in GitHub Desktop.
Serving a vuejs project using docker and webpack
#!/bin/sh
# Author: Yukal Alexander <yukal@email.ua>
# 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