Angular プロジェクトを nginx にデプロイする方法

私はずっ​​と Angular が好きで、最近たまたまプロジェクトで使用したので、以下の記事で主に Angular プロジェクトの作成、パッケージ化から nginx のデプロイまでの関連情報を紹介します。サンプルコードで紹介しています。とても詳しく書かれているので、困っている友達は参考にしてください。

はじめに

現在、AngularJS は Javascript の MVC (MV* だという人もいますが、今は気にしないでください) フレームワークとして広く使用されており、応答性の高い Web をより速く開発するための強力な方法を提供します。より簡単なメカニズム。 MVC フレームワークとして、Web フロントエンド コードをモデル、ビュー、コントローラーの 3 つのコンポーネントに分割します。したがって、データ モデル、アプリケーション ロジック (コントローラー)、およびビューのプレゼンテーションが明確に分離され、主要な開発領域に集中しやすくなります。ビューは表示のためにモデルからデータを受け取ります。ユーザーがキーボードをクリックまたは入力してアプリケーションを操作すると、コントローラーはモデル内のデータを変更して応答します。最終的に、モデル内で発生した変更がビューに通知されるため、表示されたコンテンツを更新できます。

最近、コンピューターに詳しくない友人のために小さなアプリケーションを作成しているのですが、それを Angular を使用して作成したいと考えています。通常、IDE で開発する場合、npm start または ngserve を使用して内部サーバーを起動しますが、開発したプログラムを友人に渡す場合、そのプログラムをブラウザで開けるようにするにはどうすればよいでしょうか。ここではプログラムをデプロイするために nginx サーバーを選択しました。

1. 新しい Angular プログラムを作成します

1. Nodejs をインストールします

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 新しいプロジェクトを作成します

npm install -g @angular/cli

5. IDE の package.json

があるディレクトリで cnpm install

を実行し、localhost:4200 の

を表示します。 2. パッケージ

ng serve 或 npm install

ng ビルドが実行されます。dist ファイルが生成されます。プロジェクトフォルダー、中にはパッケージ化されたファイルがあります。

3. デプロイnginx公式Webサイトからnginxをダウンロードします

distフォルダー内のパッケージ化されたファイルをnginx/htmlにコピーし、名前をmyProjに変更します

ng new myProj

nginx.exeをクリックしてnginxを起動します

ブラウザにlocalhostと入力しますプロジェクトを表示するには、:80 をクリックしてください

現時点では、nginx をパッケージ化して友人に送信し、nginx.exe をクリックしてブラウザに localhost:80 と入力するように指示するだけです。

上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptでオブザーバーパターンを実装する方法

JavaScriptで明示的変換と暗黙的変換を実装する方法

ReactNativeでReduxアーキテクチャを使用する方法

以上がAngular プロジェクトを nginx にデプロイする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。