SvelteKit アプリをデプロイする

Railwayはこちら

SvelteKit アプリをデプロイする

SvelteKit は、Svelte を使用して堅牢で高性能な Web アプリケーションを迅速に開発するためのフレームワークです。

このガイドでは、4 つの方法で Railway に SvelteKit アプリをデプロイする手順を説明します。

1. テンプレートからのワンクリックデプロイ
2. GitHubリポジトリから
3. CLIを使用
4. Dockerfileを使用

それでは、SvelteKit アプリを作成しましょう。

SvelteKit アプリの作成

注: すでにローカルまたは GitHub に SvelteKit アプリがある場合は、この章をスキップして「SvelteKit アプリを Railway にデプロイする」へ進んでください。

新しい SvelteKit アプリを作成するには、Node がインストールされていることを確認してください。

ターミナルで以下を実行し、Vite を使用して新しい SvelteKit アプリを作成します。

npx sv create svelteapp

プロンプトは次のとおりです。

1. SvelteKit demo テンプレートを選択します。
2. TypeScript で型チェックを追加します。
3. Prettier、ESLint、Tailwind CSS を追加します。
4. Tailwind CSS のプラグインは不要です。Enter キーで次へ進みます。
5. 依存関係のインストールにはパッケージマネージャーとして npm を選択します。

svelteapp ディレクトリに新しい SvelteKit アプリが作成されます。

SvelteKit アプリをローカルで実行

ディレクトリに cd し、以下を実行して Vite の開発サーバーを起動します。

npm run dev

ブラウザで http://localhost:5173 を開き、アプリを確認します。/sverdle ルートにアクセスするとデモゲームをプレイできます。

デプロイのための SvelteKit アプリの準備

まず、SvelteKit の Node アダプターを有効にします。

SvelteKit のアダプターは、ビルドされたアプリを入力として受け取り、デプロイ用の成果物を生成するプラグインです。各デプロイプラットフォームでプロジェクトを実行するために使用します。

Node アダプターをアプリに追加します。ターミナルで以下を実行します。

npm i -D @sveltejs/adapter-node

インストール後、アダプターをアプリの svelte.config.js に追加します。

svelte.config.js ファイルは次のようになります。

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// プリプロセッサの詳細については、https://svelte.dev/docs/kit/integrations を参照してください
	preprocess: vitePreprocess(),

	kit: {
		// adapter-autoは一部の環境のみをサポートしています。リストについては https://svelte.dev/docs/kit/adapter-auto を参照してください。
		// お使いの環境がサポートされていない場合、または特定の環境に決定した場合は、アダプターを切り替えてください。
		// アダプターの詳細については、https://svelte.dev/docs/kit/adapters を参照してください。
		adapter: adapter()
	}
};

export default config;

次に、package.json に start スクリプトを追加します。

Svelte はプロジェクトを build ディレクトリにビルドします。サーバーは既定で build/index.js のエントリポイント実行で起動します。

package.json を開き、node build/index.js を start に設定します。

{
	"name": "svelteapp",
	"version": "0.0.1",
	"type": "module",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"start": "node build/index.js",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"format": "prettier --write .",
		"lint": "prettier --check . && eslint ."
	},
	"devDependencies": {
		"@fontsource/fira-mono": "^5.0.0",
		"@neoconfetti/svelte": "^2.0.0",
		"@sveltejs/adapter-auto": "^3.0.0",
		"@sveltejs/adapter-node": "^5.2.9",
		"@sveltejs/kit": "^2.0.0",
		"@sveltejs/vite-plugin-svelte": "^4.0.0",
		"@types/eslint": "^9.6.0",
		"autoprefixer": "^10.4.20",
		"eslint": "^9.7.0",
		"eslint-config-prettier": "^9.1.0",
		"eslint-plugin-svelte": "^2.36.0",
		"globals": "^15.0.0",
		"prettier": "^3.3.2",
		"prettier-plugin-svelte": "^3.2.6",
		"prettier-plugin-tailwindcss": "^0.6.5",
		"svelte": "^5.0.0",
		"svelte-check": "^4.0.0",
		"tailwindcss": "^3.4.9",
		"typescript": "^5.0.0",
		"typescript-eslint": "^8.0.0",
		"vite": "^5.0.3"
	}
}

package.json

これでデプロイの準備は完了です。

SvelteKit アプリを Railway にデプロイする

Railway は、セットアップや好みに応じて、SvelteKit アプリをデプロイする複数の方法を提供します。

テンプレートからワンクリックデプロイ

最速で始めたい場合は、このオプションが最適です。

下のボタンから開始します。

Railwayにデプロイ

デプロイ後はテンプレートから Eject して、ご自身の GitHub アカウントにリポジトリをコピーすることを強くおすすめします。

注: コミュニティが作成した各種 Svelte アプリのテンプレートも選べます。

CLI からデプロイ

1. Railway CLI のインストール
   • CLI をインストールし、Railway アカウントで認証します。
2. Railway プロジェクトの初期化
   • SvelteKit アプリのディレクトリで以下を実行します。

     railway init

   • プロンプトに従ってプロジェクト名を設定します。
   • 作成後、表示されるリンクからブラウザで開きます。
3. アプリケーションのデプロイ
   • 以下でデプロイします。

     railway up

   • アプリのファイルをスキャン・圧縮して Railway にアップロードします。ターミナルにリアルタイムのデプロイログが表示されます。
   • 完了後、View logs でサービスが正常に稼働していることを確認します。
4. 公開 URL の設定
   • 新しいサービスの設定タブ → Networking に移動します。
   • Generate Domain をクリックして公開 URL を作成します。

GitHub リポジトリからデプロイ

SvelteKit アプリを GitHub から直接 Railway にデプロイする手順です。

1. Railway で新しいプロジェクトを作成
   • https://railway.app/dashboard にアクセスし、新しいプロジェクトを作成します。
2. GitHub からデプロイ
   • Deploy from GitHub repo を選び、リポジトリを選択します。
     • Railway アカウントが GitHub に未連携の場合は、連携を求められます。
3. アプリのデプロイ
   • Deploy をクリックして開始します。
   • デプロイ完了後、アプリ用の Railway サービスが作成されます（既定では非公開）。
4. デプロイの確認
   • 完了したら View logs でサーバーの稼働を確認します。
5. 公開 URL の設定
   • 設定タブ → Networking に移動します。
   • Generate Domain をクリックして公開 URL を作成します。

Dockerfile を使う

1. SvelteKit アプリのルートに Dockerfile を作成します。
2. Dockerfile に以下を追加します。

   # Node の alpine 公式イメージを使用
   # https://hub.docker.com/_/node
   FROM node:lts-alpine
   # アプリディレクトリを作成して移動
   WORKDIR /app
   # ファイルをコンテナにコピー
   COPY package*.json ./
   # 依存関係をインストール
   RUN npm ci
   # ローカルコードをコンテナにコピー
   COPY . ./
   # アプリのビルド
   RUN npm run build
   # アプリの提供
   CMD ["npm", "run", "start"]

3. CLI または GitHub からデプロイします。

Railway は Dockerfile を自動検出し、それを使ってアプリをビルド・デプロイします。

注: Railway は、パブリックおよびプライベートの Docker イメージからのデプロイもサポートしています。

このガイドでは、Railway の主なデプロイ方法を紹介しました。セットアップに適したアプローチを選び、SvelteKit アプリをシームレスにデプロイしましょう。

次のステップ

Railway での体験を最大限に活用するために、以下もご参照ください。

• データベースサービスの追加
• アプリの監視

Railwayはこちら