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

Posted 2023-03-04

【中文标题】如何部署我的 Angular 2 + Typescript + Webpack 应用程序

【英文标题】：How can I deploy my Angular 2 + Typescript + Webpack app

【发布时间】：2017-01-29 10:55:37

【问题描述】：

我实际上正在使用 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 服务器来提供我的静态文件，但我是否必须特别配置它才能使用我的捆绑文件？

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

【参考方案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 即可启动并运行。

【讨论】：

这恰好给了我一个 404.. 你知道为什么以及如何解决它吗？

捆绑文件是node_module 目录中的文件吗？

当您使用 Angular 路由器并使用 --prod 标签构建您的应用程序时，您应该稍微修改您的 nginx 配置。查看angular.io Deployment Page。

angular.io/guide/deployment#fallback 配置服务器将丢失文件的请求重定向到 index.html。更多关于这下面。 try_files $uri $uri/ index.html;

'/path/dist-nginx' 实际上应该是什么？

【参考方案2】：

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

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

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

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

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

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

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

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

访问您的 Angular 应用程序

希望对您有所帮助。

【讨论】：

第 4 节是我需要的，如果 url 不存在，则根据 Angular 文档重新路由到 index.html。

【参考方案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

【参考方案4】：

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

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

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

【讨论】：

这不能回答问题。问题是询问服务器上的部署，并且已经将应用程序内置到 dist 文件夹中。问题是关于在外部服务器上部署 dist 文件夹，而不是构建 dist 文件夹。

关于使用 webpack 而非 Cli 部署的问题询问

是的，这确实是只部署在服务器上的 nginx 上！

虽然它没有回答这个问题，但我认为这个答案有一些优点，因为ng build 可能会提供比使用 NGINX 更好的部署到生产的方式。