web-dev-qa-db-ja.com

angular jsで使用するApache 2の書き換えルール

明らかに、多くのmodリライトのディスカッションと回答がウェブ全体に存在しています。しかし、私はそれらを把握するのに苦労しています。だから私はここで尋ねようと思いました。

私は、Andy Joslinがここのコメントで説明したことを行うための書き換えルールを求めています： https://stackoverflow.com/a/11100438

これは、example.comのルートにある私の現在のdir構造です

  • app /
  • app/index.html（angular jsアプリケーションの「ルート」）
  • api（これは 'api'に使用されるsymfony 2アプリになります。angularからここにajaxリクエストを送信します。）

/ apiへのリクエストを除くすべてのリクエストをapp/index.htmlにリダイレクトしたいと思います。

例えば：

http://example.com/categories/electronics/iPod は、実際には http://example.com/app/indexに行くようなものです。 html/categories/electronics/iPod

App/index.htmlの部分を非表示にしたいのですが。

次に、 http://example.com/api へのリクエストには例外があります。これらのURLパスにajaxリクエストを行う必要があるためです。

ありとあらゆるヘルプ/ガイダンスをありがとう。

apachemod-rewriteangularjsrewrite
21
Mike Haas

ここにあなたを始めるためのものがあります（これを/.htaccessファイルに入れてください）：

Options +FollowSymLinks
IndexIgnore */*
RewriteEngine on

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/api

# otherwise forward it to index.html 
RewriteRule ^.*$ - [NC,L]
RewriteRule ^app/. /app/index.html [NC,L]

注：新しいApacheバージョンについては、次の回答も参照してください。これにより、はるかに簡単にFallbackResourceを使用できます。

16
Stewie

この質問に対する受け入れられた回答は古くなっています。 Apache 2.2.16以降のconfファイルでFallbackResourceディレクティブを使用できるようになりました。

FallbackResource /app/index.html

FallbackResourceディレクティブで「/ api」ルートを無視する場合：

<Directory /api>
FallbackResource disabled
</Directory>
26
Scott Ferguson

私の本番サーバーから：

<VirtualHost *:80>
        ServerName XXX.com

        DocumentRoot /home/www/XXX.com/www

        # Local Tomcat server
        <Location /api/>
          ProxyPass http://localhost:8080/api/
          ProxyPassReverse http://localhost:8080/api/
        </Location>

        RewriteEngine On

        # If an existing asset or directory or API is requested go to it as it is
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d [OR]
        RewriteCond %{REQUEST_URI} /api
        RewriteRule ^ - [L]

        # If the requested resource doesn't exist (and is not API), use index.html
        RewriteRule ^ /index.html

        ErrorLog logs/XXX.com-error.log
        CustomLog logs/XXX.com-access.log common
</VirtualHost>

その点に注意してください "！"受け入れられた回答の「/ api」の前が正しくありません。

0
Andrey Minogin

この回答の問題は、ファイルが見つからない場合でも404が必要なことです。ユーザーがフロントエンドアプリケーションをどのように構築しているかに応じて、CSSまたはその他のファイルが404を返すことは非常に一般的です。特に、より大きな動的アプリケーションを構築している場合や、フロントエンドの作業をアウトソーシングしている場合はそうです。また、angularルートは通常、ファイルシステム上の何にも関連していません。単一のディレクトリに絞り込むと、上記が機能する場合があります。たとえば、すべてに共通のプレフィックスを使用することがよくあります。 angularファイルシステムレイアウトに関連しないルート（/ ajs /）。

<Directory /ajs>
FallbackResource /app/index.html
</Directory>

それならもっと理にかなっていますが、それは私にはうまくいかないようです。共通のプレフィックスを使用すると、バックエンドに関係なく、バックエンドルールがはるかに単純になります。たとえば、リバースプロキシを使用していない場合は、単純なサーバー転送コントローラーをセットアップできます。また、Apache書き換えルールのモデリングが簡単になります。例えば：

RewriteEngine On
RewriteRule ^/ajs/(.+)$ /index.html

そうは言っても、私はこれまでにディレクトリ/フォールバックメソッドを見たことがないので、angular転送のみが必要な書き換えである場合に検討することに興味があります。ありがとうございます。

0
Adam Marr

これは、スコットファーガソンの優れた答えのわずかなバリエーションと詳細です。 <Location>よりも<Directory>ディレクティブを使用する方が簡単です。 <Directory>ディレクティブは、マシンごとに異なる絶対パス名を取ります。

Angularアプリのindex.htmlは、Webサーバーのドキュメントルートの下のmy-app/index.htmlにあり、http://localhost/my-appを使用してアプリにアクセスするとします。

まず、ベースhrefが「/ my-app /」であることを確認してください。次に、httpd.confファイルに以下を追加します。

<Location "/my-app">
    FallbackResource /my-app/index.html
</Location>

これにより、/my-app/の下のリソースが見つからない場合、Apacheはindex.htmlをロードします。

/my-app/apiのように、同じパスでAPI呼び出しを行う場合は、これらの呼び出しにFallbackResourceルールを適用しないでください。だから追加：

<Location "/my-app/api">
    FallbackResource disabled
</Location>
0
RajV