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

Angularアプリをデプロイする方法

Angular は Google が開発するフロントエンドフレームワークです。大規模開発でも使われており、堅牢で拡張しやすい点が特長です。

どの方法が合うか選びやすいよう、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、というように用途で選べます。

GitHubリポジトリからの自動デプロイも非常にラクでおすすめです。

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

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

デプロイ後は Eject して自分の GitHub リポジトリにフォークしておくと管理しやすいです。

CLI からデプロイ

公開 URL 生成

railway domain

デプロイ

railway up

プロジェクト初期化

railway init

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

npm i -g @railway/cli
railway login

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はこちら （←このリンクから登録すると20ドル分のクレジットがもらえます）