【Railway】SolidJSアプリのデプロイ

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

SolidJSアプリのデプロイ

SolidJSは、Webアプリケーション向けの応答性が高く、高性能なユーザーインターフェイスを構築するための最新のJavaScriptライブラリです。

きめ細かなリアクティビティを使用しているため、アプリが実際に依存しているデータが変更された場合にのみ更新されます。これにより、不要な作業が最小限に抑えられ、読み込み時間が短縮され、シームレスなユーザーエクスペリエンスが実現します。

この記事では、4つの方法でRailwayにSolidアプリをデプロイする方法について説明します。

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

それでは、Solidアプリを作成しましょう！

Solidアプリの作成

注： SolidアプリがローカルまたはGitHubに既にある場合は、この手順をスキップして「SolidアプリをRailwayにデプロイする」に直接進むことができます。

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

ターミナルで次のコマンドを実行して、テンプレートから新しいSolidアプリを作成します。

npx degit solidjs/templates/js solidjsapp

solidjsapp ディレクトリに新しいSolidアプリがプロビジョニングされます。

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

次に、ディレクトリに cd して依存関係をインストールします。

npm install

次のコマンドを実行して、Vite開発サーバーを起動します。

npm run dev

ブラウザを開き、http://localhost:3000 にアクセスしてアプリを表示します。

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

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

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

最速で始めたい場合は、ワンクリックデプロイオプションが最適です。

下のボタンをクリックして開始します。

Railwayにデプロイ

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

CLIからデプロイ

1. Railway CLIのインストール：
   • CLIをインストールし、Railwayアカウントで認証します。
2. Railwayプロジェクトの初期化：
   • プロンプトに従ってプロジェクトに名前を付けます。
   • プロジェクトが作成されたら、提供されたリンクをクリックしてブラウザで表示します。
3. アプリケーションのデプロイ：
   • このコマンドは、アプリのファイルをスキャン、圧縮し、Railwayにアップロードします。ターミナルにはリアルタイムのデプロイログが表示されます。
   • デプロイが完了したら、View logs に移動して、サービスが正常に実行されていることを確認します。
4. 公開URLの設定：
   • 新しいサービスの「設定」タブのNetworkingセクションに移動します。
   • 「Generate Domain」をクリックして、アプリの公開URLを作成します。

以下のコマンドを使用してアプリをデプロイします。

railway up

Solidアプリディレクトリで以下のコマンドを実行します。

railway init

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

SolidアプリをGitHubから直接Railwayにデプロイするには、以下の手順に従ってください。

1. Railwayで新しいプロジェクトを作成：
   • Railwayにアクセスして、新しいプロジェクトを作成します。
2. GitHubからデプロイ：
   • Deploy from GitHub repo を選択し、リポジトリを選択します。
     • RailwayアカウントがまだGitHubにリンクされていない場合は、リンクするように求められます。
3. アプリのデプロイ：
   • Deploy をクリックして、デプロイプロセスを開始します。
   • デプロイされると、アプリ用にRailwayサービスが作成されますが、デフォルトでは公開されません。
4. デプロイの確認：
   • デプロイが完了したら、View logs に移動して、サーバーが正常に実行されていることを確認します。
5. 公開URLの設定：
   • 新しいサービスの「設定」タブのNetworkingセクションに移動します。
   • 「Generate Domain」をクリックして、アプリの公開URLを作成します。

Dockerfileの使用

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

アプリのルートディレクトリに Caddyfile を追加します。

{
    # グローバルオプション
    admin off # Railwayの環境では管理APIは不要
    persist_config off # ストレージはとにかく永続的ではない
    auto_https off # Railwayがhttpsを処理してくれるので、有効にすると問題が発生する可能性がある
    # ランタイムログ
    log {
        format json # ランタイムログ形式をjsonモードに設定
    }
    # サーバーオプション
    servers {
        trusted_proxies static private_ranges 100.0.0.0/8 # Railwayのプロキシを信頼
    }
}
# サイトブロック、$PORT環境変数でリッスン、Railwayによって自動的に割り当てられる
:{$PORT:3000} {
    # アクセスログ
    log {
        format json # アクセスログ形式をjsonモードに設定
    }
    # Railwayのヘルスチェック
    rewrite /health /*
    # 「dist」フォルダから提供（Viteは「dist」フォルダにビルドする）
    root * dist
    # gzipping応答を有効にする
    encode gzip
    # 「dist」からファイルを提供
    file_server
    # パスが存在しない場合は、クライアント側のルーティングのために「index.html」にリダイレクトする
    try_files {path} /index.html
}

Dockerfile に以下の内容を追加します。

# Node alpine公式イメージを使用
# https://hub.docker.com/_/node
FROM node:lts-alpine AS build
# 設定
ENV NPM_CONFIG_UPDATE_NOTIFIER=false
ENV NPM_CONFIG_FUND=false
# アプリディレクトリを作成して変更
WORKDIR /app
# ファイルをコンテナイメージにコピー
COPY package*.json ./
# パッケージのインストール
RUN npm ci
# ローカルコードをコンテナイメージにコピー
COPY . ./
# アプリのビルド
RUN npm run build
# Caddyイメージを使用
FROM caddy
# アプリディレクトリを作成して変更
WORKDIR /app
# Caddyfileをコンテナイメージにコピー
COPY Caddyfile ./
# ローカルコードをコンテナイメージにコピー
RUN caddy fmt Caddyfile --overwrite
# ファイルをコンテナイメージにコピー
COPY --from=build /app/dist ./dist
# Caddyを使用してアプリを実行/提供
CMD ["caddy", "run", "--config", "Caddyfile", "--adapter", "caddyfile"]

Dockerfile はCaddyを使用してSolidアプリを提供します。

Railwayは Dockerfile を自動的に検出し、それを使用してアプリをビルドおよびデプロイします。

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

この記事では、Railwayの主なデプロイオプションについて説明しました。セットアップに適したアプローチを選択し、Solidアプリをシームレスにデプロイし始めてください！

次のステップ

Railwayでのエクスペリエンスを最大限に活用するために、これらのリソースを調べてください。

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

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