Netlifyでサブディレクトリで多言語化サイトを運用する際の設定

多言語サイトの方式

サイトの多言語化は色々な方式がありますが、今回はApple.comなどで採用されている言語ごとのサブディレクトリ方式をNetlifyで実現させます。

多言語化のURL・ドメインのパターンについては、下記のページが詳しいです。

多言語サイトのドメイン・URLパターン完全版：それぞれのメリット・デメリット・事例まとめ

URL構造

URL構造は、

• example.com (本国サイト=日本語)
• example.com/en/ (英語サイト)

こういう形です。

本家サイトの場合は、ドメイン直下、他言語の場合は言語ごとのディレクトリを掘ってその中で、ドメイン直下と同じURL構造で展開します。

ファイル構造

一方でサイトのファイル構造は、

├── css
│   └── main.css
├── js
│   └── main.js
├── en
│   ├── index.html
│   └── about
│       └── index.html
├── img
│   ├── icons
│   └── title.png
├── ja
│   ├── index.html
│   └── about
│       └── index.html
├── manifest.json
└── robots.txt

こんな感じです。

各言語ごとのファイルは「/ja/」「/en/」の直下に展開して、サイト全体で使うファイル（cssやjsや画像）はディレクトリルートにおいて、共通で使います。

設定 (Netlify.toml)

Netlifyのリダイレクト・リライトの書き方のルールについては、下記の記事にまとめてありますので、そちらをご参照ください。

NetlifyのRedirect、Reweiteルールの書き方・処理方法まとめ

静的サイトのデプロイ・ホスティングを無料で使えるNetlifyで、Redirect、Reweiteルールの書き方や処理方法をまとめました。

では、実際のNetlify.tomlの中身です。

言語ごとのリライト

まずは、言語ごとの設定を書いていきます。それぞれのディレクトリ以下のファイルを読んで欲しいので、200でリライトします。

[[redirects]]
  from = "/en/*"
  to = "/en/:splat"
  status = 200
  force = true

[[redirects]]
  from = "/*"
  to = "/ja/:splat"
  status = 200
  force = true

これで、exmaple.comに来た場合は、/ja/以下のディレクトリを、exmaple.com/en/に来た場合は、/en/以下のディレクトリを参照してくれます。

/en/ディレクトリは書かないでも良いように思えますが、jaディレクトリ用の設定でja以下にリライトされてしまっているので、/en/も書かないと「example.com/en/」にアクセスされた時に、「/ja/en/」を探しに行ってしまいます。

共通ファイルのリライト

続いて共通ファイルのリライトです。

css、js、画像ファイルなどは、共通のものを読んだ方がいいので下記のようにします。

[[redirects]]
  from = "/img/*"
  to = "/img/:splat"
  status = 200
  force = true
[[redirects]]
  from = "/css/*"
  to = "/css/:splat"
  status = 200
  force = true
[[redirects]]
  from = "/js/*"
  to = "/js/:splat"
  status = 200
  force = true
[[redirects]]
  from = "/manifest.json"
  to = "/manifest.json"
  status = 200
  force = true  
[[redirects]]
  from = "/robots.txt"
  to = "/robots.txt"
  status = 200
  force = true

ここも一見不要に思えますが、「ドメインルート = jaディレクトリ」という設定があるため、どうしても書いておく必要があります。

設定ファイルの全体像を見てみる

以上をまとめたNetlify.tomlの全体像です。

## 静的ファイル
[[redirects]]
  from = "/img/*"
  to = "/img/:splat"
  status = 200
  force = true
[[redirects]]
  from = "/css/*"
  to = "/css/:splat"
  status = 200
  force = true
[[redirects]]
  from = "/js/*"
  to = "/js/:splat"
  status = 200
  force = true
[[redirects]]
  from = "/manifest.json"
  to = "/manifest.json"
  status = 200
  force = true  
[[redirects]]
  from = "/robots.txt"
  to = "/robots.txt"
  status = 200
  force = true

## 言語ごとのリライト
[[redirects]]
  from = "/en/*"
  to = "/en/:splat"
  status = 200
  force = true
[[redirects]]
  from = "/*"
  to = "/ja/:splat"
  status = 200
  force = true

設定のポイントは、記述を書く順番です。

Netlify.tomlは、上から下に順番にURLのマッチパターンを探していくので、

• リライトして欲しくないものを先に
• ルールとして適用範囲が大きいものを最後に

とするのがコツです。

流れをシミュレートしてみる

最後に、それぞれのリライトをシミュレートしてみましょう。

日本語版（example.com）

まず、日本語版のaboutページを表示したとします。

「/ja/about/index.html」を見に行って欲しいのですが、

• exmaple.com/about/はサーバーからみたら「/about/」
• Netlify.tomlの最後の「from = "/*"」にマッチする
• 最後の「from = "/*"」にマッチしたら、「/ja/」以下にリライトされるので、「/ja/about/」を探しに行く

狙い通りにマッチしています。

英語版（example.com/en/）

続いて、英語版のaboutページを表示したとします。

「/en/about/index.html」を見に行くのが正しいですが、

• exmaple.com/about/はサーバーからみたら「/en/about/」
• Netlify.tomlの「from = "/en/*"」にマッチする
• 「/en/」以下にリライトされるので、「/en/about/」を探しに行く

問題ないですね。

共通ファイル

共通ファイルはそのままです。

• exmaple.com/css/main.cssはサーバーからみたら「/css/main.css」
• Netlify.tomlの「from = "/css/*"」にマッチする
• 「/css/」以下にリライトされるので、「/css/main.css/」を探しに行く

問題ないですね。

注意したいのは、静的ファイルの設定よりも上に「/*」を書いてしまうと、先にそちらにマッチして、「/ja/」以下を探しに行ってしまいます。

Netlifyでサブディレクトリで多言語化サイトを運用する際の設定を見てみました。コツさえ掴めば簡単にできますね。

Github PagesやGitlab pagesなどではリライトができないので使えませんが、Netlifyならリライトを使って多言語サイトも簡単に構築できますね。