Netlify
Netlifyにデプロイするには、adapter-netlify
を使用してください。
このアダプターは、adapter-auto
を使用するとデフォルトでインストールされますが、プロジェクトに追加することでNetlify固有のオプションを指定できます。
使い方
npm i -D @sveltejs/adapter-netlify
でインストールし、svelte.config.js
にアダプターを追加します。
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
})
}
};
次に、プロジェクトルートに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: true
をadapter
関数に渡すと、サーバーサイドレンダリングはサイト訪問者に近い場所にデプロイされるDenoベースのエッジ関数で行われます。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の代替機能
SvelteKitが直接提供する機能を使用してアプリを構築でき、Netlifyの機能に依存する必要はありません。これらの機能のSvelteKitバージョンを使用すると、開発モードで使用したり、統合テストでテストしたり、Netlifyから離れて別のアダプターに切り替える場合に他のアダプターと連携したりできます。ただし、シナリオによっては、これらの機能のNetlifyバージョンを使用することが有益な場合があります。1つの例としては、すでにNetlifyでホストされているアプリをSvelteKitに移行する場合が挙げられます。
リダイレクトルール
コンパイル中に、リダイレクトルールが自動的に_redirects
ファイルに追加されます。(まだ存在しない場合は作成されます。)つまり
netlify.toml
の[[redirects]]
は、_redirects
の方が優先度が高いため、一致することはありません。したがって、ルールは常に_redirects
ファイルに記述してください。_redirects
には、/* /foobar/:splat
のようなカスタムの「すべてキャッチ」ルールを含めるべきではありません。そうしないと、自動的に追加されたルールは、Netlifyが最初に一致するルールのみを処理するため、適用されることはありません。
Netlifyフォーム
- Netlify HTMLフォームをこちらの説明に従って、たとえば
/routes/contact/+page.svelte
として作成します。(非表示のform-name
入力要素を追加することを忘れないでください!) - Netlifyのビルドボットは、デプロイ時にHTMLファイルを解析します。つまり、フォームはHTMLとしてプリレンダリングされる必要があります。
contact.svelte
にexport const prerender = true
を追加してそのページのみをプリレンダリングするか、kit.prerender.force: true
オプションを設定してすべてのページをプリレンダリングすることができます。 - 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
の場合はエッジ関数です。
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関数用のディレクトリを作成し、netlify.toml
ファイルに構成を追加することで、独自のNetlify関数を追加できます。たとえば
[build]
command = "npm run build"
publish = "build"
[functions]
directory = "functions"
トラブルシューティング
ファイルシステムへのアクセス
エッジデプロイではfs
を使用できません。
サーバーレスデプロイでは使用できますが、ファイルがプロジェクトからデプロイメントにコピーされないため、期待どおりには機能しません。代わりに、$app/server
のread
関数を使用してファイルにアクセスしてください。read
はエッジデプロイ内では機能しません(これは将来変更される可能性があります)。
または、該当するルートをプリレンダリングすることもできます。