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

Question

我实际上正在使用Typescript学习Angular 2并基于角度种子项目(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即可.在我的情况下,我在"数字海洋"上安装了一个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;
    }
}   

要激活更改,请重新启动webserver nginx:

sudo service nginx restart

然后将index.html和捆绑包文件复制到/path/dist-nginx您的服务器上,您就可以运行了.

Answer 2

如果有人仍在努力设置角度2/4/5 app + Nginx的生产设置,那么这里是完整的解决方案:

假设您要在HOST上部署角度应用程序:http://example.com和PORT:8080 注意 - 在您的情况下,HOST和PORT可能会有所不同.

确保你有<base href="/">index.html head标签.

1. 首先,转到您机器上的角度回购(即/ home/user/helloWorld)路径.

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

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

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. 而已 !!现在,您可以访问http://example.com:8080上的角度应用

希望它会有所帮助.

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 restart nginx