Netlifyでサーバーサイドレンダリング(SSR)をする方法
やりたいこと
NetlifyにデプロイしたアプリケーションをサーバーサイドでHTMLを生成して返したい。 やりかた
以下の記事に書かれている通りにするとできる。
リポジトリ
ひと目で分かるようにリポジトリにしたものが以下。
このページの執筆時のrevisionは以下。
ポイント
ポイントは以下の_redirectファイルで/*のアクスセスを/.netlify/functions/renderにstatus 200で上書きすること。
code:public/_redirects
/* /.netlify/functions/render 200
200の場合は実際ににHTTPレベルでリダイレクトされるわけではなく、Netlify的なパスの変換的な感じだと解釈する方が良いと思う。 サーバーサイドレンダリング(SSR)
サーバーサイドでのHTMLの生成は上記の参考にした記事通り以下を利用している。
asyncな関数なのでPromiseで非同期に処理してHTMLを生成することが出来る。
code:functions/render/index.js
exports.handler = async () => {
return {
statusCode: 200,
headers: {
'content-type': 'text/html; charset=utf-8',
},
body: `
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Hello World :)</h1>
<p>${new Date().toISOString()}</p>
</body>
</html>
`,
};
};
開発用デプロイ
Netlify CLIを導入していれば、以下で確認できる。ファイルの変更があると自動でデプロイされる。Sブラウザは自分でリロードする。 code:bash
netlify dev -d public -f functions
GitHub Actionsを使ってデプロイ
上記のCLIに対応して、publish-dir: './public'とfunctions-dir: './functions'を指定するとデプロイできる。
code:.github/workflows/netlify.yml
...
- name: Deploy to Netlify
uses: nwtgck/actions-netlify@v1.2
with:
publish-dir: './public'
functions-dir: './functions'
production-branch: master
github-token: ${{ secrets.GITHUB_TOKEN }}
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
timeout-minutes: 1
全文:
以下がデプロイされたもの: