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

Question

我实际上正在使用 Typescript 学习 Angular 2，并基于 angular-seed 项目 (angular-seed) 开发了一个小应用程序。我已经为生产目的构建了应用程序，并准备好部署 dist 文件夹，其中包含我的捆绑文件，如下所示：

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

但是，作为一个新手，我现在不知道如何在我的 EC2 服务器上部署它。我读到我必须配置 Nginx 服务器来提供我的静态文件，但我是否必须特别配置它才能使用我的捆绑文件？

如有错误请见谅。提前非常感谢！

Answer 1

你在正确的轨道上.....

只需在您的 EC2 上安装 nginx。就我而言，我在“Digital Ocean”上安装了一个 linux Ubuntu 14.04。

首先我更新了 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 即可启动并运行。

Answer 2

如果有人还在为 angular 2/4/5 app + Nginx 的生产设置而苦苦挣扎，那么这里是完整的解决方案：

假设您想在 HOST：http://example.com 和 PORT：8080 上部署 Angular 应用 注意 - HOST 和 PORT 在您的情况下可能会有所不同。

确保您的 index.html 头部标签中有 <base href="/">。

1. 首先，转到您机器上的 Angular 存储库（即 /home/user/helloWorld）路径。

2. 然后使用以下命令为您的生产服务器构建 /dist：

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

3. 现在将 /dist（即 /home/user/helloWorld/dist）文件夹从您计算机的 Angular 存储库复制到您要托管生产服务器的远程计算机。

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. 就是这样！现在您可以通过http://example.com:8080

访问您的 Angular 应用程序

希望对您有所帮助。

Answer 3

一种更快捷的部署方式如下：

1.按照 Herman 的说明安装 nginx。
2。将您的 dist/* 文件复制到 /var/www/html/ 而不会干扰 /etc/nginx/sites-available/default。
sudo cp /your/path/to/dist/* /var/www/html/
3。重启nginx：
sudo systemctl 重启 nginx

Answer 4

我正在使用官方的angular CLI 来部署到生产环境，这很容易做到。您可以以这种方式部署到预生产即或生产：

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

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