【Railway】SvelteKitをデプロイする方法
この記事では、Railway に SvelteKitアプリをデプロイする方法方法を紹介します。クイックセットアップ、アダプター構成、ワンクリックデプロイ、その他のデプロイ戦略について解説します。
Railwayはこちら （←このリンクから登録すると20ドル分のクレジットがもらえます）
SvelteKitアプリをデプロイする方法
SvelteKit は、Svelte を使用して堅牢で高性能な Web アプリケーションを迅速に開発するためのフレームワークです。
この記事では、4 つの方法で Railway に SvelteKitアプリをデプロイする手順を説明します。
- テンプレートからのワンクリックデプロイ
- GitHubリポジトリからデプロイ
- CLIでデプロイ
- Dockerfileでデプロイ
それでは、SvelteKit アプリを作成しましょう。
SvelteKit アプリの作成
注: すでにローカルまたは GitHub に SvelteKit アプリがある場合は、この章をスキップして「SvelteKit アプリを Railway にデプロイする」へ進んでください。
新しい SvelteKit アプリを作成するには、Node がインストールされていることを確認してください。
ターミナルで以下を実行し、Vite を使用して新しい SvelteKit アプリを作成します。
npx sv create svelteappプロンプトは次のとおりです。
SvelteKit demoテンプレートを選択します。- TypeScript で型チェックを追加します。
- Prettier、ESLint、Tailwind CSS を追加します。
- Tailwind CSS のプラグインは不要です。Enter キーで次へ進みます。
- 依存関係のインストールにはパッケージマネージャーとして
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アプリをデプロイする方法複数の方法を提供します。
テンプレートからワンクリックデプロイ
最速で始めたい場合は、このオプションが最適です。
下のボタンから開始します。
デプロイ後はテンプレートから Eject して、ご自身の GitHub アカウントにリポジトリをコピーすることを強くおすすめします。
注: コミュニティが作成した各種 Svelte アプリのテンプレートも選べます。
CLI からデプロイ
- Railway CLI のインストール
- CLI をインストールし、Railway アカウントで認証します。
- Railway プロジェクトの初期化
- プロンプトに従ってプロジェクト名を設定します。
- 作成後、表示されるリンクからブラウザで開きます。
- アプリケーションのデプロイ
- アプリのファイルをスキャン・圧縮して Railway にアップロードします。ターミナルにリアルタイムのデプロイログが表示されます。
- 完了後、View logs でサービスが正常に稼働していることを確認します。
- 公開 URL の設定
- 新しいサービスの設定タブ → Networking に移動します。
- Generate Domain をクリックして公開 URL を作成します。
以下でデプロイします。
railway upSvelteKit アプリのディレクトリで以下を実行します。
railway initGitHub リポジトリからデプロイ
SvelteKit アプリを GitHub から直接 Railway にデプロイする手順です。
- Railway で新しいプロジェクトを作成
https://railway.app/dashboardにアクセスし、+ Newから新しいプロジェクトを作成します。
- GitHub からデプロイ
Deploy from GitHub repoを選び、リポジトリを選択します。- Railway アカウントが GitHub に未連携の場合は、連携を求められます。
- アプリのデプロイ
Deployをクリックして開始します。- デプロイ完了後、アプリ用の Railway サービスが作成されます（既定では非公開）。
- デプロイの確認
- 完了したら
View logsでサーバーの稼働を確認します。
- 完了したら
- 公開 URL の設定
Settings→Networkingに移動します。Generate Domainをクリックして公開 URL を作成します。
Dockerfile を使う
- SvelteKit アプリのルートに
Dockerfileを作成します。 - 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ドル分のクレジットがもらえます）
