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

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

先决条件

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

狂欢

码上飞

码上飞（CodeFlying） 是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

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 应用程序的终极指南的详细内容，更多请关注php中文网其它相关文章！