SolidJSアプリのデプロイ

Railwayはこちら

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プロジェクトの初期化：
   • Solidアプリディレクトリで以下のコマンドを実行します。

     railway init

   • プロンプトに従ってプロジェクトに名前を付けます。
   • プロジェクトが作成されたら、提供されたリンクをクリックしてブラウザで表示します。
3. アプリケーションのデプロイ：
   • 以下のコマンドを使用してアプリをデプロイします。

     railway up

   • このコマンドは、アプリのファイルをスキャン、圧縮し、Railwayにアップロードします。ターミナルにはリアルタイムのデプロイログが表示されます。
   • デプロイが完了したら、View logs に移動して、サービスが正常に実行されていることを確認します。
4. 公開URLの設定：
   • 新しいサービスの「設定」タブのNetworkingセクションに移動します。
   • 「Generate Domain」をクリックして、アプリの公開URLを作成します。

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. 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アプリを提供します。
3. アプリのルートディレクトリに 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
   }

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

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

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

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

次のステップ

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

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

Railwayはこちら