Devlopment

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

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

あなた独自の WebApp (MyWebApp) の開発を進めるために、まずは環境を整えましょう。 以下のディレクトリとファイルの内容を確認し、削除または更新を行ってください。

   ▾ MyWebApp/
      ▸ .git/                   -> git clone や git init で作成されるファイルです
                                   このディレクトリをまるごと削除し、
                                   あなたが作成する MyWebApp 用の .git/ で置き換えます
      ▾ app/
        ▸ assets/               -> ここに静的なアセットを追加していきます
        ▾ lib/
            App.js
            AppMain.js          -> WebAppのブートストラップコードを記述します
            UserAgent.js
          index.html            -> WebAppのスタートページです。必要に応じて変更します
          bundle.js             -> rollup.js で作成する ESModules を利用できないブラウザ用に事前結合したファイルです
      ▾ conf/
          webapp2-nginx.conf    -> コンテナ用の nginx.conf です
          webapp2-server.crt    -> サーバの自己署名証明書です
          webapp2-server.csr    -> サーバの自己署名証明書です
          webapp2-server.key    -> サーバの自己署名証明書です
        .eslintignore           -> ESLint用の設定ファイルです。必要に応じて変更します
        .eslintrc               -> ESLint用の設定ファイルです。必要に応じて変更します
        .gitignore              -> Git用の設定ファイルです。必要に応じて変更します
        .npmignore              -> npm用の設定ファイルです。必要に応じて変更します
        Dockerfile              -> DockerImage用の設定ファイルです。必要に応じて変更します
        package.json            -> npm用の設定ファイルです。必要に応じて変更します
        README.md               -> 必要に応じて変更します

必要な処置が終わりましたら、 MyWebApp の肉付け(開発)を進めてください。

手始めに AppMain.js をエディタで開き、構造を把握してください。

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

app.verbose = 2;
app.debug = 2;
app.init(() => {
  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 コマンドの一覧が表示されます。ぜひ活用なさってください。