アプリの公開

以前の記事では、アプリを作成し、開発サーバーを使用してローカルに提供しました。 アプリに満足して一般公開する準備が整ったら、他のユーザーがアクセスできる場所でホストする必要があります。 この記事では、本番用の Ember アプリを構築し、GitHub に簡単なテストの仕掛けとして公開するために必要な手順について説明します。

(訳注:gh-pages ブランチを使用するよりも、/docs ディレクトリを使用するほうが便利です。 また、ここにある説明では、git の使い方がまるで解りませんので、初心者なりに説明を追加してみます。)

GitHub の使用に慣れている場合は、アプリをホストするための優れた選択肢(特に、他の人がテストできるようにする場合)は、GitHub Pages です。 例として World Clock アプリを使用して、本番用のファイルを構築し、git リポジトリの /docs ディレクトリにアップロードします。

: Firefox OS アプリと Firefox Markerplace の公開に関する情報をお探しの場合は、Firefox Marketplace ゾーンに進んでください。

Ember アプリの公開準備

開発中、Ember CLI は ember serve コマンドを使用したときに、ファイルを継続的に構築し、ローカルサーバーに提供しました。 この構築プロセスは、アプリのデバッグと反復処理に最適化されています。 しかし、今、本番用のために最適化された構築プロセス(例えば、ファイルの縮小、フィンガープリンティング、ポータブルなコード)が必要になります。 幸いにも、Ember CLI がこれのほとんどを処理します。 いくつかの設定オプションを設定し、本番環境専用の構築コマンドを実行するだけで済みます。

プロジェクトのディレクトリで、/config/environment.js ファイルに行きます。 このファイルの一番下には、本番環境の設定オプションを設定できる if ブロックがあります。

このブロックでは、ENV.locationTypehash に設定します。 これにより、公開時に Ember CLI がアプリのアセットの URL を適切に処理することが保証されます。 下のコードブロックを次のように更新します。

if (environment === 'production') {
  ENV.locationType = 'hash';
  ENV.rootURL = '';
}

次に、(訳注:同じディレクトリを使用する開発サーバーを停止してから、)ターミナルやコマンドラインに行き、プロジェクトのルートディレクトリで次の構築コマンドを実行します。

ember build --environment=production

(訳注:原因不明で Build Error が発生することがあります。 このときはコマンドを再実行してください。)

アプリが正常に構築されたと仮定すると、/dist ディレクトリに、すべてのファイルが縮小され、フィンガープリントされていることがわかります。 これらは、私たちがアプリを公開するときにアップロードする必要がある唯一のファイルです。

GitHub へのアップロード

次の段階は、あなたのアプリを GitHub にアップロードしてそこに公開することです(GitHub 経由での公開では、必要に応じて基本的なガイドを提供します)。

(訳注開始:新しい説明です。)

本番バージョンのコードに対して新しいリポジトリを作成するか、開発バージョンと本番バージョンを同じリポジトリに保存することができます。 それはあなた次第です。 私たちは2番目の選択肢が気に入っています。 それは、最終結果だけでなく、他人と開発を分かち合うことができるからです。 以下の手順でこの2番目の選択肢をカバーします。

GitHub に登録して、world-clock という新しいリポジトリを作成します。 リポジトリの作成ページでは、リポジトリ名以外は、デフォルトのままにしておきます。

以降のコマンドは全てプロジェクトのルートディレクトリで1行ずつ入力します。

次のコマンドでローカルの git とリモートの GitHub の設定をします。 ユーザー名やメールアドレスは、GitHub に登録したときに使ったものに置き換えてください。 (この設定は1回だけです。 Pro Git という本の日本語版をダウンロードしておきましょう。)

git config --global user.name "ユーザー名"
git config --global user.email "メールアドレス"
git config --global core.autocrlf false
git remote add wc https://github.com/ユーザー名/world-clock
git push -u wc master

次のコマンドでローカルでコミット(git に保存)した履歴を見ることができます。

git log
  • プロジェクトを作成したときに既にコミットしていることがわかります。
  • 内容が大量にあると1画面ずつ停止します。 最後の行に : が表示されたらスペースキーで次の画面へ、Q キーでコマンド入力に戻ります。

次のコマンドで現在の編集状況を見ることができます。

git status
  • Untracked files に、新しく作成されて、git が管理していないファイルが表示されます。 git add コマンドでステージした状態にできます。
  • Changes not staged for commit に、変更したがステージしていないファイルが表示されます。 git add コマンドでステージした状態にできます。
  • Changes to be committed に、ステージしたファイルが表示されます。 git commit コマンドでコミットできます。

次のコマンドでステージしていないファイルとステージしたファイルの内容の違いを見ることができます。

git diff

/dist ディレクトリから本番公開用の /docs ディレクトリに内容をコピーします。 /docs ディレクトリに前回の内容がある場合は、削除することを忘れないように。

次のコマンドでファイルをステージします。 git で管理したいファイルを作成変更したら、そのファイルに対して git add コマンドを忘れずに行いましょう。

git add app
git add config
git add docs
git add public
git add tests
git add bower.json
git add .eslintrc.js

次のコマンドでステージしたファイルをコミットします。 コメントにコミットした理由を入れましょう。 GitHub でも見ることができます。

git commit -m "コメント"

次のコマンドでコミットしたファイルを GitHub にアップロードします。 エラーになった場合は、ヒントも表示されるので、それを参考にしましょう。

git push wc master

GitHub の world-clock リポジトリのページで /docs ディレクトリを公開する設定をします。 (設定にはリポジトリに /docs ディレクトリが必要です。 この設定は1回だけです。)

  • リポジトリ名の下にある [Settings] をクリックします。
  • Source のドロップダウンメニューを使用して、GitHub Pages の公開元として master branch /docs folder を選択します。
  • [Save] をクリックします。

これで、https://ユーザー名.github.io/world-clock/ で World Clock を見ることができるはずです。

(訳注終了)

(訳注開始:これは使いません。)

本番バージョンのコードに対して新しいリポジトリを作成するか、開発バージョンと本番バージョンを同じリポジトリの異なるブランチに保存することができます。 それはあなた次第です。 私たちは2番目の選択肢が気に入っています。 それは、最終結果だけでなく、他人と開発を分かち合うことができるからです。 以下の手順でこの2番目の選択肢をカバーします。

  1. 新しい GitHub リポジトリを作成し、開発したコードを master ブランチにアップロードします。
  2. git リポジトリに gh-pages という新しいブランチを作成します。 この新しいブランチをローカルにもリモートにも持っていることを確認してください(GitHub のウェブインターフェイスなどを使って新しいブランチを作成した場合は git pull を実行してください)。
  3. 新しい gh-pages ブランチをチェックアウトしてください。 このブランチ内では、/dist ディレクトリ内にあるファイルのみが必要です。 これらのファイルをディレクトリごとプロジェクトのルートディレクトリまで移動し、他のファイルをすべて削除します(ここの例を参照)。
  4. これらの変更をコミットし、リモートリポジトリの gh-pages ブランチにプッシュします。 あなたのアプリは  http://<your-github-username>.github.io/<your-application-name>/ で利用可能になります。

(訳注終了)

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,