如何在开发模式下为 Angular 应用程序设置位置，其中 index.html 与 root 的位置不同

Question

我正在尝试 'quickly' 将我的 Angular 应用程序以开发模式部署到我的 digitalocean droplet - 问题是： node_modules 文件夹中的每个文件都抛出 404 错误 当然 bootstrap 和 jquery 除外cdn

我认为这是因为 node_modules 文件夹位于 index.html 文件的父文件夹中 - 我将如何为此应用程序设置我的 nginx 默认文件位置？

这是我当前的设置

app 文件夹结构

/Root/ 

|- node_modules/ 

|- src/ 
 
    |- index.html 

    |- app/ 
         | - main.ts

NGINX 默认文件：

server {
    listen 80;

    server_name xxx.xx.xx.xx;


    location /randomquote {
        alias /var/www/html/randomquotegen/ ;
        try_files $uri/src/index.html $uri/src/index;
    }

}

Answer 1

在开发模式下，您可能会运行类似 webpack 的东西 npm start 端口 4200 上的小型服务器，而在生产模式下，您可能只有一个 dist/文件夹，并且只需要一个用于该静态内容的服务器。我可能会推荐一个构建策略，而不是把这个重量放在你的生产服务器上，但如果你这样做，你会 npm 安装所有的开发依赖，npm start 开发进程和代理 nginx 到它，像这样：

location / {
          proxy_pass http://localhost:4200;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Host $http_host;
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;
    }

如何在开发模式下为 Angular 应用程序设置位置，其中 index.html 与 root 的位置不同

How to set location for Angular app in dev mode where index.html is different location than root

nginx

digital-ocean

angular