将 Angular-cli 项目部署到 nginx

Question

我正在尝试将 angular-cli 项目部署到 nginx，但遇到 css/js 无法加载的问题，我应该将 nginx 文件夹中的 dist 文件复制到哪里？

Answer 1

可能存在一种可能性，这就是您在加载资产时遇到问题/错误的原因：

• index.html 头标记中的基本 href 错误
• ng build 命令时 --base-href 值错误
• 错误的 nginx 配置（即服务器根目录或服务器位置 /）

解决办法如下：

假设您想在 HOST：http://example.com 和 PORT：8080 上部署您的 Angular 应用程序 注意 - HOST 和 PORT 在您的情况下可能会有所不同。

确保您的 index.html 头部标签中有 <base href="/">。

1. 首先，转到您机器上的 Angular 存储库（即 /home/user/helloWorld）路径。

2. 然后使用以下命令为您的生产服务器构建 /dist：

   ng build --prod --base-href http://example.com:8080

3. 现在将 /dist（即 /home/user/helloWorld/dist）文件夹从您计算机的 Angular 存储库复制到您要托管生产服务器的远程计算机。

4. 现在登录到您的远程服务器并添加以下 nginx 服务器配置。

   server {
   
       listen 8080;
   
       server_name http://example.com;
   
       root /path/to/your/dist/location;
   
       # eg. root /home/admin/helloWorld/dist
   
       index index.html index.htm;
   
       location / {
   
           try_files $uri $uri/ /index.html;
   
           # This will allow you to refresh page in your angular app. Which will not give error 404.
   
       }
   
   }
   

5. 现在重启 nginx。

6. 就是这样！现在您可以通过http://example.com:8080

访问您的 Angular 应用程序

希望对您有所帮助。