Simple docker-compose example

Create a barebone Node.js app by following this: https://nodejs.org/en/docs/guides/nodejs-docker-webapp/


Then update this section of code:

// App
const app = express();
app.get('/', (req, res) => {
  const message = `Hello world: ${process.env.GREETING_MESSAGE}`;
  res.send(message);
});

Create docker-compose.yml:

version: '3'
services:
  spiderman: 
    build: .
    ports:
        - "80:8080"
    environment:
        GREETING_MESSAGE: 你好世界

To test:

$ docker-compose up -d

Output:

Developers-iMac:experiment-nodejs-docker-compose dev$ docker-compose up -d
Creating network "experiment-nodejs-docker-compose_default" with the default driver
Building spiderman
Step 1/7 : FROM node:10
 ---> e05cbde47b8f
Step 2/7 : WORKDIR /usr/src/app
 ---> Running in 95c12e65805a
Removing intermediate container 95c12e65805a
 ---> be613c39b5ab
Step 3/7 : COPY package*.json ./
 ---> 619110050a58
Step 4/7 : RUN npm install
 ---> Running in e32232fc4928
npm WARN docker_web_app@1.0.0 No repository field.
npm WARN docker_web_app@1.0.0 No license field.

added 50 packages from 37 contributors and audited 126 packages in 1.148s
found 0 vulnerabilities

Removing intermediate container e32232fc4928
 ---> 92b713b4c799
Step 5/7 : COPY . .
 ---> ee82daff1c05
Step 6/7 : EXPOSE 8080
 ---> Running in a797e79b2f85
Removing intermediate container a797e79b2f85
 ---> 838f931be1ea
Step 7/7 : CMD [ "node", "server.js" ]
 ---> Running in c3b932bb7e0c
Removing intermediate container c3b932bb7e0c
 ---> 5a0d42751576
Successfully built 5a0d42751576
Successfully tagged experiment-nodejs-docker-compose_spiderman:latest
WARNING: Image for service spiderman was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
Creating experiment-nodejs-docker-compose_spiderman_1 ... done

List the created docker image (think OOP's class):

Developers-iMac:experiment-nodejs-docker-compose dev$ docker images
REPOSITORY                                   TAG                 IMAGE ID            CREATED             SIZE
experiment-nodejs-docker-compose_spiderman   latest              5a0d42751576        3 minutes ago       906MB
node                                         10                  e05cbde47b8f        6 weeks ago         904MB

List the docker image's instance (think class' instance):

Developers-iMac:experiment-nodejs-docker-compose dev$ docker ps
CONTAINER ID        IMAGE                                        COMMAND                  CREATED             STATUS              PORTS                  NAMES
35c7818a4704        experiment-nodejs-docker-compose_spiderman   "docker-entrypoint.s…"   4 minutes ago       Up 4 minutes        0.0.0.0:80->8080/tcp   experiment-nodejs-docker-compose_spiderman_1

Visiting 0.0.0.0 (a.k.a. 127.0.0.1, a.k.a. localhost) on browser:

404 not found.

Got the error "Failed to decode downloaded font OTS parsing error: invalid version tag" and looks like the font can be read/decoded by the browser as the font can be previewed in the browser:





Making it seems that the reason why TinyMCE is not loading the fonts correctly..




..is due to incorrect mime type of text/html:




Although the font can be previewed by the browser, it looks like it is from previous successfully loaded font. Meaning, the browser aggressively caches the fonts, making it look like there is a very serious error, e.g., incorrect mime type of text/html when it should be application/woff, when in reality it is just a 404 that resulted to a 404 page(seemingly), yet without the status code of 404. A page is text/html.


The docker built just don't have font files in it.


Suggestions like nginx has missing mime types for the fonts, made the error looks complex than it really is.


404s are mostly a page, so that might be reason for the content type of text/html being reported by the browser. The browser might be returning a page, but it's hard to actually know since what the browser previews is the actual font, not a page. As for why the app is not returning status code of 404, would have to find out.



Happy Coding!