From e53f8f9d8fe020c2d7bd362487b5f4983ab8f826 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Fri, 4 Jun 2021 19:57:43 +0100 Subject: [PATCH] Improved the Docker deployment process, plus switched to a new Apline image --- Dockerfile | 41 ++++++++++++++++------------------- package.json | 7 ++++-- server.js | 61 +++++++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 82 insertions(+), 27 deletions(-) diff --git a/Dockerfile b/Dockerfile index 807d151b..4f557956 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,30 +1,27 @@ -# build stage -FROM node:lts-alpine as build-stage +FROM node:lts-alpine -WORKDIR /app +# Define some ENV Vars +ENV PORT 80 +ENV DIRECTORY /app +ENV IS_DOCKER true +# Create and set the working directory +WORKDIR ${DIRECTORY} + +# Copy over both 'package.json' and 'package-lock.json' (if available) COPY package*.json ./ -RUN yarn install --frozen-lockfile +# Install project dependencies +RUN yarn + +# Copy over all project files and folders to the working directory COPY . . + +# Build initial app for production RUN yarn build -# production stage -FROM alpine:3.11 - -ENV USER darkhttpd -ENV GROUP darkhttpd -ENV GID 911 -ENV UID 911 -ENV PORT 8080 - -RUN addgroup -S ${GROUP} -g ${GID} && adduser -D -S -u ${UID} ${USER} ${GROUP} && \ - apk add -U --no-cache su-exec darkhttpd - -COPY --from=build-stage --chown=${USER}:${GROUP} /app/dist /www/ -COPY --from=build-stage --chown=${USER}:${GROUP} /app/dist/assets /www/default-assets -COPY entrypoint.sh /entrypoint.sh - +# Expose given port EXPOSE ${PORT} -VOLUME /www/assets -ENTRYPOINT ["/bin/sh", "/entrypoint.sh"] \ No newline at end of file + +# Finally, run start command to serve up the built application +CMD [ "yarn", "build-and-start"] \ No newline at end of file diff --git a/package.json b/package.json index e0e1a4d3..9eaf0a92 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,16 @@ "start": "node server", "dev": "vue-cli-service serve", "build": "vue-cli-service build", - "lint": "vue-cli-service lint --fix" + "lint": "vue-cli-service lint --fix", + "build-watch": "vue-cli-service build --watch", + "build-and-start": "npm-run-all --parallel build start" }, "dependencies": { "axios": "^0.21.1", "connect": "^3.7.0", "crypto-js": "^4.0.0", "highlight.js": "^11.0.0", + "npm-run-all": "^4.1.5", "prismjs": "^1.23.0", "register-service-worker": "^1.6.2", "remedial": "^1.0.8", @@ -70,4 +73,4 @@ "> 1%", "last 2 versions" ] -} +} \ No newline at end of file diff --git a/server.js b/server.js index f9b9b72d..d277fe53 100644 --- a/server.js +++ b/server.js @@ -1,13 +1,68 @@ const connect = require('connect'); const serveStatic = require('serve-static'); -const port = process.env.PORT || 3002; +const util = require('util'); +const dns = require('dns'); +const os = require('os'); + +const port = process.env.PORT || 80; /* eslint no-console: 0 */ +const printWelcomeMessage = () => { + getLocalIp().then(({ address }) => { + const ip = address || 'localhost'; + console.log(overComplicatedMessage(ip, port)); + }); +} + +const getLocalIp = () => { + const dnsLookup = util.promisify(dns.lookup); + return dnsLookup(os.hostname()); +} + +const overComplicatedMessage = (ip, port) => { + let msg = ''; + const chars = { + RESET: '\x1b[0m', + CYAN: '\x1b[36m', + GREEN: '\x1b[32m', + BLUE: '\x1b[34m', + UNDERLINE: '\033[4m', + BOLD: '\033[1m', + BR: '\n', + }; + const stars = (count) => new Array(count).fill('*').join(''); + const line = (count) => new Array(count).fill('━').join(''); + const blanks = (count) => new Array(count).fill(' ').join(''); + if (process.env.IS_DOCKER) { + const containerId = process.env.HOSTNAME || undefined; + msg = `${chars.BLUE}${stars(91)}${chars.BR}${chars.RESET}` + + `${chars.CYAN}${chars.BOLD}Welcome to Dashy! 🚀${chars.RESET}${chars.BR}` + + `${chars.GREEN}Your new dashboard is now up and running ` + + `${containerId ? `in container ID ${containerId}` : 'with Docker'}${chars.BR}` + + `After updating your config file, run '${chars.UNDERLINE}docker exec -it ` + + `${containerId || '[container-id]'} yarn build` + + `${chars.RESET}${chars.GREEN}' to rebuild${chars.BR}` + + `${chars.BLUE}${stars(91)}${chars.BR}${chars.RESET}`; + } else { + msg = `${chars.GREEN}┏${line(75)}┓${chars.BR}` + + `┃ ${chars.CYAN}${chars.BOLD}Welcome to Dashy! 🚀${blanks(55)}${chars.GREEN}┃${chars.BR}` + + `┃ ${chars.CYAN}Your new dashboard is now up and running at ${chars.UNDERLINE}` + + `http://${ip}:${port}${chars.RESET}${blanks(20 - ip.length)}${chars.GREEN}┃${chars.BR}` + + `┃ ${chars.CYAN}After updating your config file, run '${chars.UNDERLINE}yarn build` + + `${chars.RESET}${chars.CYAN}' to rebuild the app${blanks(6)}${chars.GREEN}┃${chars.BR}` + + `┗${line(75)}┛${chars.BR}${chars.BR}`; + } + return msg; +} + try { connect() .use(serveStatic(`${__dirname}/dist`)) - .listen(port, () => console.log(`Boom, app is running on port ${port} 🚀`)); + .listen(port, () => { + try { printWelcomeMessage(port); } + catch (e) { console.log('Dashy is Starting...'); } + }); } catch (error) { - console.log('Something fucked up', error); + console.log('Sorry, an error occurred ', error); }