web-dev-qa-db-ja.com

Angular 2 + TypeScript + Webpackアプリをデプロイするにはどうすればよいですか

私は実際にAngular 2をTypeScriptで学んでおり、角度シードプロジェクト（ angular-seed ）に基づいて小さなアプリを開発しました。目的であり、次のようなバンドルファイルを含むdistフォルダを展開する準備ができました：

dist/                    
  main.bundle.js              
  main.map         
  polyfills.bundle.js          
  polyfills.map            
  vendor.bundle.js         
  vendor.map

ただし、新しいので、今すぐEC2サーバーに展開する方法がわかりません。私は静的ファイルを提供するためにNginxサーバーを設定する必要があることを読みましたが、特にバンドルファイルで動作するように設定する必要がありますか？

間違いがあればすみません。事前に感謝します！

nginxangulardeploymentamazon-ec2webpack
22
Antoine Guittet

あなたは正しい軌道に乗っています.....

EC2にnginxをインストールするだけです。私の場合、Linux Ubuntu 14.04が「Digital Ocean」にインストールされていました。

まず、apt-getパッケージリストを更新しました。

Sudo apt-get update

次に、apt-getを使用してNginxをインストールします。

Sudo apt-get install nginx

次に、デフォルトのサーバーブロック構成ファイルを開いて編集します。

Sudo vi /etc/nginx/sites-available/default

この構成ファイルのすべてを削除し、次のコンテンツを貼り付けます。

server {
    listen 80 default_server;
    root /path/dist-nginx;
    index index.html index.htm;
    server_name localhost;
    location / {
        try_files $uri $uri/ =404;
    }
}

変更を有効にするには、ウェブサーバーnginxを再起動します。

Sudo service nginx restart

次に、index.htmlとバンドルファイルをサーバーの/path/dist-nginxにコピーすると、稼働します。

27
Herman Fransen

より迅速な展開方法は次のとおりです。

1。 Hermanの説明に従ってnginxをインストールします。
2。/etc/nginx/sites-available/defaultを乱すことなく、dist/*ファイルを/ var/www/html /にコピーします。
sudo cp/your/path/to/dist/*/var/www/html /
3。 nginxを再起動します。
sudo systemctl restart nginx

6
rzvAmmar

angular 2/4/5 app + Nginxのプロダクションセットアップにまだ苦労している場合、完全なソリューションは次のとおりです。

angular Hostのアプリ：http://example.comおよびPORT：8080注-ホストとPORTは、ケースによって異なる場合があります。

<base href="/">あなたのindex.htmlヘッドタグ。

  1. まず、マシンのangular repo（i.e./home/user/helloWorld）パスに移動します。

  2. 次に、次のコマンドを使用して、運用サーバー用に/ distをビルドします。

    ng build --prod --base-href http://example.com:808

  3. ここで、/ dist（つまり/ home/user/helloWorld/dist）フォルダーをマシンのangular repoから本番サーバーをホストするリモートマシンにコピーします。

  4. リモートサーバーにログインし、次のnginxサーバー構成を追加します。

    server {

    listen 8080;

    server_name http://example.com;

    root /path/to/your/dist/location;

    # eg. root /home/admin/helloWorld/dist

    index index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    }

}

  5. 次に、nginxを再起動します。

  6. それでおしまい ！！これで、angular app - http://example.com:808 にアクセスできます

役に立てば幸いです。

6
viks

代わりに、公式の angular CLI を使用して実稼働環境に展開します。これは非常に簡単です。運用前、つまりこの方法で運用に展開できます。

ng build --env = pre --output-path = build/pre /

ng build --env = prod --output-path = build/prod /

0
Xavi Cl