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

更快的部署方式如下：

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

Answer 3

如果有人仍在努力进行角度2/4/5 app + Nginx的制作设置，那么这是完整的解决方案：

假设您要在主持人处部署角度应用：http://example.com和PORT：8080 注 - 在您的情况下，HOST和PORT可能会有所不同。

确保index.html头标记中有<base href="/">。

首先，转到您机器上的角度回购（即/ home / user / helloWorld）路径。
然后使用以下命令为生产服务器构建/ dist：

ng build --prod --base-href http://example.com:8080
现在将copy / dist（即/ home / user / helloWorld / dist）文件夹从您机器的angular repo复制到您要托管生产服务器的远程计算机。

现在登录到您的远程服务器并添加以下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.

    }

}

现在重启nginx。
就是这样!!现在，您可以在http://example.com:8080

希望它会有所帮助。

Answer 4

我使用官方angular CLI代替部署到制作中并且很容易做到。您可以通过这种方式部署到预生产，即生产：

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

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

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

4 个答案: