【Netlify】サブディレクトリにページをデプロイする方法

例えばexample.comという URL を持っていたとして、

example.com/subdirというサブディレクトリの URL にデプロイしたいときに

どうすればいいのかというお話です。

Netlify での場合を説明しています。

サイトを２つデプロイする

ここでは例としてexample.com/subdirという URL にデプロイをしていくことを考えます。

まずはexample.comのサイトとexample.com/subdirにする予定のサイトのデプロイを完了させます。

この時点ではexample.com/subdirにする予定のサイトの URL は別のもの、

例えばmarvellous-sheep.netlify.appのようになっていると思います。

これは変更してもいいですし、そのままにしておいても構いません。

リダイレクトを設定する

次に、example.comのサイトのルートディレクトリにnetlify.tomlを作成し、

次のように記述します。

netlify.toml
1
[[redirects]]
2
    from = "/static/*"
3
    to = "https://marvellous-sheep.netlify.com/static/:splat"
4
    status = 200
5
    force = true
6

7
[[redirects]]
8
    from = "/subdir"
9
    to = "https://marvellous-sheep.netlify.com"
10
    status = 200
11
    force = true

200 リダイレクトによって、

アドレスバーの URL の表示を変更させることなく目的のサイトに飛ばすことができ、

見た目上はサブディレクトリにそのサイトが配置される形になります。

Netlify では 200 リダイレクトを rewrite としてくれるのですが、

他のサービスだと rewrite を設定する必要がありそうです。

7-11 行目は、example.com/subdirにアクセスがあると、

https://marvellous-sheep.netlify.comに 200 リダイレクトするという意味になります。

サイトだけリダイレクトしても、CSS や画像のパスがおかしくなって表示されないので、

1-5 行目でexample.com/subdir/static以下にあるすべてのファイルを

https://marvellous-sheep.netlify.com/static以下に移しています。

:splatというのは*（ワイルドカード）の部分を展開しているので、

例えばexample.com/subdir/static/app.cssは

https://marvellous-sheep.netlify.com/static/app.cssに、

example.com/subdir/static/images/image1.pngは

https://marvellous-sheep.netlify.com/static/images/image1.pngに移ります。

これでリソースの読み込みも正常に行われます。

ユースケース

例えば、example.com/works/reactには React 製のサイトを、

example.com/works/gatsbyには Gatsby 製のサイトを、

example.com/works/hugoには Hugo 製のサイトを置く、

というようなことができるようになります。

とはいえ、そう見えているだけであって、実際には他の URL が存在しているので、

管理はサイトごとに行うことになります。

ドメインを追加購入しているわけでもないので、無料でできます。

お役に立てれば幸いです。

では