Fix pnpm + docker (#1385)

* Fix pnpm + docker

* Fix environment variable setting

* Add debug step to check pnpm version

* Try passing secrets file

* Try another way of passing values between steps

* Fix bad build-args management

.github/workflows/ghcr.yml

@@ -14,8 +14,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: checkout
-        uses: actions/checkout@v2
+      - uses: actions/checkout@v2
 
       - uses: docker/setup-buildx-action@v1
         with:
@@ -35,9 +34,16 @@ jobs:
             type=sha
             type=ref,event=tag
 
+      - name: Get pnpm-version
+        id: pnpm-version
+        run: |
+          echo "::set-output name=val::$(cat .pnpm-version)"
+
       - uses: docker/build-push-action@v2
         with:
           context: .
           tags: ${{ steps.metadata.outputs.tags }}
           labels: ${{ steps.metadata.outputs.labels }}
           push: true
+          build-args: |
+            PNPM_VERSION=${{ steps.pnpm-version.outputs.val }}

.pnpm-version

@@ -0,0 +1 @@
+6.32.11

Dockerfile

@@ -1,101 +1,33 @@
-# ==
-# builder
-# ==
+FROM node:16-alpine
 
-# application builder
-FROM node:16 AS builder
+ARG PNPM_VERSION
 
-WORKDIR /usr/app
+RUN npm install -g pnpm@${PNPM_VERSION}
 
-ARG API_URL
+USER node
 
-# Install pnpm
-RUN npm install -g pnpm
+WORKDIR /home/node/app
 
-# copy package.json and package-lock.json files
-COPY package.json .
 COPY pnpm-lock.yaml .
-COPY .npmrc .
 
 # install dependencies including local development tools
-RUN pnpm install --store=pnpm-store
+RUN pnpm fetch
 
 # copy the rest of the content
-COPY . /usr/app
-
-# disable telemetry when building the app
-ENV NUXT_TELEMETRY_DISABLED=1
-
-# build the application and generate a distribution package
-RUN pnpm build
-
-# ==
-# development
-# ==
-# application for development purposes
-FROM node:16 AS dev
+COPY --chmod=777 . /home/node/app
 
-WORKDIR /usr/app
-
-# Install pnpm
-RUN npm install -g pnpm
-
-ENV NODE_ENV=development
-ENV CYPRESS_INSTALL_BINARY=0
-
-# copy files from local machine
-COPY . /usr/app
-
-COPY --from=builder /usr/app/pnpm-store /usr/app/pnpm-store
+RUN pnpm install -r --offline
 
 # disable telemetry when building the app
 ENV NUXT_TELEMETRY_DISABLED=1
 
-# install dependencies (development dependencies included)
-RUN pnpm install --store=pnpm-store
-
-# expose port 8443
-EXPOSE 8443
-
-# run the application in development mode
-ENTRYPOINT [ "pnpm", "run", "dev" ]
-
-# ==
-# production
-# ==
-# application package (for production)
-FROM node:16-alpine AS app
-
-WORKDIR /usr/app
-
-# Install pnpm
-RUN npm install -g pnpm
-
 ENV NODE_ENV=production
-ENV PLAYWRIGHT_SKIP_BROWSER_GC=1
-
-# copy package.json and package-lock.json files
-COPY package.json .
-COPY pnpm-lock.yaml .
-COPY .npmrc .
-
-# copy the nuxt configuration file
-COPY --from=builder /usr/app/nuxt.config.ts .
-
-# copy distribution directory with the static content
-COPY --from=builder /usr/app/.nuxt /usr/app/.nuxt
 
-# copy publically-accessible static assets
-COPY --from=builder /usr/app/src/static /usr/app/src/static
-
-# Copy over files needed by Nuxt's runtime process
-COPY --from=builder /usr/app/src/locales /usr/app/src/locales
-COPY --from=builder /usr/app/src/utils  /usr/app/src/utils
-COPY --from=builder /usr/app/src/constants  /usr/app/src/constants
-COPY --from=builder /usr/app/src/server-middleware  /usr/app/src/server-middleware
-COPY --from=builder /usr/app/pnpm-store /usr/app/pnpm-store
+ARG API_URL
 
-RUN pnpm install --frozen-lockfile --store=pnpm-store
+RUN pnpm i18n
+# build the application and generate a distribution package
+RUN pnpm build:only
 
 # set app serving to permissive / assigned
 ENV NUXT_HOST=0.0.0.0

Dockerfile.playwright

@@ -1,5 +1,6 @@
 ARG PLAYWRIGHT_VERSION
+ARG PNPM_VERSION
 
 FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-focal
 
-RUN npm install -g pnpm
+RUN npm install -g pnpm@${PNPM_VERSION}

README.md

@@ -25,7 +25,7 @@ We use [Volta](https://volta.sh/) to manage our local environment tools. Please
 Once you have volta installed, manually install `pnpm` using volta. [Volta does not currently officially support `pnpm`](https://github.com/volta-cli/volta/issues/737) so this is a stop gap solution until that support is implemented:
 
 ```bash
-volta install pnpm
+volta install pnpm@$(cat .pnpm-version)
 ```
 
 Run the following commands in order to have the code up and running on your machine:
@@ -74,18 +74,14 @@ You can find the local IP address Nuxt uses by looking at the output of `nuxt de
 
 You will need to regenerate the certificate if this IP address changes for any reason, like by enabling a VPN or changing networks.
 
-### Docker setup
+### Choosing which API to use
 
-Alternatively, you can use Docker to build and run the application. You just have to run:
+You don't need to have the Openverse API running locally to be able to run the frontend application. It's configured to communicate, by default, with the [production API](https://api.openverse.engineering) that's already publicly available. If you need to test against changes in your local API, set the `API_URL` environment variable when run the development server.
 
-```bash
-docker-compose up
+```shell
+API_URL=http://localhost:8000 pnpm dev
 ```
 
-You should now have the application running and accessible at http://localhost:8443.
-
-You don't need to have the Openverse API running locally to be able to run the frontend application. It's configured to communicate, by default, with the [API](https://api.openverse.engineering) that's already publicly available. If you wish, you can change the URL of the API that's used during development by setting the `API_URL` environment variable.
-
 ### Standalone and embedded modes
 
 The application can run in two modes. By default, it runs in embedded mode, which is loaded in an iframe on [WordPress.org/openverse](https://make.wordpress.org/openverse). It has a small header without logo and no footer.
@@ -112,6 +108,26 @@ If you need to run an HTTP version (for example, if you're testing against third
 ngrok http 8443 -host-header="localhost:8443"
 ```
 
+## Docker and Openverse frontend
+
+We do not currently support local development using Docker or `docker-compose`. It was supported in the past, but it was not used by the core contributors. It remained broken for many months without ever being noticed, so the assumption is that it was also not being used active community members. Local `nuxt` development is still easy across platforms, so maintaining a separate Docker development stack for the frontend did not make sense.
+
+However, we do build and actively deploy the frontend using Docker images. If you wish to build the production image for yourself, run the following:
+
+```shell
+docker build . --build-arg PNPM_VERSION=$(cat .pnpm-version) -t openverse-frontend:latest
+```
+
+You can also find the latest `openverse-frontend` images on our [GitHub packages page](https://github.com/WordPress/openverse-frontend/pkgs/container/openverse-frontend).
+
+You can then run using either the locally built image or the `ghcr.io` image from the link above:
+
+```shell
+docker run -it -p 127.0.0.1:8443:8443/tcp openverse-frontend:latest
+```
+
+The app will be available at http://localhost:8443.
+
 ## Formatting and Linting
 
 The code in this repository is formatted using `prettier`. If you have prettier setup in your code editor it should work out of the box; otherwise you can use the `pnpm lint:fix` script to format and fix lint errors in your code. Checks are run to lint your code and validate the formatting on git precommit using [husky](https://github.com/typicode/husky).

bin/playwright.sh

@@ -8,6 +8,7 @@ export USER_ID=${USER_ID:-$(id -u)}
 export PLAYWRIGHT_ARGS=$@
 export PLAYWRIGHT_VERSION=$(version)
 export TEST_COMMAND=${TEST_COMMAND:-test:playwright:local}
+export PNPM_VERSION=$(cat .pnpm-version)
 
 echo Running Playwright v$PLAYWRIGHT_VERSION as $USER_ID with Playwright arguments $PLAYWRIGHT_ARGS
 

docker-compose.playwright.yml

@@ -6,6 +6,7 @@ services:
       dockerfile: Dockerfile.playwright
       args:
         - PLAYWRIGHT_VERSION=${PLAYWRIGHT_VERSION}
+        - PNPM_VERSION=${PNPM_VERSION}
     volumes:
       - .:/app
     user: ${USER_ID}