2017-03-03 10 views
8

アングル2のウェブサイトをホストするには?アングル2のウェブサイトをホストする方法は?

私はアンギュラ2には新しく、バックエンドのないシンプルなウェブサイトを作った。

私はindex.htmlファイルを直接開こうとしたときにエラーが発生していると思いました。

しかし、コマンド"npm start"の後には、コンピュータ上のローカルサーバーを実行するうまく動作します。

したがって、このウェブサイトを簡単なホスティングサイトでホストするにはどうすればいいですか?

サイトをホスティングすると自動的にindex.htmlファイルが見つかると思いますが、ここに問題がありますが、index.htmlは"npm start"コマンドなしでは起動しません。

サーバー上でそのプロセスを開始する必要がありますか?

私をご案内ください。

+1

https://angular.io/docs/をts/latest/guide/deployment.html すべてのHTTPサーバーがAngular2 applを提供できます –

答えて

19

ホストあなたの角度2アプリケーションをFirebaseにこれらの簡単な手順を使用して: は、第1の角度CLIを使用してプロジェクトを作成しています。ここでの詳細情報を取得https://cli.angular.io/

手順1:以下の構築にcmdをお使いのApp

実行ビルドし

ng build --prod 

ステップ2:

Firebase CLIをFireBaseプロジェクトを作成し、インストールします。 Firebaseコンソールをhttps://console.firebase.google.com/で開き、新しいFirebaseプロジェクトを作成します。 Firebaseコマンドラインツールをインストールするには

は実行します。

npm install -g firebase-tools 

手順3:展開は、ログインするfirebase cmdを下回っ

実行をFireBaseする:

firebase login 

をそれが開きますブラウザと認証のためにあなたに尋ねる。 Firebaseアカウントでログインしてください。その後、ブラウザウィンドウを閉じることができます。コマンドラインで、ログインが正常に実行されたというメッセージが表示されます。あなたが使用したい特徴Firebaseクライアントのどの求められている全ての

firebase init 

まず:

は今すぐ下記のCMDを実行します。 [ホスティング:Firebase Hostingサイトの設定と展開]オプションを選択する必要があります。次に、Firebaseクライアントはどのフォルダを展開に使用するかを尋ねます。 distと入力します。それは私たちの生産ビルドが格納されている場所であるため重要です。

次は、このアプリケーションが単一ページアプリケーションであるかどうかと、すべてのURLをindex.htmlに書き換えるかどうかという質問です。私たちの場合は、はいと答える必要があります。

最後の質問は、Firebaseがファイルindex.htmlを書き込むべきかどうかです。その質問に対する答えは「いいえ」です。

さて、展開するCMDの下に実行します。

firebase deploy 

Firebaseは、あなたがオンラインアプリケーションへのアクセスに使用することができますURLを提供します。

[更新]今

あなたには、いくつかの変更を行い、同じURLにコードをデプロイしたい場合は、あなたのアプリケーションを正常にデプロイした後。同じ手順に従ってください。しかし、あなたがあなたのプロジェクトを指していることを確認してください。現在のプロジェクトの使用などのプロジェクトを作成するには

firebase list 

:すべてのプロジェクトを一覧表示するには

は、このコマンドを使用する

firebase use <project_id> 
+0

こんにちは私はこの指示に従って、私のアプリをアップロードすることができました! ..しかし、今私はいくつかの変更を加えたbacuse私のアプリケーションを更新しようとしている1つの問題が...私はどのように更新することができますか? –

+0

こんにちは@IxamDeirf同じ手順を実行する必要がありますが、その前に作業中の現在のプロジェクトを指していることを確認するのは簡単です。私は私の答えを更新しました。答えの終わりを見てください。 –

+1

ありがとう@amanDeepSharmaチャームのように働いています!!角の新参者のために共有される非常に面白くて貴重な情報。 –

2

あなたはあなたのソリューションを展開するHerokuのを使用することができます。

https://www.heroku.com

+1

シンプルでストレートなソリューションを提供してください.... – Yash

0

あなたはHTTPサーバ使用することができます。

http-s erberはシンプルで設定不要のコマンドラインhttpサーバです。実稼働環境で使用するには十分強力ですが、テスト、地域開発、および学習に使用するには単純でハッキング可能です。

npm install http-server -g 

でプロジェクトをビルド:プロジェクトディレクトリの使用に続い

ng build -app 

:ブラウザhttp://localhost:3000またはhttp://your-ip:3000

http-server dist/ -p 3000 // -p is port 

関連する問題