backstage: Techdocs not working in our docker images

Techdocs work just fine for us when running Backstage locally via yarn dev, but they do not work inside our frontend + backend Docker images.

Expected Behavior

We would expect techdocs to work the same as they do locally as they do in our Docker images.

Current Behavior

When we first try to go to a techdocs page, we see the following as expected:

After waiting a bit, the page changes to this:

The web console shows the following errors:

VM210:1 GET /api/techdocs/static/docs/default/component/rfc-node-api002/index.html net::ERR_ABORTED 404 (Not Found)
(anonymous) @ VM210:1
getEntityDocs @ index.esm.js:111
async function (async)
getEntityDocs @ index.esm.js:107
(anonymous) @ index.esm.js:1143
(anonymous) @ useAsyncFn.js:19
(anonymous) @ useAsync.js:9
io @ react-dom.production.min.js:211
wu @ react-dom.production.min.js:257
t.unstable_runWithPriority @ scheduler.production.min.js:19
Bl @ react-dom.production.min.js:122
bu @ react-dom.production.min.js:257
ru @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:19
Bl @ react-dom.production.min.js:122
ql @ react-dom.production.min.js:123
$l @ react-dom.production.min.js:122
F @ react-dom.production.min.js:287
qt @ react-dom.production.min.js:68

eventsource.js:913 Error: No activity within 45000 milliseconds. 9947 chars received. Reconnecting.
    at V (eventsource.js:936)
    at eventsource.js:945

Here are the build logs which don’t appear to show any error:

info: Step 1 of 3: Preparing docs for entity component:default/rfc-node-api002 {"timestamp":"2021-11-16T14:57:30.189Z"}
info: Prepare step completed for entity component:default/rfc-node-api002, stored at /tmp/backstage-GJgcLN {"timestamp":"2021-11-16T14:57:31.384Z"}
info: Step 2 of 3: Generating docs for entity component:default/rfc-node-api002 {"timestamp":"2021-11-16T14:57:31.385Z"}
info: Set {"edit_uri":"https://github.com/REDACTED/rfc-node-api002/edit/master/docs"}. You can disable this feature by manually setting 'repo_url' or 'edit_uri' according to the MkDocs documentation at https://www.mkdocs.org/user-guide/configuration/#repo_url {"timestamp":"2021-11-16T14:57:31.390Z"}
DEBUG    -  Loading configuration file: /tmp/backstage-GJgcLN/mkdocs.yml
DEBUG    -  Loaded theme configuration for 'mkdocs' from '/usr/lib/python3.8/site-packages/mkdocs/themes/mkdocs/mkdocs_theme.yml': {'static_templates': ['404.html'], 'locale': 'en', 'include_search_page': False, 'search_index_only': False, 'highlightjs': True, 'hljs_languages': [], 'hljs_style': 'github', 'navigation_depth': 2, 'nav_style': 'primary', 'analytics': {'gtag': None}, 'shortcuts': {'help': 191, 'next': 78, 'previous': 80, 'search': 83}}
DEBUG    -  Config value: 'config_file_path' = '/tmp/backstage-GJgcLN/mkdocs.yml'
DEBUG    -  Config value: 'site_name' = 'rfc-node-api002'
DEBUG    -  Config value: 'nav' = [{'Home': 'index.md'}]
DEBUG    -  Config value: 'pages' = None
DEBUG    -  Config value: 'site_url' = ''
DEBUG    -  Config value: 'site_description' = 'rfc-node-api002'
DEBUG    -  Config value: 'site_author' = None
DEBUG    -  Config value: 'theme' = Theme(name='mkdocs', dirs=['/usr/lib/python3.8/site-packages/mkdocs/themes/mkdocs', '/usr/lib/python3.8/site-packages/mkdocs/templates'], static_templates=['404.html', 'sitemap.xml'], locale=Locale(language='en', territory=''), include_search_page=False, search_index_only=False, highlightjs=True, hljs_languages=[], hljs_style='github', navigation_depth=2, nav_style='primary', analytics={'gtag': None}, shortcuts={'help': 191, 'next': 78, 'previous': 80, 'search': 83})
DEBUG    -  Config value: 'docs_dir' = '/tmp/backstage-GJgcLN/docs'
DEBUG    -  Config value: 'site_dir' = '/tmp/techdocs-tmp-CoFOBN'
DEBUG    -  Config value: 'copyright' = None
DEBUG    -  Config value: 'google_analytics' = None
DEBUG    -  Config value: 'dev_addr' = Address(host='127.0.0.1', port=8000)
DEBUG    -  Config value: 'use_directory_urls' = True
DEBUG    -  Config value: 'repo_url' = '/'
DEBUG    -  Config value: 'repo_name' = ''
DEBUG    -  Config value: 'edit_uri' = 'https://github.com/REDACTED/rfc-node-api002/edit/master/docs/'
DEBUG    -  Config value: 'extra_css' = []
DEBUG    -  Config value: 'extra_javascript' = []
DEBUG    -  Config value: 'extra_templates' = []
DEBUG    -  Config value: 'markdown_extensions' = ['toc', 'tables', 'fenced_code']
DEBUG    -  Config value: 'mdx_configs' = {}
DEBUG    -  Config value: 'strict' = False
DEBUG    -  Config value: 'remote_branch' = 'gh-pages'
DEBUG    -  Config value: 'remote_name' = 'origin'
DEBUG    -  Config value: 'extra' = {}
DEBUG    -  Config value: 'plugins' = PluginCollection([('techdocs-core', <src.core.TechDocsCore object at 0x7f1b2f583be0>)])
DEBUG    -  Loaded theme configuration for 'material' from '/usr/lib/python3.8/site-packages/material/mkdocs_theme.yml': {'language': 'en', 'direction': None, 'features': [], 'palette': {'primary': None, 'accent': None}, 'font': {'text': 'Roboto', 'code': 'Roboto Mono'}, 'icon': None, 'favicon': 'assets/images/favicon.png', 'include_search_page': False, 'search_index_only': True, 'static_templates': ['404.html']}
INFO     -  Cleaning site directory
INFO     -  Building documentation to directory: /tmp/techdocs-tmp-CoFOBN
DEBUG    -  Reading markdown pages.
DEBUG    -  Reading: index.md
DEBUG    -  Copying static assets.
DEBUG    -  Copying media file: 'assets/images/favicon.png'
DEBUG    -  Copying media file: 'assets/javascripts/bundle.7f4f3c92.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/bundle.7f4f3c92.min.js.map'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.ar.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.da.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.de.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.du.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.es.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.fi.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.fr.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.hu.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.it.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.ja.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.jp.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.multi.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.nl.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.no.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.pt.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.ro.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.ru.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.stemmer.support.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.sv.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.tr.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/min/lunr.vi.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/lunr/tinyseg.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/vendor.d710d30a.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/vendor.d710d30a.min.js.map'
DEBUG    -  Copying media file: 'assets/javascripts/worker/search.9b3611bd.min.js'
DEBUG    -  Copying media file: 'assets/javascripts/worker/search.9b3611bd.min.js.map'
DEBUG    -  Copying media file: 'assets/stylesheets/main.fe0cca5b.min.css'
DEBUG    -  Copying media file: 'assets/stylesheets/main.fe0cca5b.min.css.map'
DEBUG    -  Copying media file: 'assets/stylesheets/palette.a46bcfb3.min.css'
DEBUG    -  Copying media file: 'assets/stylesheets/palette.a46bcfb3.min.css.map'
DEBUG    -  Building theme template: 404.html
DEBUG    -  Building theme template: techdocs_metadata.json
DEBUG    -  Building theme template: sitemap.xml
DEBUG    -  Gzipping template: sitemap.xml
DEBUG    -  Building markdown pages.
DEBUG    -  Building page index.md
INFO     -  Documentation built in 0.85 seconds
info: Successfully generated docs from /tmp/backstage-GJgcLN into /tmp/techdocs-tmp-CoFOBN using local mkdocs {"timestamp":"2021-11-16T14:57:33.610Z"}

---

If we refresh the page, we now see the following instead:

The web console now has the following error:

Refused to apply style from '/api/techdocs/static/docs/default/component/rfc-node-api002/assets/stylesheets/main.fe0cca5b.min.css' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

If we check the Network tools in Chrome, it shows that /api/techdocs/static/docs/default/component/rfc-node-api002/assets/stylesheets/main.fe0cca5b.min.css is giving us a 404. However, /api/techdocs/static/docs/default/component/rfc-node-api002/index.html is coming back with a 200.

Your Environment

• NodeJS Version: 16.13.0
• Operating System and Version: Alpine Linux 3.13
• Browser Information: Chrome 95.0.4638.69 (Official Build) (x86_64) (Mac OS)

We are using node:lts-alpine@sha256:777b5a7bf0c40e37766ff8df382c900f16c688ed05ae3a72d32a26f3e9002cf9 as our Docker base image to build the frontend and backend.

The backend is built using:

RUN yarn tsc
RUN yarn workspace backend backstage-cli backend:bundle --build-dependencies

We install dependencies needed for cookecutter/techdocs:

# install bash, perl & python/pip for techdocs
RUN apk --update --no-cache add bash perl python3 py3-pip && python3 -m ensurepip

# install cookiecutter + techdocs for local render (see link)
# https://backstage.io/docs/features/techdocs/getting-started#disabling-docker-in-docker-situation-optional
RUN pip3 install --no-cache --upgrade cookiecutter mkdocs-techdocs-core==0.2.0

The frontend is built using:

RUN yarn workspace app build

The backend is using the same base image as above to run.

After the frontend is built, it uses the following Nginx Docker base image: nginx:1-alpine@sha256:b1e9d4ee508c832db0985edbed13f932df7e750f9521e935a78005c30d376346.