Web アプリのデプロイ：Forge サンプルの改編とデプロイ

ご存知のように、Forge ポータル（https://forge.autodesk.com）のフッターにある Code samples リンク経由で、数多くのサンプルが 公開されています。

各サンプルは GitHub リポジトリとして公開されているので、git コマンドでローカル コンピュータにクローンして実行することが出来ます。不定期に開催している Forge Workshop でも、この方法を利用/活用しています。

これらの Forge サンプルは、MIT ライセンスを採用しているので、そのままの状態でも、また、ローカル環境で修正を加えてからでも、独自のドメインでデプロイして評価することが出来ます。例えば、ご紹介した  learn.forge.viewhubmodels サンプルも、ページ下部で当該サンプルが MIT ライセンスであることを示しています。

もし、Forge サンプルをクローンしてデプロイする場合には、いくつか注意すべき点があります。GitHub からサンプルは、クローンされたフォルダ直下の隠しフォルダ .git でオリジナルのリモート リポジトリとの関係を保持しています。ローカルにクローンしたサンプルを改編して、クローン元のリモート リポジトリに反映する必要がないなら、この .git フォルダを削除しても構いません。

逆に、この .git フォルダを削除する事で、Web アプリのデプロイ：GitHub Desktop を使った GitHub へのプッシュ の手順で、ローカル リポジトリの内容を master ブランチとしてご自身のリモート リポジトリへプッシュ後、独自ドメインでデプロイして試すことが可能になります。

ただし、3-legged OAuth で利用する CallBack URL の設定に注意が必要です。先にご紹介した learn.forge.viewhubmodels サンプルでは、ローカル開発環境でサンプルを実行することを前提に、CallBack URL に http://localhost:3000/api/forge/callback/oauth を設定しています。ところが、このままの値でデプロイしてしまうと、デプロイ先のドメイン名と localhost:3000 が一致しないため、サンプルが正しく動作しない結果になってしまいます。

この場合、デプロイ先の URL を意識して、デプロイ前に CallBack URL を補正しておく必要があります。例えば、最終的なデプロイ先 URL を  https://viewhubmodels-modified0.herokuapp.com/にする場合には、http://localhost:3000/api/forge/callback/oauth に代わって https://viewhubmodels-modified0.herokuapp.com/api/forge/callback/oauth にしておく必要があります。

もちろん、Forge ポータル上に作成した App 設定も、同じ Callback URL を設定しておく必要があります。

なお、3-Legged OAuth で A360 データを表示するサンプル の内容では、環境変数を用いて Client ID と Client Secret、Callback URL を設定していました。もし、これらの値をサーバー実装のコード内に埋め込んでしまいたい場合は、デプロイ前のローカル開発環境で learn.forge.viewhubmodels\config.js ファイルの次の青字箇所に書き込んでしまうことも出来ます。

// Autodesk Forge configuration
module.exports = {
    // Set environment variables or hard-code here
    credentials: {
        client_id: process.env.FORGE_CLIENT_ID,
        client_secret: process.env.FORGE_CLIENT_SECRET,
        callback_url: process.env.FORGE_CALLBACK_URL
    },lmvToLonLat( lmvPoint ) 

  >> 例 >>

// Autodesk Forge configuration
module.exports = {
    // Set environment variables or hard-code here
    credentials: {
        client_id: 'lzzAgNjGyMWT6cm0s6M0ZoqvPLqNsDrG',
        client_secret: 'LoYe1cJDFjSPjlnP',
        callback_url: 'https://viewhubmodels-modified0.herokuapp.com/api/forge/callback/oauth'
    },lmvToLonLat( lmvPoint )

下図は、この方法で編集、デプロイした https://viewhubmodels-modified0.herokuapp.com/です。

By Toshiaki Isezaki