chore(web): add dockerfiles

.github/workflows/build.yml

@@ -155,17 +155,6 @@ jobs:
           echo "::set-output name=platforms::$PLATFORMS"
           echo "::set-output name=version::$VERSION"
           echo "::set-output name=tags::$TAGS"
-      - name: Download web arfiacts
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          github_token: ${{ steps.app-token.outputs.token }}
-          workflow: ci.yml
-          workflow_conclusion: success
-          branch: ${{ github.event.workflow_run.head_branch }}
-          name: reearth-marketplace-web
-          check_artifacts: true
-      - name: Extract
-        run: tar -xvf reearth-marketplace-web.tar.gz && mv reearth-marketplace-web server/web
       - name: Build and load docker image
         uses: docker/build-push-action@v3
         with:
@@ -192,4 +181,4 @@ jobs:
           # name: '[ -n $TAG ] && echo reearth-marketplace_$TAG || echo reearth-marketplace_$'
           path: reearth-marketplace.tar.gz
           if-no-files-found: error
-# TODO: invoke deploy test env if name == "nightly" with workflow_call event
+# TODO: invoke deploy test env if name == "nightly" with workflow_call event

.github/workflows/deploy.yml

@@ -7,38 +7,33 @@ on:
 env:
   REEARTH_MARKETPLACE_URL: marketplace.test.reearth.dev
   REEARTH_API: "https://api.marketplace.test.reearth.dev/api"
-  GCS_DEST: gs://marketplace.test.reearth.dev
-  IMAGE_GCP: us-central1-docker.pkg.dev/reearth-oss/reearth/reearth-marketplace:nightly
+  SERVER_IMAGE_GCP: us-central1-docker.pkg.dev/reearth-oss/reearth/reearth-marketplace-api:nightly
+  WEB_IMAGE_GCP: us-central1-docker.pkg.dev/reearth-oss/reearth/reearth-marketplace-web:nightly
   GCP_REGION: us-central1
 jobs:
   deploy_web:
     runs-on: ubuntu-latest
     if: github.event.workflow_run.conclusion != 'failure' && github.event.repository.full_name == 'reearth/reearth-marketplace' && github.event.workflow_run.head_branch == 'main'
     steps:
-      - uses: actions/create-github-app-token@v1
-        id: app-token
-        with:
-          app-id: ${{ vars.GH_APP_ID }}
-          private-key: ${{ secrets.GH_APP_PRIVATE_KEY }}
-      - name: get latest web artifact
-        uses: dawidd6/action-download-artifact@v2
-        with:
-          github_token: ${{ steps.app-token.outputs.token }}
-          workflow: ci.yml
-          workflow_conclusion: success
-          branch: main
-          name: reearth-marketplace-web
-          check_artifacts: true
-          search_artifacts: true
-      - name: Extract
-        run: tar -xvf reearth-marketplace-web.tar.gz
       - uses: google-github-actions/auth@v0
         with:
-          credentials_json: "${{ secrets.GCP_SA_KEY }}"
+          credentials_json: ${{ secrets.GCP_SA_KEY }}
       - name: Set up Cloud SDK
         uses: google-github-actions/setup-gcloud@v0
-      - name: Deploy
-        run: gsutil -m -h "Cache-Control:no-store" rsync -x "^reearth_config\\.json$" -dr reearth-marketplace-web/ $GCS_DEST
+      - name: Configure docker
+        run: gcloud auth configure-docker us-central1-docker.pkg.dev --quiet
+      - name: docker build and push
+        run: |
+          cd web
+          docker build -t $WEB_IMAGE_GCP .
+          docker push $WEB_IMAGE_GCP
+      - name: Deploy to Cloud Run
+        run: |
+          gcloud run deploy reearth-marketplace-web \
+            --image $WEB_IMAGE_GCP \
+            --region $GCP_REGION \
+            --platform managed \
+            --quiet
   deploy_server:
     runs-on: ubuntu-latest
     if: github.event.workflow_run.conclusion != 'failure' && github.event.repository.full_name == 'reearth/reearth-marketplace' && github.event.workflow_run.head_branch == 'main'
@@ -75,12 +70,12 @@ jobs:
         run: docker load < reearth-marketplace.tar.gz
       - name: docker push
         run: |
-          docker tag reearth/reearth-marketplace:nightly $IMAGE_GCP
-          docker push $IMAGE_GCP
+          docker tag reearth/reearth-marketplace-api:nightly $SERVER_IMAGE_GCP
+          docker push $SERVER_IMAGE_GCP
       - name: Deploy to Cloud Run
         run: |
-          gcloud run deploy reearth-marketplace-backend \
-            --image $IMAGE_GCP \
+          gcloud run deploy reearth-marketplace-api \
+            --image $SERVER_IMAGE_GCP \
             --region $GCP_REGION \
             --platform managed \
             --quiet

.github/workflows/web_build.yml

@@ -0,0 +1,105 @@
+
+name: web-build
+on:
+  workflow_run:
+    workflows: [ci-web]
+    types: [completed]
+    branches: [main, release]
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
+  cancel-in-progress: true
+
+jobs:
+  info:
+    name: Collect information
+    runs-on: ubuntu-latest
+    if: github.event.workflow_run.conclusion != 'failure' && github.event.repository.full_name == 'reearth/reearth-marketplace' && (github.event.workflow_run.head_branch == 'release' || !startsWith(github.event.head_commit.message, 'v'))
+    outputs:
+      sha_short: ${{ steps.info.outputs.sha_short }}
+      new_tag: ${{ steps.info.outputs.new_tag }}
+      new_tag_short: ${{ steps.info.outputs.new_tag_short }}
+      name: ${{ steps.info.outputs.name }}
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: Fetch tags
+        run: git fetch --prune --unshallow --tags
+      - name: Get info
+        id: info
+        # The tag name should be retrieved lazily, as tagging may be delayed.
+        env:
+          BRANCH: ${{ github.event.workflow_run.head_branch }}
+        run: |
+          echo "::set-output name=sha_short::$(git rev-parse --short HEAD)"
+          if [[ "$BRANCH" = "release" ]]; then
+            TAG=$(git tag --points-at HEAD)
+            if [[ ! -z "$TAG" ]]; then
+              echo "::set-output name=new_tag::$TAG"
+              echo "::set-output name=new_tag_short::${TAG#v}"
+            else
+              echo "::set-output name=name::rc"
+            fi
+          else
+            echo "::set-output name=name::nightly"
+          fi
+      - name: Show info
+        env:
+          SHA_SHORT: ${{ steps.info.outputs.sha_short }}
+          NEW_TAG: ${{ steps.info.outputs.new_tag }}
+          NEW_TAG_SHORT: ${{ steps.info.outputs.new_tag_short }}
+          NAME: ${{ steps.info.outputs.name }}
+        run: echo "sha_short=$SHA_SHORT, new_tag=$NEW_TAG, new_tag_short=$NEW_TAG_SHORT, name=$NAME"
+
+  docker:
+    name: Build and push Docker image
+    runs-on: ubuntu-latest
+    needs:
+      - info
+    if: needs.info.outputs.name || needs.info.outputs.new_tag
+    env:
+      IMAGE_NAME: reearth/reearth-marketplace-web
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Get options
+        id: options
+        env:
+          TAG: ${{ needs.info.outputs.tag_short }}
+          NAME: ${{ needs.info.outputs.name }}
+          SHA: ${{ needs.info.outputs.sha_short }}
+        run: |
+          if [[ -n $TAG ]]; then
+            PLATFORMS=linux/amd64,linux/arm64
+            VERSION=$TAG
+            TAGS=$IMAGE_NAME:$TAG
+            if [[ ! $TAG =~ '-' ]]; then
+              TAGS+=,${IMAGE_NAME}:${TAG%.*}
+              TAGS+=,${IMAGE_NAME}:${TAG%%.*}
+              TAGS+=,${IMAGE_NAME}:latest
+            fi
+          else
+            PLATFORMS=linux/amd64
+            VERSION=$SHA
+            TAGS=$IMAGE_NAME:$NAME
+          fi
+          echo "::set-output name=platforms::$PLATFORMS"
+          echo "::set-output name=version::$VERSION"
+          echo "::set-output name=tags::$TAGS"
+      - name: Build and push docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: ./web
+          platforms: ${{ steps.options.outputs.platforms }}
+          push: true
+          tags: ${{ steps.options.outputs.new_tag_short }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

server/Dockerfile

@@ -17,7 +17,6 @@ FROM debian:buster
 
 COPY --from=build /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
 COPY --from=build /app/reearth-marketplace /app/reearth-marketplace
-COPY web* /app/
 
 WORKDIR /app
 

web/.dockerignore

@@ -0,0 +1,14 @@
+*
+
+!docker/
+!src/
+
+!index.html
+!TEMP.js
+!i18next-parser.config.js
+!tsconfig.json
+!tsconfig.node.json
+!package.json
+!vite.config.ts
+!vite.config.ext.ts
+!yarn.lock

web/Dockerfile

@@ -0,0 +1,48 @@
+FROM node:22.1-slim AS node
+WORKDIR /work
+
+RUN --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=yarn.lock,target=yarn.lock \
+    --mount=type=cache,target=/root/.yarn,sharing=locked \
+    yarn install
+
+RUN --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=yarn.lock,target=yarn.lock \
+    --mount=type=bind,source=index.html,target=index.html \
+    --mount=type=bind,source=tsconfig.json,target=tsconfig.json \
+    --mount=type=bind,source=tsconfig.node.json,target=tsconfig.node.json \
+    --mount=type=bind,source=vite.config.ts,target=vite.config.ts \
+    --mount=type=bind,source=vite.config.ext.ts,target=vite.config.ext.ts \
+    --mount=type=bind,source=src,target=src \
+    --mount=type=bind,source=TEMP.js,target=TEMP.js \
+    --mount=type=cache,target=/root/.yarn,sharing=locked \
+    yarn build && yarn build:ext
+
+FROM nginx:1.27-alpine
+
+# Quite the Nginx startup logs.
+ENV  NGINX_ENTRYPOINT_QUIET_LOGS=true
+
+# Default to Cloud Run port.
+# Ref: https://cloud.google.com/run/docs/reference/container-contract#port
+ENV PORT=8080
+
+# Defaults Google Cloud Load Balancer header.
+# Ref: https://cloud.google.com/load-balancing/docs/https#target-proxies
+ENV REAL_IP_HEADER=X-Forwarded-For
+
+# Default values.
+ENV MARKETPLACE_API=
+ENV AUTH_CLIENT_ID=
+ENV AUTH_DOMAIN=
+ENV AUTH_AUDIENCE=
+ENV REPORT_URL=
+ENV REEARTH_API=
+ENV REEARTH_CLASSIC_WEB=
+ENV CORS_ALLOWED_ORIGINS=
+ENV REEARTH_VISUALIZER_WEB=
+
+COPY --from=node /work/dist/ /usr/share/nginx/html
+COPY --chown=nginx:nginx  docker/reearth_config.json.template /tmp/reearth_config.json.template
+COPY --chown=nginx:nginx docker/nginx.conf.template /etc/nginx/templates/nginx.conf.template
+COPY --chown=nginx:nginx docker/40-envsubst-on-reearth_config.sh /docker-entrypoint.d/

web/docker/40-envsubst-on-reearth_config.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+set -e
+
+TEMPLATE_FILE="/tmp/reearth_config.json.template"
+OUTPUT_FILE="/usr/share/nginx/html/reearth_config.json"
+
+envsubst < "$TEMPLATE_FILE" > "$OUTPUT_FILE"

web/docker/nginx.conf.template

@@ -0,0 +1,52 @@
+log_format json escape=json '{'
+  '"body_bytes_sent": "$body_bytes_sent",'
+  '"http_referer": "$http_referer",'
+  '"http_user_agent": "$http_user_agent",'
+  '"remote_ip": "$remote_addr",'
+  '"remote_user": "$remote_user",'
+  '"request": "$request",'
+  '"request_id": "$request_id",'
+  '"request_method": "$request_method",'
+  '"request_time": "$request_time",'
+  '"request_uri": "$request_uri",'
+  '"server_name": "$server_name",'
+  '"status": "$status",'
+  '"time": "$time_iso8601"'
+'}';
+
+real_ip_header ${REAL_IP_HEADER};
+
+# CORS_ALLOWED_ORIGINS specifies multiple origins to which access is allowed. 
+# The delimiter is | and the regular expression or is used to match. 
+# example: CORS_ALLOWED_ORIGINS=https://example.com|http://localhosts:3000
+map $http_origin $cors{
+  default '';
+  ~^(${CORS_ALLOWED_ORIGINS})$ $http_origin;
+}
+
+server { 
+  listen ${PORT};
+  root /usr/share/nginx/html;
+  server_name _;
+
+  access_log /dev/stdout json;
+  error_log /dev/stderr warn;
+
+  location / {
+    add_header 'Access-Control-Allow-Origin' "$cors";
+    add_header 'Access-Control-Allow-Credentials' 'true';
+    add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, PUT, HEAD OPTIONS';
+    add_header 'Access-Control-Allow-Headers' 'Origin, Authorization, Accept';
+
+    if ($request_method = 'OPTIONS') {
+      return 204;
+    }
+
+    try_files $uri /index.html =404;
+  }
+
+  error_page 500 502 503 504 /50x.html;
+  location = /50x.html {
+      root   /usr/share/nginx/html;
+  }
+}

web/docker/reearth_config.json.template

@@ -0,0 +1,11 @@
+{
+  "marketplaceApi": "${MARKETPLACE_API}",
+  "authClientId": "${AUTH_CLIENT_ID}",
+  "authDomain": "${AUTH_DOMAIN}",
+  "authAudience": "${AUTH_AUDIENCE}",
+  "reportUrl": "${REPORT_URL}",
+  "reearthApi": "${REEARTH_API}",
+  "reearthClassicWeb": "${REEARTH_CLASSIC_WEB}",
+  "reearthVisualizerWeb": "${REEARTH_VISUALIZER_WEB}"
+}
+