railway

【Railway】SvelteKitをデプロイする方法

この記事では、Railway に SvelteKitアプリをデプロイする方法方法を紹介します。クイックセットアップ、アダプター構成、ワンクリックデプロイ、その他のデプロイ戦略について解説します。

阿部 隼也

— 3 min read
Share

Railwayはこちら （←このリンクから登録すると20ドル分のクレジットがもらえます）

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 プロジェクトの初期化
    • プロンプトに従ってプロジェクト名を設定します。
    • 作成後、表示されるリンクからブラウザで開きます。
  3. アプリケーションのデプロイ
    • アプリのファイルをスキャン・圧縮して Railway にアップロードします。ターミナルにリアルタイムのデプロイログが表示されます。
    • 完了後、View logs でサービスが正常に稼働していることを確認します。
  4. 公開 URL の設定
    • 新しいサービスの設定タブ → Networking に移動します。
    • Generate Domain をクリックして公開 URL を作成します。

以下でデプロイします。

railway up

SvelteKit アプリのディレクトリで以下を実行します。

railway init

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

Railwayダッシュボード

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

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

Dockerfile を使う

  1. SvelteKit アプリのルートに Dockerfile を作成します。
  2. CLI または GitHub からデプロイします。

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"]

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

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

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

次のステップ

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

Railwayはこちら （←このリンクから登録すると20ドル分のクレジットがもらえます）

Read more

サービス更新履歴

ここでは、LiveQのサービス・製品への変更を全て紹介しております。 このページは大きな変更があった場合に更新されます。 いつごろにどのような機能がリリースされたかが分かります。 2026年6月: 高速化・安定化 * 5月よりサーバーおよびアプリケーションの大型リニューアルに取り組み、6月に読み込み速度の向上や、大規模アクセス時にも安定して高速に動作するように変更をおこないました。 2026年4月: 画像スライド * 新たなスライドの種類として画像スライドを追加しました。 * PowerPoint, PDFファイルを一括インポートし、画像スライドとして追加する機能を追加しました * そのほか多数の細かな変更（操作性などのデザイン改善や、不具合）をおこないました 2026年3月: ワードクラウド、コメントのAIモデレーション（監視） * 新たなスライドの種類としてワードクラウドを追加しました * コメントをAIで自動監視する機能をリリースしました * そのほか細かな改善や不具合の修正をおこないました 2026年2月: 有料プランのデータエクスポート

By 阿部 隼也

チームメンバーを招待する方法

チームメンバーを追加するには、招待する必要があります。 その招待方法を紹介します。 招待可能なチームメンバーの数は、ご利用のプランによって異なるため、事前にご確認ください。 チームページの「新しいチームメンバーを招待」にて、招待するメンバーのメールアドレスを入力し、「招待を送信」をクリックします。 招待された側で招待を承認 次に、招待された側の方によって招待を承認する必要があります。 ※この承認にはLiveQのアカウントが必要となりますので、必ず事前にご登録ください。 下記のような招待メールが届きます。 件名：【LiveQ】チームへの招待が届いています 差出人：[email protected] 既にLiveQに登録済みの方はそのまま「招待を承認して参加する」ボタンをクリックします。 まだLiveQに登録していない方は、登録後、同様に承認ボタンをクリックします。 チームを切り替える 招待を承認すると、チームページに下記のように「チーム切り替え」ができるようになります。 招待したユーザーにもメールが届きます 招待が承認されると、招待したユーザーに

By 阿部 隼也