Skip to content

開発環境構築

Jump to bottom
iwatendo edited this page Apr 4, 2020 · 5 revisions

開発環境について

  • 現状の開発者(iwatendo)の環境と、ビルド及びリリース手順のメモです。
  • 改善点等はアドバイス頂ければ幸いです。

開発に使用しているソフトウェア

環境構築手順

  • Gitクローンを作成
  • 上記でクローンしたフォルダを Visual Code Studio（以下 VSCode)で開く。
  • VSCodeのターミナルを開く。（「表示」→「総合ターミナル」で開くか、または CTRL + @ で開きます）
  • ターミナルにて以下のコマンドを実行すると、各種ライブラリをダウンロードされます
npm install
  • また、ローカル環境でのデバック用に http-serverをインストールします。
※windowsの場合
npm install -g http-server

※Macの場合はターミナルで
sudo npm install -g http-server
  • その他 SkyWay のAPIキーを取得し skyway.json を配置します。詳細については以下のページを参照してください。
  • SkyWayのAPIキー取得

ビルド手順

  • デバックビルドの方法
npm run dev
  • リリースビルド
npm run prod
  • ビルドされたファイルは ./dist フォルダに生成されます。
  • 上記のフォルダのファイル一式をWebサーバーにアップします。

ビルド時の内部動作メモ

  • webpackにてTypeScriptのファイルをJavaScriptに変換/集約します。(ページ毎の bundle.js を生成します）
  • TypeScriptからJavaScriptへのコンパイルは ts-loader が行っており、コンパイルオプションは、tsconfig.json で指定しています。
  • ts-loaderで変換(TypeScript→JavaScript）されたスクリプトが webpackでページ毎のbundle.jsに集約されるイメージです。
  • 上記スクリプトは ./distに生成されますが、htmlやcssが ./distに含まれない為、cpxを使って、他の必要なファイルをコピーしています。
  • リリースビルド時は、rimrafを使用し、./distフォルダを全てクリアした状態から、上記の処理を行っています。

デバック方法

  • ローカル環境にて http-server を動作させて確認します。
npm start
  • 簡易サーバーを起動させた状態で、VSCodeの「デバックの開始」を実行します。
  • 標準でVSCodeに含まれている拡張機能「Debugger for Chrome」にて、VSCode側のソースにブレイクポイントを貼ってデバックが可能です。

デバック時のメモ

  • VSCodeのターミナルは複数個開けます。http-serverは起動したままにして、ビルドは別ターミナルで実行します
  • デバック時に開かれたChromeのページで、Developper Toolsを開くと Debuggerが切断する様子。
  • 一定時間ブレイクした状態にしておくとWebRTCの切断かつ通知が飛ばず、想定外の動作になるケースがあります。
  • デバック時に開かれるChromeは、通常起動のChromeとはStorage(Local Storage/IndexedDB）を共有しません。
  • ちょっとややこしいですが、上記を利用する事で、１台のPCでクライアント間の接続確認ができます。
  • 　１.デバッカーから開かれたChromeでホームインスタンスを起動
  • 　２.上記のホームインスタンスからクライアントを起動
  • 　３.招待URLを、通常起動したChromeから開く
  • 逆のパターンで、ホームインスタンを起動していないクライアント側のみのデバックも可能です。
  • 　１．通常起動したChromeから「localhost:8080」へアクセス。
  • 　２．ホームインスタンスを起動。
  • 　３．招待URLを、デバック時に開かれたChromeのタブから開く
Clone this wiki locally