Devlopment

このエントリでは、WebApp/2 をベースにした独自の WebApp 開発を進める手順を説明します。

必要なソフトウェアのインストールと設定 がまだの方は、先にそちらを行ってください。
ここから先は環境構築が完了しているものとして話を進めます。

Directory tree

以下が git clone https://github.com/uupaa/WebApp2.git MyWebApp コマンドを実行した直後のディレクトリ構造になります。

▾ MyWebApp/
  .git
  ▾ app/
    ▾ assets/               # アセット置き場(CSS/画像/動画など)
      ▾ modules/            # JSモジュール置き場
          es6.polyfill.js   # ES6 polyfill用モジュール。IE11用
          UserAgent.js      # 動作環境判別用モジュール
    ▾ lib/
        App.js
        AppMain.js          # MyWebAppのブートストラップコード
      index.html
  ▾ conf/
    webapp2-nginx.conf      # コンテナ用の nginx.conf
    webapp2-server.crt      # サーバの自己署名証明書
    webapp2-server.csr      # サーバの自己署名証明書
    webapp2-server.key      # サーバの自己署名証明書
  .eslintignore             # ESLint設定ファイル
  .eslintrc                 # ESLint設定ファイル
  .eslintrc.es5             # ESLint設定ファイル
  .gitignore                # Git設定ファイル
  .npmignore                # npm設定ファイル
  .rollup.es5               # rollup設定ファイル
  .rollup.es6               # rollup設定ファイル
  Dockerfile                # DockerImage設定ファイル
  package.json              # npm設定ファイル
  README.md

.git ディレクトリを rm -rf .git で削除し、 app/index.html の <script> をターゲットブラウザに合わせて修正してください。

AppMain.js をエディタで開き構造を把握し、肉付けを行ってください。

import { app } from "./App.js";

app.verbose = 2;
app.debug = 2;
app.init(() => { // DOMContentLoaded でコールバックされます
  console.log("Hello WebApp/2");
});

ホストOSを使った開発

開発初期段階ではコンテナを使って実装を進めるよりも、ホストOS(mac)上で開発を進めたほうが効率が良いでしょう。

例えば以下のようにします。

• nginx.conf の設定
  • /usr/local/etc/nginx/nginx.conf を mac nginx.conf を参考に設定し、 webapp2-nginx.conf とほぼ同じ構成になるようにします
  • 設定が終わったら sudo nginx -t でテストし問題が無いことを確認します
• sudo nginx で nginx を 80/443 ポートで起動し開発を進めます
• sudo nginx -s stop で nginx を停止できます

ある程度実装が固まってきたら、 webapp2-nginx イメージを使ってコンテナ上でも開発を進められるようになるでしょう。

コンテナを使った開発

コンテナでの開発は、以下のコマンドを多用することになると思います。

• npm start でコンテナ起動
• npm stop でコンテナ停止

npm run で利用可能な npm run コマンドの一覧が表示されます。