在 NGINX 上托管 Angular 应用程序的终极指南

在 nginx 服务器上托管 angular 应用程序可以增强性能，提供更好的安全性，并为生产环境提供更轻松的配置。以下是在 nginx 上部署 angular 应用程序的分步指南。

先决条件

已安装 nginx：确保您的服务器上安装了 nginx。您可以使用以下命令将其安装在基于 linux 的系统上：

狂欢

sudo apt update
sudo apt install nginx
angular 应用程序：确保您的 angular 应用程序已准备好用于生产并使用以下命令进行构建：

狂欢

ng build --prod
访问服务器：您应该具有 ssh 访问权限或直接访问要部署应用程序的服务器。
第 1 步：构建您的 angular 应用程序

在 angular 项目目录中运行以下命令来构建用于生产的应用程序：

狂欢

ng build --prod
此命令将在项目的 dist 文件夹中生成生产就绪文件。

第 2 步：将文件复制到服务器

您需要将 angular dist 文件夹的内容复制到您的服务器。您可以使用 scp 或 rsync。假设您的 dist 文件夹名为 dist/my-angular-app，请运行：

狂欢

scp -r dist/my-angular-app/* 用户名@your_server_ip:/var/www/html/
将 username 替换为您的服务器用户名，将 your_server_ip 替换为您服务器的 ip 地址。

第 3 步：配置 nginx

文件位于服务器上后，您需要配置 nginx 来为您的 angular 应用程序提供服务。为您的应用程序创建一个新的配置文件：

狂欢

sudo nano /etc/nginx/sites-available/my-angular-app
将以下配置插入文件中：

nginx

服务器{
听80；
服务器名称 your_domain.com； # 替换为您的域名或服务器 ip

location / {
    root /var/www/html; # Path to the folder where your files are located
    try_files $uri $uri/ /index.html; # Fallback to index.html for Angular routing
}

error_page 404 /index.html; # Handle 404 errors by redirecting to index.html

登录后复制

}
保存并退出编辑器。

第 4 步：启用配置

创建符号链接以启用站点配置：

狂欢

sudo ln -s /etc/nginx/sites-available/my-angular-app /etc/nginx/sites-enabled/
第 5 步：测试您的 nginx 配置

在重新启动 nginx 之前，您应该测试配置以确保没有语法错误：

狂欢

sudo nginx -t
如果一切正确，您将看到一条消息，表明测试成功。

第 6 步：重新启动 nginx

重新启动 nginx 以应用更改：

狂欢

sudo systemctl 重新启动 nginx
第 7 步：访问您的应用程序

现在，您的 angular 应用程序应该可以通过您的域或公共 ip 地址访问。打开网络浏览器并访问您的域（例如，http://your_domain.com）。

其他提示

ssl 配置：建议设置 ssl 以确保安全访问。您可以使用 let's encrypt 获取免费的 ssl 证书。
错误处理：实施适当的错误处理来管理意外情况。
缓存：考虑在 nginx 中配置缓存以获得更好的性能。

以上就是在 NGINX 上托管 Angular 应用程序的终极指南的详细内容，更多请关注抖狐科技其它相关文章！