DEV Community

Francesco Menghi
Francesco Menghi

Posted on

Getting Nginx to work

This past week I finally finished the work necessary for the issue about sharing a single nginx container for all static sites.

I moved docusaurus and test-web-content into src/web in separate PRs and then started working on the Nginx config and Dockerfile.

I originally posted a PR with an Nginx config that would put the Telescope app and the Docusaurus app in two different ports but I was told in the review process to keep everything on port 8000 and simply have Docusaurus at /docs which makes a lot more sense.

I was stuck for a while on getting the Docusaurus app to show on localhost:8000/docs as I kept getting a 403 Error message. Eventually, with help from Josue, I managed to make the configuration work.

Dockefile

The Dockerfile is divided into different layers. It starts with node:16 as base and then goes through separate layers to install dependencies and build the apps. Each layer is specific to either the Telescope app or the Docusaurus app so that if there's a change in one, not everything needs to be rebuilt from scratch.

The final layer uses the Nginx Alpine image (Alpine images are famous for being much smaller in size) and inside we copy the builds from previous layers like this:

FROM nginx:1.20.2-alpine as deploy

WORKDIR /

COPY --from=build-app /app/out /var/www/data

COPY --from=build-docs /docs/build /usr/share/nginx/html/docs
Enter fullscreen mode Exit fullscreen mode

Nginx config

For Nginx, I had to add following to the config template:

location /docs {
    root /usr/share/nginx/html;
}
Enter fullscreen mode Exit fullscreen mode

and change the baseUrl in docusaurus.config.js to /docs/.

It definitely took longer than I expected to get all of this working since I am still new to Docker but it was very rewarding to see it work. Hopefully this PR can be merged soon.


Finally, since we are getting close to release the Docusaurus app to production, I also took the opportunity to fix all the broken links with this PR.

Top comments (0)