このエントリでは、WebApp/2 を使用するための環境設定について説明します。

WebApp/2 は mac 上での開発を想定しています。他の OS で開発する場合は適時読み替えを行ってください。

1. 関連するソフトウェアをインストールします。以下のリンクからインストールと設定を行ってください(よく分からない場合は、全部インストールしてください)

   • 開発: WebAppの開発環境で必要となるソフトウェア一式です
   • 確認: WebAppの動作確認で必要となるソフトウェア一式です
   • 本番: 本番サーバで必要となるソフトウェアの一式です

   	開発で	確認で	本番で
   Chrome Canary	必要	必要
   Docker	必要	必要
   Nginx	必要
   Node.js	必要
   ESLint	必要
   rollup.js	必要

2. 次に WebApp/2 のコピーを取得します(ここでは MyWebApp と別名をつけて clone しています)

   git clone https://github.com/uupaa/WebApp2.git MyWebApp

   clone 直後は、このようなディレクトリ構成になります。

   ▾ MyWebApp/
     .git
     ▾ app/                    # /usr/share/nginx/html/app としてコンテナ側から参照されるディレクトリです
       ▾ assets/               # CSS/画像/動画など、静的なファイルを格納する場所です
         ▾ modules/            # JSモジュール置き場です
             es6.polyfill.js   # ES6 polyfill用モジュール。IE11用
             UserAgent.js      # 動作環境判別用モジュール
       ▾ lib/                  # ESModules で書かれたコードを格納する場所です
           App.js              # WebApp 全体から利用する変数と設定を管理するモジュールです
           AppMain.js          # WebApp の Bootstrap コードを格納するファイルです
         bundle.js             # npm run bundle コマンドで作成する事前結合ファイルです
         index.html            # スタートページです
     ▾ conf/                   # webapp2-nginx image 用の設定ファイルを設置する場所です
       webapp2-nginx.conf      # webapp2-nginx 用の nginx.conf です
     .eslintignore             # ESLintの設定ファイルです
     .eslintrc                 # ES6用のESLintの設定ファイルです
     .eslintrc.es5.json        # ES5用のESLintの設定ファイルです
     .gitignore                # Gitの設定ファイルです
     .npmignore                # npmの設定ファイルです
     .rollup.es5.js            # ES5用のrollupの設定ファイルです
     .rollup.es6.js            # ES6用のrollupの設定ファイルです
     Dockerfile                # webapp2-nginx(DockerImage) 用の Dockerfile です
     package.json              # npmの設定ファイルです
     README.md
   

3. cd MyWebApp で MyWebApp ディレクトリに移動し、.git ディレクトリを rm -rf .git で削除します。

4. app/index.html の <script> をターゲットブラウザに合わせて修正します。

5. npm run create:server:certificate でサーバの自己署名証明書を作成/更新します。以下のコマンドが展開され実行されます。作成したファイルは conf/ ディレクトリに格納されます

   openssl genrsa -out webapp2-server.key 2048
   openssl req -new -key webapp2-server.key -out webapp2-server.csr -subj "/C=JP/ST=Tokyo/L=Tokyo/CN=localhost"
   openssl x509 -in webapp2-server.csr -days 3650 -req -signkey webapp2-server.key > webapp2-server.crt

6. MyWebApp ディレクトリで DockerImage を作成します。以下のリンクからイメージの作成を行ってください

   • webapp2-nginx

7. 必要に応じて conf/webapp2-nginx.conf を編集します。この手順は省略可能です。 デフォルトのHTTP/2の設定は以下のようになっています

   server {
     listen              443 ssl http2;
     ssl_prefer_server_ciphers on;
     ssl_ciphers         AESGCM:HIGH:!aNULL:!MD5;
     ssl_certificate     webapp2-server.crt;
     ssl_certificate_key webapp2-server.key;
     ssl_session_cache   shared:ssl_session_cache:10m;
   }

8. npm start で webapp2-nginx イメージを元にコンテナ(app)が生成され起動します。以下のコマンドが展開され実行されます

   docker run --name app -d -p 80:80 -p 443:443 \
              -v $(pwd)/app:/usr/share/nginx/html/app:ro webapp2-nginx

Chrome を起動し、 https://localhost/app/ にアクセスしてみてください。

警告画面が表示された場合は 自己署名証明書使用時にブラウザに警告が表示される問題についてを参照してください。

開発初期段階ではコンテナを使って実装を進めるよりも、ホスト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 restart でコンテナ停止