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

 

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

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

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

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

他のサービスでもおおむね同じような設定になるのではないかと思います。


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

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

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


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

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


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


リダイレクトを設定する

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

次のように記述します。

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

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

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

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

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


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

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


CSS や画像が見つからない

サイトだけリダイレクトしても、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 が存在しているので、

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


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

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

では👋