Use within Docker containers

[tanc]

I'm experimenting with running Gridsome within a set of docker containers. The first issue is the localhost is the default host which stops the browser from connecting with the server within the containers. This is resolvable by specifying 0.0.0.0 as the host using gridsome develop -h 0.0.0.0

The next problem is the served application can't connect with the GraphQL server, the browser throws the following:

fetch.js?1477:12 OPTIONS http://0.0.0.0:8080/___graphql net::ERR_CONNECTION_REFUSED

If I specify an actual hostname (which resolves to the IP of the docker container) then I get errors running the server with gridsome develop -h gridsome.lndo.site:

Gridsome v0.3.4

Initialize - 0.06s
Load sources - 0.1s
Create GraphQL schema - 0.04s
Generate code - 0.02s
Bootstrap finish - 0.23s
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRNOTAVAIL 172.24.0.4:9000
    at Server.setupListenHandle [as _listen2] (net.js:1343:19)
    at listenInCluster (net.js:1401:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1510:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:72:10)

Any ideas how to proceed?

[tanc]

So far the only way of getting the develop server to work is to override GRAPHQL_ENDPOINT in fetch.js to specify a url the browser will understand and connect to:

const GRAPHQL_ENDPOINT = 'http://gridsome.lndo.site:8080/___graphql';

[hjvedvik]

Would it help if you could set a custom URL for the GraphQL server in gridsome.config.js?

[tanc]

Yes, I think that would do it. I'm also seeing connection problems to the server on port 9000 but it hasn't seemed to cause problems so far, I'm not sure what that does?

[hjvedvik]

Port 9000 is for sockjs which makes the page-query re-run whenever a node changes on the server. It's not possible to set a custom port atm, but there could be an option in gridsome.config.js for that too.

[tanc]

I think the port is fine but like the graphql server I probably need to be able to specify a host the browser understands

[tanc]

Oh just a note, in the docs it says you can specify a host in the config but this didn't work for me. The only way a new host got picked up was to specify it with the -h switch on the commandline.

[tanc]

Would it help if you could set a custom URL for the GraphQL server in gridsome.config.js?

Any luck implementing this?

[carmanchris31]

I have gridsome develop running inside a docker container. I used the HOSTHANE environment variable set by docker so the container can reference itself, and added it to gridsome.config.js like this:

module.exports = {
  // Internal hostname provided by docker
  host: process.env.HOSTNAME,
  port: 8080,
};

This logs will show something like:

gridsome_1       |   Site running at:          http://44da3f8d258b:8080/
gridsome_1       |   Explore GraphQL data at:  http://44da3f8d258b:8080/___explore

Of course you can ignore the url because that's just from the container's perspective. If you've exposed the port you should have access to both endpoints through localhost (or however else you have it configured).

Note that you do need to restart the container for any changes to this file to be reflected.

[tanc]

@carmanchris31 my problem may be slightly complicated by docker running on a different machine. When I add the docker HOSTNAME environment variable to gridsome.config.js I can hit 8080 on the IP of my docker machine and get the initial Gridsome load but the browser then chokes on fetch.js when it tries to access the internal docker domain, which I see as errors in console:

OPTIONS http://57afa2f0aab3:8080/___graphql net::ERR_NAME_NOT_RESOLVED             fetch.js?1477:15
GET http://57afa2f0aab3:9000/echo/info?t=1548418779160 net::ERR_NAME_NOT_RESOLVE   abstract-xhr.js?d8d6:132 

If I specify the IP for 57afa2f0aab3 in my local /etc/hosts then I can access the site on http://57afa2f0aab3:8080 which is vaguely workable but not ideal, especially if I rebuild the containers and that internal domain changes.

Any thoughts?

[menteora]

I'm using LXD containers, I added to gridsome.config.js as suggested above:

module.exports = {
  host: '0.0.0.0'
  port: 8080,
};

and according to this comment on issue #134:

This can be achieved by adding a .env file at the root of the project containing :

GRAPHQL_ENDPOINT=/___graphql

This way it won't be necessary to manually enter the IP every time.

It works for me.

[robaxelsen]

Closing, due to findings by @menteora above. Please reopen if there are more questions/issues.

[hjvedvik]

The default host will be 0.0.0.0 in Gridsome v0.7. And the GraphQL and SockJS endpoints will be /___graphql and /___echo instead of full absolute URLs. SockJS will also run on the same port as the site. I hope that will make it easier to use Gridsome inside Docker containers. At least it works well in a Forestry Instant Preview container :)

[DirtyF]

@hjvedvik cool, FYI Forestry is using the official NodeJS Docker image (node:10 by default, but you can use node:lastest if you prefer)

[JFossey]

@tanc Using the latest version of gridsome this seems to work out of the box now.
I dont know if this helps anybody else but, I solved this same issue with a web-server container with 2 vhosts one a static file server pointed at dist and another that would proxy requests to the gridsome container running develop. I prefer it this way as I can use a domain eg site-name.test and I dont need to worry about ports in the address bar.

[aminnairi]

This is the Docker configuration that I am using to integrate Gridsome if this can be of any help.

Requirements

• Docker
• Docker Compose

Dockerfile

$ touch Dockerfile

FROM archlinux:latest

RUN pacman -Sy --noconfirm nodejs npm gcc make mesa grep libxi sdl libpng libjpeg-turbo libtiff giflib awk diffutils file
RUN useradd -u 1000 -d /home/user -s /bin/bash -rm user

Docker Compose

$ touch docker-compose.yaml

version: "3"

services:
    npm:
        container_name: npm
        build: .
        user: user
        entrypoint: npm
        working_dir: /home/user/app
        volumes:
            - .:/home/user/app

    website:
        container_name: website
        build: .
        user: user
        command: npm run develop
        working_dir: /home/user/app
        ports:
            - 8080:8080
        volumes:
            - .:/home/user/app

Commands

Command	Description
docker-compose run npm ARGUMENTS	Run any NPM commands.
docker-compose up -d website	Start the Gridsome development worflow.
docker-compose down	Stop the Gridsome development workflow.

Example

$ docker-compose run --rm npm install
$ docker-compose up --detach website
$ chromium localhost:8080
$ docker-compose down

I think that this would be awesome to have these files and the documentation in one of (or all) starters. This could help be productive with Docker in no time without having to think about all the dependencies for pngquant and stuff!