AngularJSプロジェクトを実行するlocalhostサーバーを作成する方法


103

XamppとJetBrain WebStormを使用して、AngularJSプロジェクトを実行しました。しかし、それは複雑で低パフォーマンスです.AngularJSプロジェクトを実行する他の方法はありますか?

回答:


225

node.jsを実行している場合、http-serverは非常に簡単です。

cd あなたのプロジェクトフォルダに

npx http-server -o 

# or, install it separately so you don't need npx
npm install -g http-server
http-server -o 

-oブラウザでページを開くことです。実行http-server --helpして、ポート番号の変更などの他のオプションを表示します

持っていませんnodeか?

node/がnpmインストールされていない場合、これらの他のワンライナーの方が簡単かもしれません。

たとえば、pythonはほとんどのシステムにプリインストールされているため、以下のJohn Doeのpythonサーバーの方が高速です。

MacOSにはルビーがインストールされているので、Macを実行している場合は別の簡単なオプションです 。ruby -run -ehttpd . -p8000ブラウザでを開きますhttp://localhost:8000


37

Pythonには、特にWebサーバーを起動するための組み込みコマンドがあります。

Python3.x:

python -m http.server 8000

他のバージョン:

python -m SimpleHTTPServer 8000

ポート8000​​でWebサーバーを起動します

(これはPythonが前提条件です。Pythonがインストールされていない場合、他の答えの方が簡単な場合があります)


2
このコマンドが現在のディレクトリのコンテンツを提供することは注目に値します
Piyin

3
ああ、Python 3の場合python -m http.server 8000
ピイン

21

まず、ターミナルまたはcmdからNode.jsをインストールします。

apt-get install nodejs-legacy npm

次に、依存関係をインストールします。

npm install

次に、サーバーを起動します。

npm start

NodeJSにはWindows用のインストーラーがあります。nodejs.org
Amar Syla

システムをオンにすることでノードサーバーを自動的に起動することは可能ですか
Vinoth

@AmarSyla、私はbashプロファイルについて知りません。それを実装する方法を教えてください。
Vinoth 2017

5

cd <your project folder>(angularjsのデプロイ可能なコードがある場所)

sudo npm install serve -g

サーブ

あなたのページをヒットすることができます

localhost:3000またはIPaddress:3000


4

私が使う:

  • 表現し、
  • モーガン

Node.jsをインストールします。そしてnpm。npmはNode.jsとともにインストールされます

ルートプロジェクトディレクトリ内に配置

$ cd <your_angularjs_project>

次のコマンドは、package.jsonを作成します

$ npm init

ノードの高速インストール==>高速、ピノピオなし、ミニマリスト:

$ npm install express --save

node.js用のmorgan ==> HTTP要求ロガーミドルウェアをインストールします。

$ npm install morgan --save

server.jsファイルを作成する

server.jsファイルに次のコードを追加します

// Required Modules
var express    = require("express");
var morgan     = require("morgan");
var app        = express();

var port = process.env.PORT || 3002;

app.use(morgan("dev"));
app.use(express.static("./"));

app.get("/", function(req, res) {
    res.sendFile("./index.html"); //index.html file of your angularjs application
});

// Start Server
app.listen(port, function () {
    console.log( "Express server listening on port " + port);
});

最後に、AngularJSプロジェクトをlocalhostサーバーで実行します。

$ node server.js


3
  • 走る
サーブ

このコマンドは、プロジェクトフォルダーの場所の後にターミナルで実行されます ~/my-app$

  • 次にコマンドを実行します-URl NG Live Development Serverがリッスンしていることが表示されます localhost:4200

  • ブラウザをhttp:// localhost:4200で開きます


5
このコマンドは、angular1.xではなくangular2に対するものであり、このコマンドに対しても、ユーザーはangular cliをインストールする必要があります
Pardeep Jain

3

角度付きアプリケーションは、ローカルホスト上の任意のWebサーバーを使用してデプロイできます。以下のオプションは、配備要件に応じて、いくつかの可能なWebサーバー配備の配備手順の概要を示しています。


Microsoftのインターネットインフォメーションサービス(IIS)

  1. Windows IISを有効にする必要があります

    1.1。Windowsでは、コントロールパネルにアクセスし、[プログラムの追加と削除]をクリックします。

    1.2。[プログラムの追加と削除]ウィンドウで、[Windowsコンポーネントの追加と削除]をクリックします。

    1.3。[インターネットインフォメーションサービス(IIS)]チェックボックスをオンにし、[次へ]をクリックして、[完了]をクリックします。

    1.4。Angular Application ZipファイルをWebサーバーのルートディレクトリにコピーして抽出します:C:\ inetpub \ wwwroot

  2. Angularアプリケーションに、次のURLを使用してアクセスできるようになりました: http:// localhost:8080

NPM軽量Webサーバー

  1. 軽量Webサーバーのインストール1.1。https://www.npmjs.com/get-npm 1.2 からnpmをダウンロードしてインストールし ます。npmがインストールされたら、コマンドプロンプトを開き、npm install -g http-server 1.3と入力します。Angular Zipファイルを抽出する
  2. Webサーバーを実行するには、コマンドプロンプトを開き、Angularを以前に抽出したディレクトリに移動して、http-serverと入力します。
  3. Angular Applicationアプリケーションは、次のURLを使用してアクセスできるようになりました: http:// localhost:8080

Apache Tomcat Webサーバー

  1. Apache Tomcatバージョン8 1.1のインストール。Apache Tomcatをhttps://tomcat.apache.org/ 1.2 からダウンロードしてインストールし ます。Angular Application ZipファイルをWebサーバーのルートディレクトリC:\ Program Files \ Apache Software Foundation \ Tomcat 7.0 \ webappsにコピーして抽出します
  2. Angularアプリケーションに、次のURLを使用してアクセスできるようになりました: http:// localhost:8080

2

「あなたがnodejsをインストールしていると仮定すると」、

mini-httpはhttpサーバーを作成し
、パッケージをグローバルにインストールして から、プロジェクトディレクトリでnpm install mini-http -g
実行するcmd(ターミナル)を使用するかなり簡単なコマンドラインツールmini-http -p=3000であり、ブームです!ポート3000でサーバーを作成した場合は、http:// localhost:3000を確認してください

注:ポートを指定する必要はありません。単に実行するmini-httpmh、サーバーを起動することができます。


2

Javaを使用している場合は、単純に角度フォルダーをWebアプリケーションのWebコンテンツフォルダーに配置して、Tomcatサーバーにデプロイします。超簡単!



1

Angular ProjectにVisual Studio Communityまたはその他のエディションを使用した場合は、プロジェクトフォルダーに移動し、最初に次のように入力します。

C:\ Project Folder> npm install -g http-server次のように表示されます。+ http-server@0.11.1は、4.213sに25個のパッケージを追加しました

次に、C:\ Project Folder> http-server –oと入力します

アプリケーションがhttp://127.0.0.1:8080/に自動的に表示されることがわかります


0

ビジュアルスタジオコードで環境を設定することもできます。Ctrl + Shift + Pを実行し、表示されたボックスにctrと入力して、tasks:Configure Task Runnerを選択し、次にtask.jsonファイルを次の{ "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["index.html"] }ように変更します。変更を保存してから、index.htmlファイルを選択してCtrl + Shiftと入力します。 + B.これにより、デフォルトのブラウザーでプロジェクトが開きます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.