Docker Deployment

[twinlensreflex]

Yesterday I tried to get the site running in a docker container. I wasn't able to build a container.

This is the content of the Dockerfile

FROM node:7.10-alpine
COPY . .
RUN yarn install
RUN yarn run build
EXPOSE 5000
CMD yarn start

and this is the error I got...

npm ERR! Linux 4.9.12-moby
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "inline:css"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! uasabi_static_site@1.0.0 inline:css: `rm -rf dist/index.html && critical src/index.html --minify --inline --base src/ > dist/index.html`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the uasabi_static_site@1.0.0 inline:css script 'rm -rf dist/index.html && critical src/index.html --minify --inline --base src/ > dist/index.html'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the uasabi_static_site package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     rm -rf dist/index.html && critical src/index.html --minify --inline --base src/ > dist/index.html
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs uasabi_static_site
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls uasabi_static_site
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /root/.npm/_logs/2017-05-06T08_52_51_671Z-debug.log

npm info lifecycle uasabi_static_site@1.0.0~initiate-html: Failed to exec initiate-html script
npm ERR! Linux 4.9.12-moby
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "initiate-html"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! uasabi_static_site@1.0.0 initiate-html: `npm run inline:css && npm run minify:html`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the uasabi_static_site@1.0.0 initiate-html script 'npm run inline:css && npm run minify:html'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the uasabi_static_site package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run inline:css && npm run minify:html
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs uasabi_static_site
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls uasabi_static_site
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /root/.npm/_logs/2017-05-06T08_52_51_718Z-debug.log
error Command failed with exit code 1.

I tried a couple of different approaches, including following this guide on deploying your node project with Docker which produced a different error -

Step 4/8 : RUN yarn install
 ---> Running in 42236195feb5
yarn install v0.23.4
[1/4] Resolving packages...
[2/4] Fetching packages...
error Couldn't find the binary git

I tried to google all of these errors and read the various github issues people had created, and a few stackoverflow articles and tried to implement the fixes they suggest but nothing worked.

I then took another look at the files in my directory and saw that git was logging some changes to yarn.lock (presumably automatically generated when I ran yarn install locally). These changes are on line 514 and line 515 and remove the '+git' from the https urls. I added these back in and tried to rebuild the container and got the error:

error Refusing to download the git repo {"protocol":"https:","hostname":"github.com","repository":"https://github.com/pocketjoso/css.git"} over HTTPS without a commit hash - possible certificate error?

I'm not really sure where to go next but thought I would document my problems here so you know what I've been up to.

[danielepolencic]

Here's how I debugged it:

I copy-pasted your Dockerfile and ran it. I had the following error:

Sending build context to Docker daemon 106.5 MB
Step 1/6 : FROM node:7.10-alpine
 ---> da85451c2a89
Step 2/6 : COPY . .
 ---> Using cache
 ---> 19af11a6b4ef
Step 3/6 : RUN yarn install
 ---> Running in 2d8cc6f4a910
yarn install v0.23.4
[1/4] Resolving packages...
error Refusing to download the git repo {"protocol":"https:","hostname":"github.com","repository":"https://github.com/pocketjoso/css.git"} over HTTPS without a commit hash - possible certificate error?

This suggested that there was something wrong with SSL. Weird. Perhaps a missing certificate somewhere. Google led me to this GitHub issue: yarnpkg/yarn#2117 (comment)
So I decided to change the Dockerfile to:

FROM node:7.10-alpine
COPY . .
RUN git config --global http.sslVerify false
RUN yarn install
RUN yarn run build
EXPOSE 5000
CMD yarn start

When I ran it I got the following error:

Sending build context to Docker daemon 106.5 MB
Step 1/7 : FROM node:7.10-alpine
 ---> da85451c2a89
Step 2/7 : COPY . .
 ---> Using cache
 ---> 4241d3bc1b7f
Step 3/7 : RUN git config --global http.sslVerify false
 ---> Running in 6ebd42c2af6c
/bin/sh: git: not found

This error made more sense! There was no Git installed in that node:7.10-alpine image. I had 2 options, I could install git as part of the build process or switch to a different image. I opted for the former:

[...] more logs
> uasabi_static_site@1.0.0 inline:css /
> rm -rf dist/index.html && critical src/index.html --minify --inline --base src/ > dist/index.html

   Error: spawn Unknown system error -8
   Usage: critical <input> [<option>]

The build failed with the same error you posted. Finally. Looking at it the first thing that came to my mind was Phantomjs. Critical uses phantomjs to render the page and decide which CSS has to be inlined. Since the error was very cryptic and I knew that phantomjs could have been the issue, I decided to switch my base image to vanilla node:7.10.

Interlude. Since Alpine is a stripped down image it doesn't come with most of the libraries and packages pre-installed. Ubuntu instead is a bloated image with plenty of extra stuff. My guess was that Phantomjs required some standard package that didn't exist in Alpine.

FROM node:7.10
COPY . .
RUN yarn install
RUN yarn run build
EXPOSE 5000
CMD yarn start

Please note that I didn't have to install git in this image. The error this time made more sense:

[...] more logs
> uasabi_static_site@1.0.0 inline:css /
> rm -rf dist/index.html && critical src/index.html --minify --inline --base src/ > dist/index.html

   Error: /node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs: 1: /node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs: Syntax error: Unterminated quoted string

Googling led me to this ticket: Medium/phantomjs#392 (comment) and reminded me that I pretend to be clever, but in reality I fail on the basics. Let me explain:

When we do COPY . . we ask docker to copy all files and folders in the current directory inside the container. This is great! until it's not. We're copying the node_modules folder that contains all our packages. Unfortunately not all node packages are javascript packages. Some of those packages are binaries, such as phantomjs. When binary packages are downloaded 2 things could occur: 1) the source code (c++) is downloaded and compiled for the target platform (mac) or 2) the binary for the target platform (mac) is downloaded from the internet. When we copy node_modules inside the container and try to execute the binary, it blows up because the binary was compiled for the wrong architecture (mac, instead of linux).

We should ask docker to ignore the node_modules folder, so that when we execute yarn install all right binaries and packages are installed again for the right platform (linux). Enter .dockerignore. It's like .gitignore but for docker.

node_modules/

Running docker build returned the following error:

> uasabi_static_site@1.0.0 inline:css /
> rm -rf dist/index.html && critical src/index.html --minify --inline --base src/ > dist/index.html

   Error: Penthouse timed out after 30s. Error: Cannot find module 'css-mediaquery'

     phantomjs://platform/bootstrap.js:299 in require
     phantomjs://platform/bootstrap.js:263 in require
     phantomjs://platform/non-matching-media-query-remover.js:4
   TypeError: Object is not a function (evaluating 'nonMatchingMediaQueryRemover(options.ast.stylesheet.rules, options.width, options.height)')

     phantomjs://code/core.js:307 in getCriticalPathCss

Which had to do with critical, I thought. After some research, I figured out that the file is included here: https://github.com/pocketjoso/penthouse/blob/master/lib/phantomjs/non-matching-media-query-remover.js#L3 , so my guess was that there was some error on the path? (Phantomjs can use the same modules as node.js). First attempt was to add the module manually:

FROM node:7.10
COPY . .
RUN yarn install
RUN yarn add css-mediaquery
RUN yarn run build
EXPOSE 5000
CMD yarn start

It didn't work. So maybe it had to do with the current directory? The easiest way to check was to have an ls in the build:

FROM node:7.10
COPY . .
RUN ls
RUN yarn install
RUN yarn run build
EXPOSE 5000
CMD yarn start

Which returned:

Step 3/8 : RUN ls
 ---> Running in f5cc83593eca
Dockerfile
README.md
bin
boot
dev
dist
etc
home
lib
lib64
media
mnt
opt
package.json
proc
root
run
sbin
src
srv
sys
tmp
usr
var
yarn.lock

This suggested that we were working on the root of the filesystem (I must have mentioned to you that the default folder is /app. I was wrong). So I told docker to use app as the default folder:

FROM node:7.10
WORKDIR app
COPY . .
RUN yarn install
RUN yarn run build
EXPOSE 5000
CMD yarn start

Result:

Successfully built 709e66a02fc8

🎉 🎉

[twinlensreflex]

wow . . . thank you! nice detective work 🕵️ I will use this tomorrow to build a container and (hopefully🤞) deploy