在 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 中配置缓存以获得更好的性能。