将Angular-cli项目部署到Nginx

Question

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

Answer 1

可能是其中一种，这就是为什么在加载资产时遇到问题/错误：

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

解决方法如下：

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

确保index.html头标记中包含<base href="/"> 。

1. 首先，转到计算机上的角度存储库（即/ home / user / helloWorld）路径。

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

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

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

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访问您的角度应用程序

希望对您有所帮助。