Angular アプリケーションのビルドとその他のリソース
この Angular の最後の記事では、本番環境に対応したアプリをビルドする方法について説明し、学習の旅を続けるためその他のリソースを提供します。
| 前提条件: | 主要な HTML と CSS、 JavaScript 言語を扱うことができ、 端末/コマンドラインに関する知識があること。 |
|---|---|
| 目的: | Angular アプリをビルドする方法を学ぶ。 |
完成したアプリケーションのビルド
アプリケーションの開発が完了したので、Angular CLI の build コマンドを実行できます。
todo ディレクトリーで build コマンドを実行すると、アプリケーションは dist/ という名前のディレクトリーにコンパイル結果が出力されます。
todo ディレクトリーで、コマンド ラインで次のコマンドを実行します。
ng build -c production
CLI はアプリケーションをコンパイルし、コンパイル結果を新しい dist ディレクトリーに出力します。
ng build の --configuration production/-c production フラグは、プロダクションに不要なものを取り除きます。
アプリケーションのデプロイ
アプリケーションをデプロイするには、 dist/my-project-name フォルダーをウェブサーバーに追加します。
これらのファイルは静的であるため、次のようなファイルを提供できる任意のウェブサーバーでホストできます。
- Node.js
- Java
- .NET
Firebase, Google Cloud, or App Engine などのバックエンドが利用できます。
ローカルでホスティングする
楽しむために、ビルド後に次のコマンドを実行して http-server パッケージを使用すると、ビルドしたアプリを自分のマシンでホスティングすることができます。
npx http-server ./dist/todo/browser/ -o
このコマンドは、ポート 8080 上の dist/todo/browser ディレクトリーでサービスを提供します。そのため、ブラウザーで http://127.0.0.1:8080 を開いてアプリが動作していることを確認できます。
HTTP サーバーを使用すると、ローカルネットワーク上の他の端末から、コンピューターの IP アドレスでアプリにアクセスすることもできます。このアドレスはコンソールで 127.0.0.1 アドレスの下に掲載されています。
その次は
ここまで基本的なアプリケーションを作成しましたが、 Angular の学びはまだ始まったばかりです。 以下の Angular のドキュメントを調べることで、さらに学ぶことができます。
- チュートリアル: サービスの使用、ナビゲーション、サーバーからのデータの取得など、 Angular の機能に焦点を当てた詳細なチュートリアル。
- Angular Components ガイド: ライフサイクル、コンポーネントの相互作用、ビューのカプセル化などのトピックをカバーする一連の記事。
- Forms ガイド: Angular でのリアクティブフォームの作成、入力の検証、動的フォームの作成について説明する記事。