How to serve site in a docker container

[chuymtz]

I should say I'm not a web developer but Quarto has been very easy to follow. In my organization I created a website where I want to track some documentation for a variety of projects and make it available. I was able to publish this internally in a container where the last command in the Dockerfile is

CMD ["quarto", "preview", ".", "--port", "3838", "--host", "0.0.0.0"]

It works but I'm not sure this is the correct way to do it. I thought maybe the correct way would be to run

RUN quarto render .

and then serve the site somehow. After running the above I understand this creates an output

Output created: _site\index.html

However, I'm not sure what the correct next command would be. Thanks!

[mcanouil]

You only need to have a web server and the produced website/document from Quarto.
Something like below:

FROM nginx:latest
COPY mysite /mysite
RUN apt-get update \ 
  && apt-get -y install wget ca-certificates \
  && wget "https://github.com/quarto-dev/quarto-cli/releases/download/v1.0.38/quarto-1.0.38-linux-amd64.deb" -O quarto.deb \
  && dpkg -i quarto.deb \
  && rm quarto.deb \
  && apt-get autoremove -y \
  && apt-get autoclean -y \
  && rm -rf /var/lib/apt/lists/* \
  && rm -rf /tmp/*
RUN quarto render /mysite --output-dir /usr/share/nginx/html
EXPOSE 80

quarto create-project mysite --type website
docker buildx build --platform linux/amd64 --tag docker-quarto-image .
docker container run --platform linux/amd64 --name docker-quarto --detach --port 8000:80 docker-quarto-image

Open http://localhost:8000/

[mcanouil]

Or for a lighter image:

FROM nginx:latest AS build
COPY mysite /mysite
RUN apt-get update \ 
  && apt-get -y install wget ca-certificates \
  && wget "https://github.com/quarto-dev/quarto-cli/releases/download/v1.0.38/quarto-1.0.38-linux-amd64.deb" -O quarto.deb \
  && dpkg -i quarto.deb
RUN quarto render /mysite --output-dir /usr/share/nginx/html
FROM nginx:latest
COPY --from=build /usr/share/nginx/html /usr/share/nginx/html
EXPOSE 80

Previous is 391 Mb.
The multistage Dockerfile is 142 Mb.

PS: @chuymtz feel free to mark my answer as the answer if it is, to let others know that your question has been answered.

[chuymtz]

Wow Thank you sir! This worked perfectly. The only issue I faced is that I need to first download the .deb file because my organization blocks the wget command.
Thank you for the clear answer. It was easy to follow even for a noob like me.

[mcanouil]

Then download the deb manually and change the Dockerfile to:

FROM nginx:latest AS build
COPY mysite /mysite
COPY quarto.deb /tmp/quarto.deb
RUN dpkg -i /tmp/quarto.deb
RUN quarto render /mysite --output-dir /usr/share/nginx/html
FROM nginx:latest
COPY --from=build /usr/share/nginx/html /usr/share/nginx/html
EXPOSE 80

[chuymtz]

Yes, it worked perfectly. I have my site up and running now. Thanks again

[eitsupi]

Note: If the use case is preview (changes to the source code will also update the preview), such a command could be used.

quarto preview --host 0.0.0.0 --port 3838 --no-browser

Without the --no-browser option, quarto will try to launch the browser (although nothing will happen if the browser is not found in the container)

The use case is this.
https://github.com/rocker-org/website/blob/e329e61ce4386e6e6d65075847e715e81c24049f/.build/start.sh#L22

[mcanouil]

This is handy when running the container with bind mounts.
This way, the container is simply a builder that could be use without requiring Quarto locally.

[mcanouil]

FYI: https://mickael.canouil.fr/posts/2023-05-07-quarto-docker/

[th0ger]

FYI: https://mickael.canouil.fr/posts/2023-05-07-quarto-docker/

@mcanouil what about getting 404 pages to work within Docker running locally?
I have managed to add:

[.htaccess]
ErrorDocument 404 /404.html

[Dockerfile]
COPY ./.htaccess /usr/local/apache2/htdocs/.htaccess

So the 404 page is found when the site is served at localhost:8080, but the CSS is not applied.
The quarto docs says I shoud set the site-url, but site-url: http://localhost:8080 doesnt work.

[mcanouil]

Do you have an actual example?

[th0ger]

Actually I got it to work :-)
site-url: https://mydomain.com/ works even when running on localhost. No sitepath.

dockerfile:

<see blogpost>
...
FROM httpd:alpine
WORKDIR /usr/local/apache2/
COPY --from=builder /app/_site/ htdocs/
COPY httpd-custom.conf conf/extra/httpd-custom.conf
RUN printf "# Enable custom config\nInclude conf/extra/httpd-custom.conf\n\n" >> conf/httpd.conf

httpd-custom.conf:

# Set custom "Page not found"
ErrorDocument 404 /404.html

<IfModule headers_module>
    # Make the client check for stale cache after 'max-age' seconds.
    # (The server will then return 200 or 304 depending on if the resource has changed.)
    # This is ensures that clients will get updates after site is redeployed.
    Header set Cache-Control "max-age=30"
</IfModule>

I included also an important max-age setting here, in case anyone is interested.

[mcanouil]

Regarding httpd server configuration, there are various things that can/should be done depending on the purpose of the container/server.
I did not want to go in that rabbit hole.