From f8359cbb79885df7bd793b2dc8e2bc728a61032b Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 4 May 2022 09:21:23 +0100 Subject: [PATCH 1/6] Fix pnpm + docker --- .github/workflows/ghcr.yml | 7 ++- .pnpm-version | 1 + Dockerfile | 92 +++++--------------------------------- Dockerfile.playwright | 3 +- README.md | 26 +++++++---- bin/playwright.sh | 1 + docker-compose.yml | 12 ----- 7 files changed, 38 insertions(+), 104 deletions(-) create mode 100644 .pnpm-version delete mode 100644 docker-compose.yml diff --git a/.github/workflows/ghcr.yml b/.github/workflows/ghcr.yml index daa317f4e0..7b8988895a 100644 --- a/.github/workflows/ghcr.yml +++ b/.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,6 +34,10 @@ jobs: type=sha type=ref,event=tag + - name: Set PNPM_VERSION + run: | + export PNPM_VERSION=$(cat .pnpm-version) + - uses: docker/build-push-action@v2 with: context: . diff --git a/.pnpm-version b/.pnpm-version new file mode 100644 index 0000000000..8a00ab7df5 --- /dev/null +++ b/.pnpm-version @@ -0,0 +1 @@ +6.32.11 diff --git a/Dockerfile b/Dockerfile index 2776eb7767..64143b41d3 100644 --- a/Dockerfile +++ b/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 diff --git a/Dockerfile.playwright b/Dockerfile.playwright index b2056dfc94..7dc22c195c 100644 --- a/Dockerfile.playwright +++ b/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} diff --git a/README.md b/README.md index d6db0960fd..8616ba78d9 100644 --- a/README.md +++ b/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,18 @@ 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 +PNPM_VERISON=$(cat .pnpm-version) docker build . 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). + ## 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). diff --git a/bin/playwright.sh b/bin/playwright.sh index 275e425ef3..5aa1a6264c 100755 --- a/bin/playwright.sh +++ b/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 diff --git a/docker-compose.yml b/docker-compose.yml deleted file mode 100644 index c504c20e24..0000000000 --- a/docker-compose.yml +++ /dev/null @@ -1,12 +0,0 @@ -version: "3" -services: - web: - build: - context: . - target: dev - ports: - - "8443:8443" - environment: - # HOST is necessary for Nuxt + Docker - HOST: 0.0.0.0 - PORT: 8443 From e6730807acb2ffaea0ced99df1dd8a1d82819b1e Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 4 May 2022 12:03:40 +0100 Subject: [PATCH 2/6] Fix environment variable setting --- .github/workflows/ghcr.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ghcr.yml b/.github/workflows/ghcr.yml index 7b8988895a..126f06f0ad 100644 --- a/.github/workflows/ghcr.yml +++ b/.github/workflows/ghcr.yml @@ -36,7 +36,7 @@ jobs: - name: Set PNPM_VERSION run: | - export PNPM_VERSION=$(cat .pnpm-version) + echo "PNPM_VERSION=$(cat .pnpm-version)" >> $GITHUB_ENV - uses: docker/build-push-action@v2 with: From 9b1ee5f5577640d78f9dee3b639f50610dffc53e Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 4 May 2022 12:11:33 +0100 Subject: [PATCH 3/6] Add debug step to check pnpm version --- Dockerfile | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Dockerfile b/Dockerfile index 64143b41d3..d2cf496283 100644 --- a/Dockerfile +++ b/Dockerfile @@ -4,6 +4,8 @@ ARG PNPM_VERSION RUN npm install -g pnpm@${PNPM_VERSION} +RUN pnpm --version + USER node WORKDIR /home/node/app From 59442d05b1ff25f8be33c6996da30c317aebf811 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 4 May 2022 12:22:44 +0100 Subject: [PATCH 4/6] Try passing secrets file --- .github/workflows/ghcr.yml | 6 ++---- Dockerfile | 2 -- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/.github/workflows/ghcr.yml b/.github/workflows/ghcr.yml index 126f06f0ad..e7f7be2898 100644 --- a/.github/workflows/ghcr.yml +++ b/.github/workflows/ghcr.yml @@ -34,13 +34,11 @@ jobs: type=sha type=ref,event=tag - - name: Set PNPM_VERSION - run: | - echo "PNPM_VERSION=$(cat .pnpm-version)" >> $GITHUB_ENV - - uses: docker/build-push-action@v2 with: context: . tags: ${{ steps.metadata.outputs.tags }} labels: ${{ steps.metadata.outputs.labels }} push: true + secret-files: | + PNPM_VERSION=./.pnpm-version diff --git a/Dockerfile b/Dockerfile index d2cf496283..64143b41d3 100644 --- a/Dockerfile +++ b/Dockerfile @@ -4,8 +4,6 @@ ARG PNPM_VERSION RUN npm install -g pnpm@${PNPM_VERSION} -RUN pnpm --version - USER node WORKDIR /home/node/app From 8d069685660e5a4ce7c403a6242a636e9946be5c Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 4 May 2022 19:51:19 +0100 Subject: [PATCH 5/6] Try another way of passing values between steps --- .github/workflows/ghcr.yml | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ghcr.yml b/.github/workflows/ghcr.yml index e7f7be2898..0d3432ff90 100644 --- a/.github/workflows/ghcr.yml +++ b/.github/workflows/ghcr.yml @@ -34,11 +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 - secret-files: | - PNPM_VERSION=./.pnpm-version + build-args: | + PNPM_VERSION=${{ steps.pnpm-version.outputs.val }} From ccf8bc7718dee3666f4a76579d74be310d71be81 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Thu, 5 May 2022 07:36:00 +0100 Subject: [PATCH 6/6] Fix bad build-args management --- README.md | 10 +++++++++- docker-compose.playwright.yml | 1 + 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8616ba78d9..5a249ba7fa 100644 --- a/README.md +++ b/README.md @@ -115,11 +115,19 @@ We do not currently support local development using Docker or `docker-compose`. 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 -PNPM_VERISON=$(cat .pnpm-version) docker build . openverse-frontend:latest +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). diff --git a/docker-compose.playwright.yml b/docker-compose.playwright.yml index d768d9d4f1..ae53bfbf72 100644 --- a/docker-compose.playwright.yml +++ b/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}