Tableau dashboard extensions (https://developer.tableau.com/extensions) are html/css/js web applications that may be utilised within Tableau. I've made one, and now I'm being requested to "dockerize" it locally so that it can be run on an AWS EC2 instance or a Google Cloud Platform server. I understand the benefits of Docker and that I need to construct a Dockerfile for this, but I'm having trouble putting it into practise. Docker is now installed on my machine. Here's what my terminal (on a Mac) said:
> docker --version
Docker version 19.03.5, build 633a0ea
> npm --version
6.13.4
> node --version
v12.15.0
Tableau dashboards extensions (https://www.tableau.com/developer/extensions) are essentially html/css/js web apps that are used for within Tableau. I have created one, and now I have been asked to "dockerize" the app locally, so that it can then be run on either an AWS EC2 instance or GCP server. I understand the benefits of Docker, and that I need to create a Dockerfile for this, however I am struggling with the implementation of this. I have installed Docker on my computer. Here is some output from my terminal (on Mac):
> docker --version
Docker version 19.03.5, build 633a0ea
> npm --version
6.13.4
> node --version
v12.15.0
I have a directory for my Tableau extension, with the following files included:
- my_web_app.html (the main JS is included as a script in the html file)
- d3.v5.min.js (JS with d3 library, loaded into html file)
- package.json
- package-lock.json
- my_web_app.trex (the .trex file is the entrypoint into the app for Tableau (i believe))
- tableau.extensions.1.latest.js (JS with the tableau extensions API, loaded into html file)
there is no backend to this app, and in order to run my web app locally, I currently just run npm start from my command line, from within this directory.
How can I "dockerize" this web app so that I can run it locally with docker run... in terminal? Should I, for example, look into how to deploy a Node.js app with Docker (for which there are numerous examples), or a npm programme with Docker, or anything similar? Because I don't need node index.js to run this app, I don't think I need a node.js dockerfile, however I'm not sure what is required.
Any assistance, clarification, references, or other information would be greatly appreciated; thank you!
Edit1: Since there's no backend to my app, I don't (at least, I don't think) have an index.js or server.js file in my directory, which I think is causing some confusion for me with how to do this.
Edit2: Please let me know if I can send any addt'l info on this. I am actively working on this and will update the Q / post an answer if I can resolve.
Edit3: Here's my current efforts by the way. I have the following file named Dockerfile, that looks like:
FROM node:12
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
CMD npm start
EXPOSE 8081
I ran docker build (I am already cd'd into the directory with the app) and received the following output:
> docker build . -t shot_charts_docker_container
Sending build context to Docker daemon 119.2MB
Step 1/7 : FROM node:12
12: Pulling from library/node
c0c53f743a40: Pull complete
66997431d390: Pull complete
0ea865e2909f: Pull complete
584bf23912b7: Pull complete
3c4c73959f29: Pull complete
63e05266fc4b: Pull complete
b00869e1130e: Pull complete
45b49819ba5a: Pull complete
87465fce1a7f: Pull complete
Digest: sha256:facc1cbde6e5aa3255092b1a1417451953c80bd31ab5a4403f8bcd90b90a8407
Status: Downloaded newer image for node:12
---> d834cbcf2402
Step 2/7 : WORKDIR /app
---> Running in a30398234870
Removing intermediate container a30398234870
---> da3b6160bd05
Step 3/7 : COPY package.json /app
---> 7459e2d070b9
Step 4/7 : RUN npm install
---> Running in 0f7eeae1dfde
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
> ejs@2.7.4 postinstall /app/node_modules/ejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
added 698 packages from 479 contributors and audited 7147 packages in 19.527s
15 packages are looking for funding
run `npm fund` for details
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
Removing intermediate container 0f7eeae1dfde
---> 8a2667e42b0a
Step 5/7 : COPY . /app
---> debe78f1501a
Step 6/7 : CMD npm start
---> Running in 58b466b8dde8
Removing intermediate container 58b466b8dde8
---> 7b26023a3b1b
Step 7/7 : EXPOSE 8081
---> Running in 6c5d2c9d8012
Removing intermediate container 6c5d2c9d8012
---> fd2ef4b32da5
Successfully built fd2ef4b32da5
Successfully tagged shot_charts_docker_container:latest
I removed some warnings from the above output in order to shorten it for this post, as I didn't think the warnings we're relevant. It seems like I am on the right path, but I am not 100% sure...
Edit4: I then ran docker run -p 8080:8080 shot_charts_docker_container and received the following output:
> extensions-api-sdk@0.1.0 start /app
> node node_modules/http-server/bin/http-server -p 8765
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8765
http://172.17.0.2:8765
Hit CTRL-C to stop the server
however when I went to visit those URLs, neither one seemed to work.
Edit5: In case this is helpful, here's what I receive from running docker image ls:
> docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
shot_charts_docker_container latest fd2ef4b32da5 7 minutes ago 1.17GB
node 12 d834cbcf2402 8 days ago 916MB
hello-world latest fce289e99eb9 14 months ago 1.84kB
and from docker container ls
> docker container ls
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
8d71818baf51 shot_charts_docker_container "docker-entrypoint.s…" 4 minutes ago Up 4 minutes 0.0.0.0:8080->8080/tcp, 8081/tcp stupefied_kalam
Edit6: Not sure what else I can share to help with this, maybe info from within the package.json?
