Netlify
Netlify にデプロイする場合は、adapter-netlify
を使用します。
adapter-auto
を使用している場合、この adapter は自動でインストールされますが、この adapter 自体をプロジェクトに追加すれば Netlify 固有のオプションを指定できるようになります。
使い方
npm i -D @sveltejs/adapter-netlify
を実行してインストールし、svelte.config.js
にこの adapter を追加します:
import import adapter
adapter from '@sveltejs/adapter-netlify';
export default {
kit: {
adapter: any;
}
kit: {
// default options are shown
adapter: any
adapter: import adapter
adapter({
// if true, will create a Netlify Edge Function rather
// than using standard Node-based functions
edge: boolean
edge: false,
// if true, will split your app into multiple functions
// instead of creating a single one for the entire app.
// if `edge` is true, this option cannot be used
split: boolean
split: false
})
}
};
そして、プロジェクトの root に netlify.toml ファイルを置くのを忘れないでください。このファイルの build.publish
に基づいて静的なアセットをどこに書き込むか決定します。こちらのサンプルの設定をご覧ください:
[build]
command = "npm run build"
publish = "build"
netlify.toml
ファイルが見つからない、もしくは build.publish
の値が見つからない場合、"build"
のデフォルト値が使用されます。Netlify の UI で publish ディレクトリを他の場所に設定する場合は、netlify.toml
にも同じ場所を設定するか、"build"
のデフォルト値を使用する必要があることにご注意ください。
Node version
新しいプロジェクトではデフォルトで現時点の Node LTS バージョンが使用されます。しかし、少し前に作成したプロジェクトをアップグレードする場合、古いバージョンで止まってしまうかもしれません。手動で現時点の Node バージョンを指定する場合、詳細は Netlify のドキュメントをご参照ください。
Netlify Edge Functions
SvelteKit は Netlify Edge Functions をサポートしています。adapter
関数に edge: true
オプションを渡すと、サイト訪問者に近い場所にデプロイされる Deno ベースの edge function でサーバーサイドレンダリングが行われるようになります。false
を設定した場合 (デフォルト)、サイトは Node ベースの Netlify Functions にデプロイされます。
import import adapter
adapter from '@sveltejs/adapter-netlify';
export default {
kit: {
adapter: any;
}
kit: {
adapter: any
adapter: import adapter
adapter({
// will create a Netlify Edge Function using Deno-based
// rather than using standard Node-based functions
edge: boolean
edge: true
})
}
};
SvelteKit の機能を代替する Netlify の機能
Netlify の機能に依存することなく、SvelteKit が直接提供する機能を使ってアプリを構築することができます。こういった機能は SvelteKit のほうを選択すると、開発モードでその機能を使用でき、インテグレーションテストが可能になり、Netlify から切り替えることになった場合に他の adapter で動作させることができます。しかし、シナリオによっては Netlify のほうの機能を使用したほうが有益な場合もあります。例えば、すでに Netlify でホストされているアプリを SvelteKit に移行する場合です。
リダイレクトルール(Redirect rules)
コンパイル時に、リダイレクトルールは自動で _redirects
ファイルに追記されます (もし存在しない場合は、作成されます)。つまり:
_redirects
のほうが優先度が高いため、netlify.toml
にある[[redirects]]
には決してマッチしません。そのため、ルールは常に_redirects
ファイルに記載してください。_redirects
には、/* /foobar/:splat
のようなカスタムの “catch all” ルールを置くべきではありません。そうしないと、自動で追加されたルールが適用されなくなります。Netlify は最初にマッチしたルールだけを処理するからです。
Netlify Forms
- こちらにあるように、例えば
/routes/contact/+page.svelte
に、Netlify HTML form を作成します。(hidden のform-name
input 要素を追加するのを忘れずに!) - Netlify の build bot はデプロイ時にあなたの HTML ファイルをパースします。つまり、あなたの form は HTML としてプリレンダリングされるようにしておかないといけません。あなたの
contact.svelte
にexport const prerender = true
を追加してそのページだけプリレンダリングするか、またはkit.prerender.force: true
オプションを設定して全てのページをプリレンダリングするようにしておくか、で対応できます。 - あなたの Netlify form に
<form netlify ... action="/success">
のようなカスタムの成功メッセージがある場合、それに対応する/routes/success/+page.svelte
が存在しプリレンダリングされるか確認してください。
Netlify Functions
この adapter によって、SvelteKit エンドポイントは Netlify Functions としてホストされます。Netlify function ハンドラには追加のコンテキストがあり、Netlify Identity 情報が含まれています。このコンテキストは、あなたの hooks や +page.server
と +layout.server
エンドポイント の中で event.platform.context
フィールドを介してアクセスできます。adapter config の edge
プロパティが false
の場合はserverless functions、true
の場合は edge functions となります。
export const const load: (event: any) => Promise<void>
load = async (event) => {
const const context: any
context = event: any
event.platform.context;
var console: Console
The console
module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:
- A
Console
class with methods such as console.log()
, console.error()
and console.warn()
that can be used to write to any Node.js stream.
- A global
console
instance configured to write to process.stdout
and
process.stderr
. The global console
can be used without calling require('console')
.
Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O
for
more information.
Example using the global console
:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console
class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout
with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()
).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format()
for more information.
log(const context: any
context); // shows up in your functions log in the Netlify app
};
さらに、ディレクトリを追加して netlify.toml
に設定を追加することで、独自の Netlify functions を追加することができます。例えば:
[build]
command = "npm run build"
publish = "build"
[functions]
directory = "functions"
トラブルシューティング
ファイルシステムにアクセスする
edge デプロイメントでは fs
を使用することはできません。
serverless デプロイメントでは fs
を使用できますが、ファイルがプロジェクトからデプロイメントにコピーされないため、期待通りには動作しないでしょう。代わりに $app/server
の read
関数を使用してファイルにアクセスしてください。edge デプロイメントでは read
は動作しません(将来的に変更される可能性があります)。
その代わりに、fs
を使用する必要があるルート(route)についてはプリレンダリングする必要があります。