Skip to content

Install and Setup

Jump to bottom
uupaa edited this page Jun 12, 2017 · 33 revisions

このエントリでは、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 を作成します。以下のリンクからイメージの作成を行ってください

  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を使った開発

開発初期段階ではコンテナを使って実装を進めるよりも、ホスト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 イメージを使ってコンテナ上でも開発を進められるようになるでしょう。

コンテナを使った開発

以下のコマンドでコンテナの起動と停止を行えます。

Overview

Clone this wiki locally