From 97e584a6d79ceee67ffbb13635c8a7a5354b1d36 Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Wed, 6 Jan 2021 19:54:16 -0500 Subject: [PATCH 01/12] Dockerfile improvements - Pin Alpine and Node versions - Use Alpine for final image (smaller) - Cache node modules in a Docker layer for build - Run without root as user with uid 1000 --- Dockerfile | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/Dockerfile b/Dockerfile index 508c6cc..0f56bd5 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,8 +1,13 @@ +ARG ALPINE_VERSION=3.12 +ARG NODE_VERSION=15 + # multistage - builder image -FROM node:alpine AS builder +FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS builder WORKDIR /app/Lightspeed-react -COPY . . +# Layer caching for node modules +COPY package.json package-lock.json ./ RUN npm install +COPY . . # configure ip, hardcoded to webrtc container address (8080) for now RUN sed -i "s|stream.gud.software|localhost|g" public/config.json @@ -11,5 +16,6 @@ RUN sed -i "s|stream.gud.software|localhost|g" public/config.json RUN npm run build # runtime image -FROM nginx:stable -COPY --from=builder /app/Lightspeed-react/build /usr/share/nginx/html +FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} +USER 1000 +COPY --from=builder --chown=1000 /app/Lightspeed-react/build /usr/share/nginx/html From 2e09a27ce37abd383763949541b3ebe5d7065a74 Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Wed, 6 Jan 2021 20:08:53 -0500 Subject: [PATCH 02/12] Add shell entrypoint to run sed command --- Dockerfile | 5 ++--- entrypoint.sh | 8 ++++++++ 2 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 entrypoint.sh diff --git a/Dockerfile b/Dockerfile index 0f56bd5..e4f8aaf 100644 --- a/Dockerfile +++ b/Dockerfile @@ -9,13 +9,12 @@ COPY package.json package-lock.json ./ RUN npm install COPY . . -# configure ip, hardcoded to webrtc container address (8080) for now -RUN sed -i "s|stream.gud.software|localhost|g" public/config.json - # build it RUN npm run build # runtime image FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} USER 1000 +ENTRYPOINT [ "/entrypoint.sh" ] +COPY --chown=1000 entrypoint.sh ./ COPY --from=builder --chown=1000 /app/Lightspeed-react/build /usr/share/nginx/html diff --git a/entrypoint.sh b/entrypoint.sh new file mode 100644 index 0000000..bedbcfc --- /dev/null +++ b/entrypoint.sh @@ -0,0 +1,8 @@ +#!/bin/sh + +publicDir=/usr/share/nginx/html +host=${WEBSOCKET_HOST:-localhost} + +# configure ip, hardcoded to webrtc container address (8080) for now +sed -i "s|stream.gud.software|$host|g" "$publicDir/config.json" +exec /bin/sh "$@" From 6ca46348776dd281666339a3fbd6aa94e03e7720 Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Wed, 6 Jan 2021 20:52:12 -0500 Subject: [PATCH 03/12] Add files to .dockerignore --- .dockerignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.dockerignore b/.dockerignore index 1dc578f..3d7bb97 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,3 +1,6 @@ +.git +.dockerignore +.gitignore Dockerfile README.md LICENSE \ No newline at end of file From 1985caba494cd4a8eb2553b8c11e368e7c686980 Mon Sep 17 00:00:00 2001 From: Chris Woodham Date: Tue, 12 Jan 2021 01:28:29 +0000 Subject: [PATCH 04/12] Docker suggestions (#1) * Change final base image to nginx * use envsubst to replace environment variables in config file * create config file template * move docker specific files to directory --- Dockerfile | 11 +++++++---- docker/config.json.template | 3 +++ docker/entrypoint.sh | 5 +++++ entrypoint.sh | 8 -------- 4 files changed, 15 insertions(+), 12 deletions(-) create mode 100644 docker/config.json.template create mode 100755 docker/entrypoint.sh delete mode 100644 entrypoint.sh diff --git a/Dockerfile b/Dockerfile index e4f8aaf..33ffa87 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,6 @@ ARG ALPINE_VERSION=3.12 ARG NODE_VERSION=15 +ARG NGINX_VERSION=1.19.6 # multistage - builder image FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS builder @@ -13,8 +14,10 @@ COPY . . RUN npm run build # runtime image -FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} -USER 1000 -ENTRYPOINT [ "/entrypoint.sh" ] -COPY --chown=1000 entrypoint.sh ./ +FROM nginx:${NGINX_VERSION}-alpine +ENV WEBSOCKET_HOST=localhost +ENV WEBSOCKET_PORT=8080 + +COPY --chown=1000 docker/entrypoint.sh /docker-entrypoint.d/entrypoint.sh +COPY --chown=1000 docker/config.json.template /config.json.template COPY --from=builder --chown=1000 /app/Lightspeed-react/build /usr/share/nginx/html diff --git a/docker/config.json.template b/docker/config.json.template new file mode 100644 index 0000000..0711374 --- /dev/null +++ b/docker/config.json.template @@ -0,0 +1,3 @@ +{ + "wsUrl": "ws://${WEBSOCKET_HOST}:${WEBSOCKET_PORT}/websocket" +} diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh new file mode 100755 index 0000000..083cb95 --- /dev/null +++ b/docker/entrypoint.sh @@ -0,0 +1,5 @@ +#!/bin/sh + +publicDir=/usr/share/nginx/html + +envsubst < /config.json.template > "$publicDir/config.json" diff --git a/entrypoint.sh b/entrypoint.sh deleted file mode 100644 index bedbcfc..0000000 --- a/entrypoint.sh +++ /dev/null @@ -1,8 +0,0 @@ -#!/bin/sh - -publicDir=/usr/share/nginx/html -host=${WEBSOCKET_HOST:-localhost} - -# configure ip, hardcoded to webrtc container address (8080) for now -sed -i "s|stream.gud.software|$host|g" "$publicDir/config.json" -exec /bin/sh "$@" From e6ef911028e021acad85fdd3a629de57b3343b58 Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Sat, 30 Jan 2021 18:22:29 -0500 Subject: [PATCH 05/12] Add EXPOSE --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index 33ffa87..33af809 100644 --- a/Dockerfile +++ b/Dockerfile @@ -17,7 +17,7 @@ RUN npm run build FROM nginx:${NGINX_VERSION}-alpine ENV WEBSOCKET_HOST=localhost ENV WEBSOCKET_PORT=8080 - +EXPOSE 8000/tcp 80/tcp COPY --chown=1000 docker/entrypoint.sh /docker-entrypoint.d/entrypoint.sh COPY --chown=1000 docker/config.json.template /config.json.template COPY --from=builder --chown=1000 /app/Lightspeed-react/build /usr/share/nginx/html From d58b60736c8a9a6b9997b096462e42b496caf73f Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Sat, 30 Jan 2021 18:24:23 -0500 Subject: [PATCH 06/12] Remove comments and add new lines between stages --- Dockerfile | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/Dockerfile b/Dockerfile index 33af809..bb1e48e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -2,18 +2,14 @@ ARG ALPINE_VERSION=3.12 ARG NODE_VERSION=15 ARG NGINX_VERSION=1.19.6 -# multistage - builder image FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS builder WORKDIR /app/Lightspeed-react -# Layer caching for node modules COPY package.json package-lock.json ./ RUN npm install COPY . . - -# build it RUN npm run build -# runtime image + FROM nginx:${NGINX_VERSION}-alpine ENV WEBSOCKET_HOST=localhost ENV WEBSOCKET_PORT=8080 From 3a40d1d3b969359fe35e2dd1463e0316beda950e Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Sat, 30 Jan 2021 18:24:54 -0500 Subject: [PATCH 07/12] Remove publicDir variable --- docker/entrypoint.sh | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh index 083cb95..e36867a 100755 --- a/docker/entrypoint.sh +++ b/docker/entrypoint.sh @@ -1,5 +1,3 @@ #!/bin/sh -publicDir=/usr/share/nginx/html - -envsubst < /config.json.template > "$publicDir/config.json" +envsubst < /config.json.template > "/usr/share/nginx/html/config.json" From 6eca3963da45cd6b2060a9eadb16426fe05d82e9 Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Sat, 30 Jan 2021 18:40:53 -0500 Subject: [PATCH 08/12] Change Dockerfile expose from 8000 to 8080 --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index bb1e48e..196c9e2 100644 --- a/Dockerfile +++ b/Dockerfile @@ -13,7 +13,7 @@ RUN npm run build FROM nginx:${NGINX_VERSION}-alpine ENV WEBSOCKET_HOST=localhost ENV WEBSOCKET_PORT=8080 -EXPOSE 8000/tcp 80/tcp +EXPOSE 8080/tcp 80/tcp COPY --chown=1000 docker/entrypoint.sh /docker-entrypoint.d/entrypoint.sh COPY --chown=1000 docker/config.json.template /config.json.template COPY --from=builder --chown=1000 /app/Lightspeed-react/build /usr/share/nginx/html From 103899b9181bfc4999416563b4a83be608ea4ec1 Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Sat, 30 Jan 2021 18:42:07 -0500 Subject: [PATCH 09/12] Add documentation --- README.md | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8defe54..77fd2f1 100644 --- a/README.md +++ b/README.md @@ -75,13 +75,36 @@ This is one of three components required for Project Lightspeed. Project Lightsp ## Getting Started +## Setup + +### Docker + +1. Install [git](https://git-scm.com/downloads) +1. Build the image from the master branch with: + + ```sh + docker build -t grvydev/lightspeed-react https://github.com/GRVYDEV/Lightspeed-react.git + ``` + +1. Run it with + + ```sh + docker run -it --rm \ + -p 8000:80/tcp -p 8080:8080/tcp \ + -e WEBSOCKET_HOST=localhost -e WEBSOCKET_PORT=8080 grvydev/lightspeed-react + ``` + +1. You can now access it at [localhost:8000](http://localhost:8000) and the websocket port is published on port `8080`. + +### Locally + To get a local copy up and running follow these simple steps. -### Prerequisites +#### Prerequisites In order to run this npm is required. Installation instructions can be found here. Npm Serve is required as well if you want to host this on your machine. That can be found here -### Installation +#### Installation ```sh git clone https://github.com/GRVYDEV/Lightspeed-react.git @@ -91,8 +114,10 @@ npm install -## Usage +#### Usage + First build the frontend + ```sh cd Lightspeed-react npm run build @@ -101,6 +126,7 @@ npm run build You should then configure the websocket URL in `config.json` in the `build` directory. Now you can host the static site locally, by using `serve` for example + ```sh serve -s build -l 80 ``` From 4421ebb86863a79be23d82c5592d6e6be5a2d94a Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Sun, 31 Jan 2021 03:46:12 -0500 Subject: [PATCH 10/12] Remove port 8080 from EXPOSE and readme --- Dockerfile | 2 +- README.md | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/Dockerfile b/Dockerfile index 196c9e2..9938b1b 100644 --- a/Dockerfile +++ b/Dockerfile @@ -13,7 +13,7 @@ RUN npm run build FROM nginx:${NGINX_VERSION}-alpine ENV WEBSOCKET_HOST=localhost ENV WEBSOCKET_PORT=8080 -EXPOSE 8080/tcp 80/tcp +EXPOSE 80/tcp COPY --chown=1000 docker/entrypoint.sh /docker-entrypoint.d/entrypoint.sh COPY --chown=1000 docker/config.json.template /config.json.template COPY --from=builder --chown=1000 /app/Lightspeed-react/build /usr/share/nginx/html diff --git a/README.md b/README.md index 77fd2f1..0caffb9 100644 --- a/README.md +++ b/README.md @@ -90,8 +90,10 @@ This is one of three components required for Project Lightspeed. Project Lightsp ```sh docker run -it --rm \ - -p 8000:80/tcp -p 8080:8080/tcp \ - -e WEBSOCKET_HOST=localhost -e WEBSOCKET_PORT=8080 grvydev/lightspeed-react + -p 8000:80/tcp \ + -e WEBSOCKET_HOST=localhost \ + -e WEBSOCKET_PORT=8080 \ + grvydev/lightspeed-react ``` 1. You can now access it at [localhost:8000](http://localhost:8000) and the websocket port is published on port `8080`. From ec851b4e49a608895d6ffed3d979288149b46ee9 Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Sun, 31 Jan 2021 11:47:33 -0500 Subject: [PATCH 11/12] Clear up readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0caffb9..35f6e46 100644 --- a/README.md +++ b/README.md @@ -91,12 +91,12 @@ This is one of three components required for Project Lightspeed. Project Lightsp ```sh docker run -it --rm \ -p 8000:80/tcp \ - -e WEBSOCKET_HOST=localhost \ + -e WEBSOCKET_HOST=lightspeed-websocket-hostname \ -e WEBSOCKET_PORT=8080 \ grvydev/lightspeed-react ``` -1. You can now access it at [localhost:8000](http://localhost:8000) and the websocket port is published on port `8080`. +1. You can now access it at [localhost:8000](http://localhost:8000). ### Locally From e19c7fd6d2a4a956d61a1896779cf5c663d88a6d Mon Sep 17 00:00:00 2001 From: Quentin McGaw Date: Sun, 31 Jan 2021 14:10:54 -0500 Subject: [PATCH 12/12] Change websocket host to localhost in readme --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 35f6e46..556ffb7 100644 --- a/README.md +++ b/README.md @@ -91,11 +91,13 @@ This is one of three components required for Project Lightspeed. Project Lightsp ```sh docker run -it --rm \ -p 8000:80/tcp \ - -e WEBSOCKET_HOST=lightspeed-websocket-hostname \ + -e WEBSOCKET_HOST=localhost \ -e WEBSOCKET_PORT=8080 \ grvydev/lightspeed-react ``` + Where your websocket host from the browser/client perspective is accessible on `localhost:8080`. + 1. You can now access it at [localhost:8000](http://localhost:8000). ### Locally