メインコンテンツにスキップ

Netlify

Netlifyにデプロイするには、adapter-netlifyを使用してください。

このアダプターは、adapter-autoを使用するとデフォルトでインストールされますが、プロジェクトに追加することでNetlify固有のオプションを指定できます。

使い方

npm i -D @sveltejs/adapter-netlifyでインストールし、svelte.config.jsにアダプターを追加します。

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 }) } };

次に、プロジェクトルートにnetlify.tomlファイルがあることを確認します。これは、このサンプル構成に従って、build.publish設定に基づいて静的アセットを書き込む場所を決定します。

[build]
	command = "npm run build"
	publish = "build"

netlify.tomlファイルまたはbuild.publishの値がない場合は、デフォルト値の"build"が使用されます。Netlify UIで公開ディレクトリを別の場所に設定している場合は、netlify.tomlにも設定するか、デフォルト値の"build"を使用する必要があることに注意してください。

Nodeバージョン

新しいプロジェクトでは、デフォルトで現在のNode LTSバージョンが使用されます。ただし、以前に作成したプロジェクトをアップグレードする場合は、古いバージョンのままになっている可能性があります。現在のNodeバージョンを手動で指定する方法の詳細については、Netlifyドキュメントを参照してください。

Netlify Edge Functions

SvelteKitはNetlify Edge Functionsをサポートしています。オプションedge: trueadapter関数に渡すと、サーバーサイドレンダリングはサイト訪問者に近い場所にデプロイされるDenoベースのエッジ関数で行われます。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の代替機能

SvelteKitが直接提供する機能を使用してアプリを構築でき、Netlifyの機能に依存する必要はありません。これらの機能のSvelteKitバージョンを使用すると、開発モードで使用したり、統合テストでテストしたり、Netlifyから離れて別のアダプターに切り替える場合に他のアダプターと連携したりできます。ただし、シナリオによっては、これらの機能のNetlifyバージョンを使用することが有益な場合があります。1つの例としては、すでにNetlifyでホストされているアプリをSvelteKitに移行する場合が挙げられます。

リダイレクトルール

コンパイル中に、リダイレクトルールが自動的に_redirectsファイルに追加されます。(まだ存在しない場合は作成されます。)つまり

  • netlify.toml[[redirects]]は、_redirectsの方が優先度が高いため、一致することはありません。したがって、ルールは常に_redirectsファイルに記述してください。
  • _redirectsには、/* /foobar/:splatのようなカスタムの「すべてキャッチ」ルールを含めるべきではありません。そうしないと、自動的に追加されたルールは、Netlifyが最初に一致するルールのみを処理するため、適用されることはありません。

Netlifyフォーム

  1. Netlify HTMLフォームをこちらの説明に従って、たとえば/routes/contact/+page.svelteとして作成します。(非表示のform-name入力要素を追加することを忘れないでください!)
  2. Netlifyのビルドボットは、デプロイ時にHTMLファイルを解析します。つまり、フォームはHTMLとしてプリレンダリングされる必要があります。contact.svelteexport const prerender = trueを追加してそのページのみをプリレンダリングするか、kit.prerender.force: trueオプションを設定してすべてのページをプリレンダリングすることができます。
  3. Netlifyフォームに<form netlify ... action="/success">のようなカスタム成功メッセージがある場合は、対応する/routes/success/+page.svelteが存在し、プリレンダリングされていることを確認してください。

Netlify Functions

このアダプターでは、SvelteKitエンドポイントはNetlify Functionsとしてホストされます。Netlify関数ハンドラーには、Netlify Identity情報を含む追加のコンテキストがあります。このコンテキストには、フック内のevent.platform.contextフィールドと、+page.serverまたは+layout.serverエンドポイントからアクセスできます。これらは、アダプター構成のedgeプロパティがfalseの場合はサーバーレス関数であり、trueの場合はエッジ関数です。

+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関数用のディレクトリを作成し、netlify.tomlファイルに構成を追加することで、独自のNetlify関数を追加できます。たとえば

[build]
	command = "npm run build"
	publish = "build"

[functions]
	directory = "functions"

トラブルシューティング

ファイルシステムへのアクセス

エッジデプロイではfsを使用できません。

サーバーレスデプロイでは使用できますが、ファイルがプロジェクトからデプロイメントにコピーされないため、期待どおりには機能しません。代わりに、$app/serverread関数を使用してファイルにアクセスしてください。readはエッジデプロイ内では機能しません(これは将来変更される可能性があります)。

または、該当するルートをプリレンダリングすることもできます。

このページをGitHubで編集