Skip to main content

Netlify

Netlify にデプロイする場合は、adapter-netlify を使用します。

adapter-auto を使用している場合、この adapter は自動でインストールされますが、この adapter 自体をプロジェクトに追加すれば Netlify 固有のオプションを指定できるようになります。

使い方

npm i -D @sveltejs/adapter-netlify を実行してインストールし、svelte.config.js にこの adapter を追加します:

svelte.config
import import adapteradapter from '@sveltejs/adapter-netlify';

export default {
	
kit: {
    adapter: any;
}
kit
: {
// default options are shown adapter: anyadapter: import adapteradapter({ // if true, will create a Netlify Edge Function rather // than using standard Node-based functions edge: booleanedge: 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: booleansplit: 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 にデプロイされます。

svelte.config
import import adapteradapter from '@sveltejs/adapter-netlify';

export default {
	
kit: {
    adapter: any;
}
kit
: {
adapter: anyadapter: import adapteradapter({ // will create a Netlify Edge Function using Deno-based // rather than using standard Node-based functions edge: booleanedge: 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

  1. こちらにあるように、例えば /routes/contact/+page.svelte に、Netlify HTML form を作成します。(hidden の form-name input 要素を追加するのを忘れずに!)
  2. Netlify の build bot はデプロイ時にあなたの HTML ファイルをパースします。つまり、あなたの form は HTML としてプリレンダリングされるようにしておかないといけません。あなたの contact.svelteexport const prerender = true を追加してそのページだけプリレンダリングするか、または kit.prerender.force: true オプションを設定して全てのページをプリレンダリングするようにしておくか、で対応できます。
  3. あなたの 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 functionstrue の場合は edge functions となります。

+page.server
export const const load: (event: any) => Promise<void>load = async (event) => {
	const const context: anycontext = event: anyevent.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
@seesource
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.

@sincev0.1.100
log
(const context: anycontext); // 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/serverread 関数を使用してファイルにアクセスしてください。edge デプロイメントでは read は動作しません(将来的に変更される可能性があります)。

その代わりに、fs を使用する必要があるルート(route)についてはプリレンダリングする必要があります。

Edit this page on GitHub