我如何部署我的Angular 2 + Typescript + Webpack應用程序

我實際上是通過Typescript學習Angular 2，並基於angular-seed項目（angular-seed）開發了一個小應用程序。我已經建立了用於生產目的的應用程序，並得到了DIST文件夾準備含有這樣我的包文件進行部署：我如何部署我的Angular 2 + Typescript + Webpack應用程序

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

然而，作爲一個新鮮的，我不知道如何將其現在部署我EC2服務器上。我讀過，我必須配置Nginx服務器來爲我的靜態文件提供服務，但是我必須配置它才能使用我的包文件嗎？

請原諒我的錯誤，如果有的話。提前感謝！

來源

2016-09-21 Antoine Guittet

你是在正確的軌道上.....

只要安裝在您的EC2 Nginx的。在我的情況下，我在「Digital Ocean」上安裝了Ubuntu 14.04。

首先我更新了apt-get的軟件包列表：

sudo apt-get update

然後使用安裝Nginx的apt-get的：

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; 
    } 
}

爲了使更改生效，重新啓動Web服務器nginx的：

sudo service nginx restart

然後在服務器上的index.html和包文件複製到/path/dist-nginx，你是啓動和運行。

來源

2016-09-21 17:32:01

這恰好給了我一個404 ..你碰巧知道爲什麼以及如何解決它？ – Mellkor

bundle文件是'node_module'目錄中的文件嗎？ – Mellkor

當您使用Angular Router並使用--prod標籤構建應用程序時，應稍微修改nginx配置。查看[angular.io部署頁面]（https://angular.io/guide/deployment）。 – Superbyte

我使用的是官方angular CLI，而不是部署到生產環境，而且非常容易。您可以部署到生產前即或生產這樣：

納克構建--env =預--output路徑=編譯/預/

納克構建--env = PROD - 輸出路徑=編譯/生產/

來源

2016-09-21 10:15:08

這不回答這個問題。問題在於詢問關於在服務器上的部署，並且已經將該應用內置到「dist」文件夾中。問題是要求在外部服務器上部署'dist'文件夾，而不是構建'dist'文件夾。 – Harry

問題關於使用webpack部署而不是Cli –

是的，這確實只在服務器上的nginx上部署！ – JoelParke

更快的部署方法如下：

1.如Herman所述，安裝nginx。
2.將dist/*文件複製到/ var/www/html /而不會打擾/ etc/nginx/sites-available/default。
須藤CP /你/路徑/到/距離/ *的/ var/www/html等/
3.重啓nginx的：
須藤systemctl重啓nginx的

來源

2017-03-30 12:14:39 rzvAmmar

我如何部署我的Angular 2 + Typescript + Webpack應用程序

回答

相關問題