当前位置：首页 > 文章列表 > 文章 > 前端 > 在 NGINX 上托管 Angular 应用程序的终极指南

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

来源：dev.to 2024-12-08 16:39:41 0浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《在 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 步：访问您的应用程序