Railwayはこちら

Angular アプリをデプロイする

Angular は、Google が開発する高速で信頼性の高いフロントエンドフレームワークです。大規模開発にも耐えうるスケーラビリティを備え、Google Fonts や Google Cloud などでも利用されています。

本ガイドでは、Angular アプリを Railway にデプロイする 4 つの方法を紹介します。

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

Angular アプリを作成する

既に手元または GitHub に Angular プロジェクトがある場合は、この章をスキップして次章「Angular アプリを Railway にデプロイする」へ進んでください。

Angular CLI がインストールされていることを確認したうえで、以下のコマンドを実行します。

ng new gratitudeapp

プロンプトでは次のように入力すると手順どおり進められます。

• スタイルシート: CSS
• サーバーサイドレンダリング (SSR) / SSG: Yes
• ルーティング: Yes

ローカルで Angular アプリを起動する

cd gratitudeapp
npm start

ブラウザで http://localhost:4200 を開き、アプリが動作することを確認します。

start スクリプトの修正

Railway は build と start の npm スクリプトを利用してビルドと実行を自動化します。SSR 有効化プロジェクトでは、ビルド後に生成される dist/gratitudeapp/server/server.mjs を実行する必要があるため、package.json を下記のように修正してください。

{
  "scripts": {
    "ng": "ng",
    "dev": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "start": "node dist/gratitudeapp/server/server.mjs"
  }
}

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

Railway では複数のデプロイ方法が用意されています。最も手軽なテンプレート方式から、細かい制御が可能な Dockerfile 方式まで、用途に応じて選択してください。

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

Railway テンプレートマーケットプレイスには、Angular + Caddy 構成のテンプレートが用意されています。「Deploy on Railway」ボタンをクリックするだけで、ビルド設定や実行環境が自動で構築されます。

デプロイ完了後は Eject して自分の GitHub リポジトリにフォークすることを推奨します。

CLI からデプロイ

1. Railway CLI のインストールとログイン

2. プロジェクト初期化

   railway init

3. デプロイ

   railway up

4. 公開 URL 生成

   railway domain

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

1. Railway ダッシュボードで New Project → Deploy from GitHub repo を選択
2. 対象リポジトリを指定して Deploy
3. デプロイ完了後、Settings → Networking で Generate Domain をクリック

Dockerfile を使う

以下は最小構成の例です。ビルドステージと実行ステージを分けて、Caddy で静的ファイルを配信します。

# Build Stage
FROM node:lts-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Run Stage
FROM caddy:latest
WORKDIR /app
COPY --from=build /app/dist ./dist
COPY Caddyfile ./Caddyfile
CMD ["caddy", "run", "--config", "Caddyfile", "--adapter", "caddyfile"]

次のステップ

• データベースサービスを追加 – Postgres などのマネージド DB をワンクリックで追加可能です。
• モニタリング – ビルド / デプロイログやリソース使用量をダッシュボードで確認できます。

Angular アプリのデプロイは以上です。快適な Railway ライフをお楽しみください！

Railwayはこちら