編集

【8th Wall】画像認識プロジェクトをセルフホスティングに移行し、公開する手順

8th Wallがサービス終了する、ということで、独自ドメインへのプロジェクトの移行作業を進めていました。
この中で、ハマりどころがあったので、備忘録をつけておきます。

移行手順

プロジェクトのエクスポート


プロジェクトを開いて、Publishを選択。
Buildable Codeを左のタブで選び、右下Exportボタンを押して少し待つと、zipがダウンロードされる。解凍しよう。

動作確認

◎npm install
プロジェクトのルートに入ったら、 npm installする。

◎画像認識の追加
app.jsを開いて、
const onxrloaded = () => {
  XR8.XrController.configure({
    imageTargetData: [
      require('../image-targets/target1.json'),
      require('../image-targets/target2.json'),
    ],
  })
}
window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)

を冒頭に書く。
 require('../image-targets/target1.json')の部分は、自分のマーカー画像のjsonに書き換えること！

◎ allowedHostsの追加
webpack.config.jsを開いて、
devServerの配下に、使うドメイン（テスト用・公開用）をallowedHostsとして追加する。
※client配下にwebSocketURLも追加しておく（ブラウザが 8080 番ポートに更新通知（WSS）を送ろうとして、localtunnelの 443 番ポートと不一致を起こしてたので。本番では関係ないですが、開発用として）

  devServer: {
    open: false,
    compress: true,
    hot: true,
    liveReload: false,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization",
    },
    allowedHosts: [".ngrok-free.app", ".gitlab.io", ".kageori.com"],
    client: {
      webSocketURL: "auto://0.0.0.0:0/ws",
      overlay: {
        warnings: false,
        errors: true,
      },
    },
  },

こんな感じになるはず。ドメインはよしなに変えてください。

◎動作確認
これでnpm run serveをしておき、別途ngrok http 8080をたたいて、発行されたURLからスマホで動作確認ができる。

独自ドメインで公開するには

こんな感じで.gitlab-ci.ymlをルートに追加。

image: node:latest

pages:
  stage: deploy
  script:
    - npm install
    - npm run build
    - rm -rf public
    - mv dist public
  artifacts:
    paths:
      - public
  only:
    - main

これでデプロイ！

AR名刺
動いた〜〜！

ポイント

エクスポートしたそのままでなく、app.jsに画像認識のコードを自前で入れないと、認識が作動しないというところが落とし穴でした。

顔認識などはエクスポートそのままで動作します（ <script crossorigin="anonymous" src="./external/xr/xr.js" async="true" data-preload-chunks="face">が最初からindex.html内に入っているので、これでOKみたいです）。

平面認識は試してないのですが、多分同じようにdata-preload-chunks="slam"が入っていたら問題なく動くのではないかな。

注意

プラットフォームへのアクセスが2026年2月28日には終了してしまうので、エクスポートだけはちゃちゃっとやっておきましょう。

まとめ

コードの複雑な書き換えはほぼ無く、かなりスムーズにセルフホスティングに移行できたので本当に助かりました。よかったよかった。