From 2938aba48400052952aec7094b1d91250f7ba428 Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 8 Mar 2022 11:21:17 +0100 Subject: [PATCH 1/2] Multi-platform images (#1924) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * base front production image on official nginx * build multi-platform docker images * build message types outside docker * set docker build context to path * build message types before running e2e tests * add build for arm/v7 * remove build for arm/v7 * increase yarn network timeout * set front port to 80 * add git labels to images https://github.com/docker/build-push-action/blob/master/UPGRADE.md#tags-with-ref-and-git-labels * add images input * Adding back commented code in the Dockerfile (the protobuf message building). This way, when node-grpc supports ARM64, we can uncomment the code again. Co-authored-by: David Négrier Co-authored-by: Lukas Hass @lukashass --- .github/workflows/build-and-deploy.yml | 232 ++++++++++++++++++------- .github/workflows/end_to_end_tests.yml | 6 + back/Dockerfile | 22 ++- front/Dockerfile | 29 ++-- pusher/Dockerfile | 24 +-- tests/README.md | 7 + 6 files changed, 226 insertions(+), 94 deletions(-) diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml index d6a3c49b..e924cc11 100644 --- a/.github/workflows/build-and-deploy.yml +++ b/.github/workflows/build-and-deploy.yml @@ -6,131 +6,237 @@ on: release: types: [created] pull_request: - types: [ labeled, synchronize ] - - -# Enables BuildKit -env: - DOCKER_BUILDKIT: 1 + types: [labeled, synchronize] jobs: - build-front: if: ${{ github.event_name == 'push' || github.event_name == 'release' || github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'deploy') }} runs-on: ubuntu-latest steps: - - name: Checkout uses: actions/checkout@v2 - - # Create a slugified value of the branch - - uses: rlespinasse/github-slug-action@3.1.0 - - - name: "Build and push front image" - uses: docker/build-push-action@v1 + - name: Setup NodeJS + uses: actions/setup-node@v2 + with: + node-version: '14' + + # messages + - name: Install messages dependencies + run: yarn install + working-directory: messages + + - name: Build proto messages + run: yarn run ts-proto && yarn run copy-to-front-ts-proto && yarn run json-copy-to-front + working-directory: messages + + # docker + - name: Set up QEMU + uses: docker/setup-qemu-action@v1 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v1 + + - name: Login to DockerHub + uses: docker/login-action@v1 with: - dockerfile: front/Dockerfile - path: ./ username: ${{ secrets.DOCKER_USERNAME }} password: ${{ secrets.DOCKER_PASSWORD }} - repository: thecodingmachine/workadventure-front - tags: ${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} - add_git_labels: true + + - uses: rlespinasse/github-slug-action@3.1.0 + + - name: Docker meta + id: meta + uses: docker/metadata-action@v3 + with: + images: thecodingmachine/workadventure-front + + - name: Build and push + uses: docker/build-push-action@v2 + with: + context: . + file: front/Dockerfile + platforms: linux/amd64,linux/arm64 + push: true + tags: thecodingmachine/workadventure-front:${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} + labels: ${{ steps.meta.outputs.labels }} build-back: if: ${{ github.event_name == 'push' || github.event_name == 'release' || github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'deploy') }} runs-on: ubuntu-latest steps: - - name: Checkout uses: actions/checkout@v2 - # Create a slugified value of the branch - - uses: rlespinasse/github-slug-action@3.1.0 - - - name: "Build and push back image" - uses: docker/build-push-action@v1 + - name: Setup NodeJS + uses: actions/setup-node@v2 + with: + node-version: '14' + + # messages + - name: Install messages dependencies + run: yarn install + working-directory: messages + + - name: Build proto messages + run: yarn run proto && yarn run copy-to-back + working-directory: messages + + # docker + - name: Set up QEMU + uses: docker/setup-qemu-action@v1 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v1 + + - name: Login to DockerHub + uses: docker/login-action@v1 with: - dockerfile: back/Dockerfile - path: ./ username: ${{ secrets.DOCKER_USERNAME }} password: ${{ secrets.DOCKER_PASSWORD }} - repository: thecodingmachine/workadventure-back - tags: ${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} - add_git_labels: true + + - uses: rlespinasse/github-slug-action@3.1.0 + + - name: Docker meta + id: meta + uses: docker/metadata-action@v3 + with: + images: thecodingmachine/workadventure-back + + - name: Build and push + uses: docker/build-push-action@v2 + with: + context: . + file: back/Dockerfile + platforms: linux/amd64,linux/arm64 + push: true + tags: thecodingmachine/workadventure-back:${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} + labels: ${{ steps.meta.outputs.labels }} build-pusher: if: ${{ github.event_name == 'push' || github.event_name == 'release' || github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'deploy') }} runs-on: ubuntu-latest steps: - - name: Checkout uses: actions/checkout@v2 - # Create a slugified value of the branch - - uses: rlespinasse/github-slug-action@3.1.0 - - - name: "Build and push back image" - uses: docker/build-push-action@v1 + - name: Setup NodeJS + uses: actions/setup-node@v2 + with: + node-version: '14' + + # messages + - name: Install messages dependencies + run: yarn install + working-directory: messages + + - name: Build proto messages + run: yarn run proto && yarn run copy-to-pusher && yarn run json-copy-to-pusher + working-directory: messages + + # docker + - name: Set up QEMU + uses: docker/setup-qemu-action@v1 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v1 + + - name: Login to DockerHub + uses: docker/login-action@v1 with: - dockerfile: pusher/Dockerfile - path: ./ username: ${{ secrets.DOCKER_USERNAME }} password: ${{ secrets.DOCKER_PASSWORD }} - repository: thecodingmachine/workadventure-pusher - tags: ${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} - add_git_labels: true + + - uses: rlespinasse/github-slug-action@3.1.0 + + - name: Docker meta + id: meta + uses: docker/metadata-action@v3 + with: + images: thecodingmachine/workadventure-pusher + + - name: Build and push + uses: docker/build-push-action@v2 + with: + context: . + file: pusher/Dockerfile + platforms: linux/amd64,linux/arm64 + push: true + tags: thecodingmachine/workadventure-pusher:${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} + labels: ${{ steps.meta.outputs.labels }} build-uploader: if: ${{ github.event_name == 'push' || github.event_name == 'release' || github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'deploy') }} runs-on: ubuntu-latest steps: + - name: Set up QEMU + uses: docker/setup-qemu-action@v1 - - name: Checkout - uses: actions/checkout@v2 + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v1 - # Create a slugified value of the branch - - uses: rlespinasse/github-slug-action@3.1.0 - - - name: "Build and push back image" - uses: docker/build-push-action@v1 + - name: Login to DockerHub + uses: docker/login-action@v1 with: - dockerfile: uploader/Dockerfile - path: ./ username: ${{ secrets.DOCKER_USERNAME }} password: ${{ secrets.DOCKER_PASSWORD }} - repository: thecodingmachine/workadventure-uploader - tags: ${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} - add_git_labels: true + + - uses: rlespinasse/github-slug-action@3.1.0 + + - name: Docker meta + id: meta + uses: docker/metadata-action@v3 + with: + images: thecodingmachine/workadventure-uploader + + - name: Build and push + uses: docker/build-push-action@v2 + with: + file: uploader/Dockerfile + push: true + tags: thecodingmachine/workadventure-uploader:${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} + labels: ${{ steps.meta.outputs.labels }} build-maps: if: ${{ github.event_name == 'push' || github.event_name == 'release' || github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'deploy') }} runs-on: ubuntu-latest steps: - - name: Checkout uses: actions/checkout@v2 + - name: Set up QEMU + uses: docker/setup-qemu-action@v1 - # Create a slugified value of the branch - - uses: rlespinasse/github-slug-action@3.1.0 + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v1 - - name: "Build and push front image" - uses: docker/build-push-action@v1 + - name: Login to DockerHub + uses: docker/login-action@v1 with: - dockerfile: maps/Dockerfile - path: maps/ username: ${{ secrets.DOCKER_USERNAME }} password: ${{ secrets.DOCKER_PASSWORD }} - repository: thecodingmachine/workadventure-maps - tags: ${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} - add_git_labels: true + + - uses: rlespinasse/github-slug-action@3.1.0 + + - name: Docker meta + id: meta + uses: docker/metadata-action@v3 + with: + images: thecodingmachine/workadventure-maps + + - name: Build and push + uses: docker/build-push-action@v2 + with: + context: maps/ + file: maps/Dockerfile + push: true + tags: thecodingmachine/workadventure-maps:${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} + labels: ${{ steps.meta.outputs.labels }} deeploy: needs: diff --git a/.github/workflows/end_to_end_tests.yml b/.github/workflows/end_to_end_tests.yml index 560e1dc3..e369fe2f 100644 --- a/.github/workflows/end_to_end_tests.yml +++ b/.github/workflows/end_to_end_tests.yml @@ -23,6 +23,12 @@ jobs: run: npx playwright install --with-deps - name: 'Setup .env file' run: cp .env.template .env + - name: Install messages dependencies + run: yarn install + working-directory: messages + - name: Build proto messages + run: yarn run proto-all + working-directory: messages - name: Build WorkAdventure run: docker-compose -f docker-compose.yaml -f docker-compose.e2e.yml build --parallel - name: Start WorkAdventure diff --git a/back/Dockerfile b/back/Dockerfile index 084ac52a..d99d3ff3 100644 --- a/back/Dockerfile +++ b/back/Dockerfile @@ -1,18 +1,22 @@ +# The building of ProtoBuf "messages" must be done out of Docker because grpc-node does not ship with ARM64 binaries. +# See: https://github.com/grpc/grpc-node/issues/1405 +# When the issue above is closed, we can move back messages building inside Dockerfile + # protobuf build -FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder -WORKDIR /usr/src -COPY messages/yarn.lock messages/package.json ./ -RUN yarn install -COPY messages . -RUN yarn proto +#FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as proto-builder +#WORKDIR /usr/src +#COPY messages/yarn.lock messages/package.json ./ +#RUN yarn install +#COPY messages . +#RUN yarn proto # typescript build -FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder2 +FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder WORKDIR /usr/src COPY back/yarn.lock back/package.json ./ RUN yarn install COPY back . -COPY --from=builder /usr/src/generated src/Messages/generated +#COPY --from=proto-builder /usr/src/generated src/Messages/generated ENV NODE_ENV=production RUN yarn run tsc @@ -22,7 +26,7 @@ WORKDIR /usr/src COPY back/yarn.lock back/package.json ./ ENV NODE_ENV=production RUN yarn install --production -COPY --from=builder2 /usr/src/dist /usr/src/dist +COPY --from=builder /usr/src/dist /usr/src/dist USER node CMD ["yarn", "run", "runprod"] diff --git a/front/Dockerfile b/front/Dockerfile index bc437e64..3ca9f76c 100644 --- a/front/Dockerfile +++ b/front/Dockerfile @@ -1,20 +1,24 @@ +# The building of ProtoBuf "messages" must be done out of Docker because grpc-node does not ship with ARM64 binaries. +# See: https://github.com/grpc/grpc-node/issues/1405 +# When the issue above is closed, we can move back messages building inside Dockerfile + # protobuf build -FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder -WORKDIR /usr/src -COPY messages/yarn.lock messages/package.json ./ -RUN yarn install -COPY messages . -RUN yarn ts-proto +#FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as proto-builder +#WORKDIR /usr/src +#COPY messages/yarn.lock messages/package.json ./ +#RUN yarn install +#COPY messages . +#RUN yarn ts-proto # typescript build -FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder2 +FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder WORKDIR /usr/src COPY front/yarn.lock front/package.json ./ -RUN yarn install +RUN yarn install --network-timeout 1000000 COPY front . -COPY --from=builder /usr/src/ts-proto-generated/protos src/Messages/ts-proto-generated -RUN sed -i 's/import { Observable } from "rxjs";/import type { Observable } from "rxjs";/g' src/Messages/ts-proto-generated/messages.ts -COPY --from=builder /usr/src/JsonMessages src/Messages/JsonMessages +#COPY --from=proto-builder /usr/src/ts-proto-generated/protos src/Messages/ts-proto-generated +#RUN sed -i 's/import { Observable } from "rxjs";/import type { Observable } from "rxjs";/g' src/Messages/ts-proto-generated/messages.ts +#COPY --from=proto-builder /usr/src/JsonMessages src/Messages/JsonMessages RUN yarn run typesafe-i18n && yarn run build-iframe-api && yarn build # final production image @@ -22,7 +26,8 @@ FROM nginx:1.21.6-alpine COPY front/nginx.conf /etc/nginx/conf.d/default.conf COPY front/templater.sh / -COPY --from=builder2 /usr/src/dist /usr/share/nginx/html + +COPY --from=builder /usr/src/dist /usr/share/nginx/html EXPOSE 80 CMD ["/bin/sh", "-c", "/templater.sh && envsubst < /usr/share/nginx/html/env-config.template.js > /usr/share/nginx/html/env-config.js && exec nginx -g 'daemon off;'"] diff --git a/pusher/Dockerfile b/pusher/Dockerfile index 912ef58e..9055dec5 100644 --- a/pusher/Dockerfile +++ b/pusher/Dockerfile @@ -1,19 +1,23 @@ +# The building of ProtoBuf "messages" must be done out of Docker because grpc-node does not ship with ARM64 binaries. +# See: https://github.com/grpc/grpc-node/issues/1405 +# When the issue above is closed, we can move back messages building inside Dockerfile + # protobuf build -FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder -WORKDIR /usr/src -COPY messages/yarn.lock messages/package.json ./ -RUN yarn install -COPY messages . -RUN yarn proto +#FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as proto-builder +#WORKDIR /usr/src +#COPY messages/yarn.lock messages/package.json ./ +#RUN yarn install +#COPY messages . +#RUN yarn proto # typescript build -FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder2 +FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder WORKDIR /usr/src COPY pusher/yarn.lock pusher/package.json ./ RUN yarn install COPY pusher . -COPY --from=builder /usr/src/generated src/Messages/generated -COPY --from=builder /usr/src/JsonMessages src/Messages/JsonMessages +#COPY --from=proto-builder /usr/src/generated src/Messages/generated +#COPY --from=proto-builder /usr/src/JsonMessages src/Messages/JsonMessages ENV NODE_ENV=production RUN yarn run tsc @@ -23,7 +27,7 @@ WORKDIR /usr/src COPY pusher/yarn.lock pusher/package.json ./ ENV NODE_ENV=production RUN yarn install --production -COPY --from=builder2 /usr/src/dist /usr/src/dist +COPY --from=builder /usr/src/dist /usr/src/dist USER node CMD ["yarn", "run", "runprod"] diff --git a/tests/README.md b/tests/README.md index 927d9bc9..f293b975 100644 --- a/tests/README.md +++ b/tests/README.md @@ -27,6 +27,13 @@ npm run test ## Run on production like environment +Build message types: + +```bash +cd messages/ +yarn run proto-all +``` + Start WorkAdventure with: ```bash From 7b26d168681a5fd8635abc28ace8f45190eb3ed0 Mon Sep 17 00:00:00 2001 From: Lukas Date: Tue, 8 Mar 2022 11:56:34 +0100 Subject: [PATCH 2/2] lazy load EmoteMenu (#1938) --- front/src/Components/Lazy.svelte | 21 +++++++++++++++++++++ front/src/Components/MainLayout.svelte | 6 ++---- 2 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 front/src/Components/Lazy.svelte diff --git a/front/src/Components/Lazy.svelte b/front/src/Components/Lazy.svelte new file mode 100644 index 00000000..9817ba5c --- /dev/null +++ b/front/src/Components/Lazy.svelte @@ -0,0 +1,21 @@ + + + +{#if when} + {#await loading then { default: Component }} + + {/await} +{/if} diff --git a/front/src/Components/MainLayout.svelte b/front/src/Components/MainLayout.svelte index 3e6c406b..f1200640 100644 --- a/front/src/Components/MainLayout.svelte +++ b/front/src/Components/MainLayout.svelte @@ -12,7 +12,6 @@ import AudioManager from "./AudioManager/AudioManager.svelte"; import CameraControls from "./CameraControls.svelte"; import EmbedScreensContainer from "./EmbedScreens/EmbedScreensContainer.svelte"; - import EmoteMenu from "./EmoteMenu/EmoteMenu.svelte"; import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte"; import LayoutActionManager from "./LayoutActionManager/LayoutActionManager.svelte"; import Menu from "./Menu/Menu.svelte"; @@ -38,6 +37,7 @@ import { LayoutMode } from "../WebRtc/LayoutManager"; import { actionsMenuStore } from "../Stores/ActionsMenuStore"; import ActionsMenu from "./ActionsMenu/ActionsMenu.svelte"; + import Lazy from "./Lazy.svelte"; let mainLayout: HTMLDivElement; @@ -116,9 +116,7 @@ {/if} - {#if $emoteMenuStore} - - {/if} + import("./EmoteMenu/EmoteMenu.svelte")} /> {#if hasEmbedScreen}