Angular4应用部署NGINX遇权限拒绝问题求助

这个问题我碰到过好几次，核心原因其实是Nginx的运行用户（默认是www-data）没有权限访问/root目录下的文件，再加上你配置里的一个小错误，导致了这个权限拒绝的报错。咱们一步步解决：

1. 修正Nginx配置里的root路径错误 #

你当前的配置里把root指向了index.html文件本身，这是不对的——root指令应该指向包含index文件的目录，而不是具体文件。同时，/root目录的默认权限是700，只有root用户能访问，Nginx的运行用户www-data根本进不去这个目录，所以我们要把Angular应用文件移到web服务常用的目录，比如/var/www/：

移动应用文件 #

sudo mv /root/test/myapp/web-portal /var/www/

修改Nginx配置 #

打开你的Nginx配置文件（通常是/etc/nginx/sites-available/default），修正root路径，并添加Angular单页应用必需的路由处理规则：

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    # 指向移动后的应用目录，不是具体文件
    root /var/www/web-portal;
    index index.html index.htm index.nginx-debian.html;

    server_name your_domain_or_your_server_ip;

    # Angular单页应用需要这个规则来处理前端路由
    location / {
        try_files $uri $uri/ /index.html;
    }
}

2. 设置正确的文件权限 #

确保Nginx的运行用户www-data能读取应用文件：

# 更改文件所有者为www-data
sudo chown -R www-data:www-data /var/www/web-portal

# 设置合理的文件权限，保证可读可执行
sudo chmod -R 755 /var/www/web-portal

3. 验证配置并重启Nginx #

# 测试配置是否有语法错误
sudo nginx -t

# 如果测试通过，重启Nginx服务
sudo systemctl restart nginx

这样操作后，你的Angular4应用应该就能正常通过Nginx访问了。

内容的提问来源于stack exchange，提问作者Muhammad Mudassir