Angular Apache 问题的服务器端呈现，不加载 runtime.js、main.js、styles.css 等文件

Question

尽管对这个问题进行了大量不成功的研究，但我相信它可能并不难解决，只是我对 Angular 和 Apache 的经验不足。

这是信息。我有一个 Angular 2 应用程序，我想在服务器端呈现，以改善其搜索引擎优化，以及改善社交媒体上共享网站的链接的外观。

托管网站的服务器是 Linux Ubuntu Linux ubuntu 18.04.

Web 服务器应用程序是 Apache2。

我已经按照官方Angular documentation.

的服务器端渲染说明进行操作了

此外，我启动了 server.js 文件，因此它在端口 4000 为应用程序提供服务。我必须指出，我在本地运行没有问题。问题是当我尝试在服务器上运行它时...

出于安全原因，我不会在此 post 中使用真实域。

打开页面时：www.mydomainexample。com/ssr 我得到这个错误：

这是我的文件夹结构：

/var/www/html/
- ssr/
  - .htaccess
  - server.js
  - 距离/
    - 浏览器/
      - 3rdpartylicenses.txt
      - es2015-polyfills.js
      - favicon.ico
      - fontawesome-webfont.svg
      - fontawesome-webfont.ttf
      - fontawesome-webfont.woff
      - fontawesome-webfont.woff2
      - index.html
      - main.js
      - polyfills.js
      - runtime.js
      - scripts.js
      - styles.css
      - 资产
    - 服务器/
      - main.js
      - main.js.map

这里是apache2.conf

...
<Directory />
    Options FollowSymLinks
    AllowOverride None
    Require all denied
</Directory>

<Directory /usr/share>
    AllowOverride None
    Require all granted
</Directory>

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>
...

这是 .htaccess 文件：

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /ssr/
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule ^ - [L]
 RewriteRule ^ /dist/browser/index.html
</IfModule>
<VirtualHost *:80>
 ServerName mydomainexample.com
 ServerAlias www.mydomainexample.com
 <Proxy *>
  Order allow,deny
  Allow from all
 </Proxy>
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / http://localhost:4000/
 ProxyPassReverse / http://localhost:4000/
</VirtualHost>

<VirtualHost *:443>
 ServerName mydomainexample.com
 ServerAlias www.mydomainexample.com
 <Proxy *>
  Order allow,deny
  Allow from all
 </Proxy>
 ProxyPreserveHost On
 ProxyRequests Off
 ProxyPass / https://localhost:4000/
 ProxyPassReverse / https://localhost:4000/
</VirtualHost>

此外，我认为显示索引 html 文件的一部分很重要，而且我认为基本标记也很重要。这是来自 index.html 文件的基本标签：

...
<base href="/">
...

Answer 1

如果您的网站运行在 /ssr 下，您需要使用 <base href="/ssr"> 来构建您的应用程序。

另外，您可能不需要 dist 文件夹。 browser 和 server 文件夹通常位于 server.js 旁边，但这可能取决于您的设置。

此外，您的重写规则似乎不起作用，因为您的文件请求显然得到 HTML 响应，但这可能与基本 href 有关。

Angular Apache 问题的服务器端呈现，不加载 runtime.js、main.js、styles.css 等文件

Angular server-side rendering on Apache issue, not loading files like runtime.js, main.js, styles.css

apache2

server-side-rendering

angular