Netlifyで静的サイトをホスティングする(3) 細かい設定など

Sponsored Link

Netlifyを使う最低限の設定もおおよそ終わりましたが、もう少しだけ細かい設定を行っていきます。

netlifyのサブドメインを独自ドメインへリダイレクトする

何もしなければ独自ドメインを使用する場合もhttps://example.netlify.comでアクセスすることはできますが、同じコンテンツに複数のURLが存在することは好ましくないと思いますし、hugoのthemeで絶対URLが記載されていた場合はそもそもサイトが正常に機能しない可能性があります。あとはサイト内に独自ドメインが表記されていた場合にブラウザのURLと異なりユーザが混乱する、等の不都合が発生します。

ということで、https://example.netlify.comを独自ドメインにリダイレクトするよう手当てします。 Netlifyでは_redirectsというファイルを公開するコンテンツのrootに配置した場合、その内容に従ってリダイレクトさせることが可能です。

このファイルでできることの詳細はドキュメントを参照していただければと思いますが、単純にNetlifyのサブドメインを独自ドメインにリダイレクトさせる場合、下記のような表記をすることとなります。

# 転送元のURL 転送先のURL ステータスコード
https://example.netlify.com/* https://www.example.com/:splat 301!

上記例では、https://example.netlify.com/ を含むすべてのURLへのアクセスをhttps://www.example.com/へステータスコード301でリダイレクトします。:splatは*の内容が置き換えられるため、サブディレクトリ以下もすべてリダイレクトされることとなります。

_redirectsの配置場所は公開ディレクトリのrootに配置すると書きましたが、サイトをzipでアップロードする場合は自分でzipに_redirectsを含めればよいのですが、hugo等の静的コンテンツジェネレータを使用してNetlifyで自動ビルドする場合はそうはいかず、何らかの手段で公開ディレクトリに配置する必要があります。ビルド時にファイルをコピーしてもよいのですがスマートではない気がしたので、私の場合はこのファイルもhugoに生成させることにしました。

基本的にはレイアウトを作成し、そのレイアウトにデータを差し込むことでファイルを作ります。html等と同じ流れですが、独自のファイルタイプを定義する必要があります。

config.tomlには下記のように記載しました。まず、拡張子の無いファイル向けのmimetypeをtext/noneと定義しています。

次に、_redirects用のフォーマットとして上記mimetypeを用いて_redirectsというファイル名でファイルを生成するよう定義しました。また、ドメインを変更する機会はないと思いますがテンプレートなので_redirectsに転送元URLをハードコードするのはなんだかなぁ、と思ったので転送元URLをparams.netlifyとしてパラメタ化しています。

# custom mimetype
[mediaTypes."text/none"]
  suffix = ""
  delimiter = ""

# format for _redirects
[outputFormats.REDIRECTS]
  mediatype = "text/none"
  baseName = "_redirects"
  isPlainText = true
  notAlternative = true

[params.netlify]
  originURL = "https://example.netlify.com"
Sponsored Link

次にテンプレートとしてlayouts/index.redirectsを下記のように作成しました。hugoを使用する場合.Site.BaseURLはconfig.tomlで定義されているはずです。

{{ .Site.Params.Netlify.OriginURL }}/* {{ .Site.BaseURL }}/:splat 301

また、layouts/index.redirectsからpublic/_redirectsを生成するために、config.tomlに下記のように記述します。 これは、インデックスページをどのフォーマットのものを出力するかを指定しており、outputformatsがREDIRECTSのものを出力するように指定しています。

[outputs]
  home = ["HTML", "REDIRECTS"]

これでhugoでのビルド時に_redirectsも一緒にpublic/へ生成されることとなります。

Netlifyでビルドに使用するhugoのバージョンを固定する

使用するhugoの機能やthemeによっては、Netlifyがデフォルトで使用するhugoのバージョンではビルドが失敗する可能性があります。ローカルでビルドする場合と合わせてNetlifyでビルドする際のhugoのバージョンも固定させた方が何かと苦労がありません。

NetlifyではHUGO_VERSIONという環境変数を用いることでhugoのバージョンを指定することが可能です。ブラウザから環境変数を設定することも可能ですが、設定ファイルで指定することも可能です。ブラウザからの設定では管理が煩雑になることと、このあたりもgitに含めた方が後々履歴を追えて便利なので設定ファイルを作成した方が良いと思います。

公式ブログに従い、netlify.tomlというファイルに下記のように記述し、gitリポジトリのルートディレクトリに配置するだけです。簡単ですね。

[context.production.environment]
  HUGO_VERSION = "v0.27.1"

ちなみにnetlify.tomlではビルドコマンドや公開するディレクトリのpathも設定できます。詳細はContinuous Deploymentに色々と書いてあります。

まとめ

色々やってきましたがNetlifyでサイトを運用する準備が整いました。しばらくはこの内容で運用していこうと思います。

Sponsored Link
Previous Article
Next Article