スペースマーケットWORKの技術Stack紹介

こんにちは！久しぶりに登山をしたら想像以上に体力が落ちていた事を実感したエンジニアの小林です。

前回エンジニアのほりが書いたスペースマーケットWORKの全体的な技術スタックについて書きたいと思います。

BE

GraphQLを利用しています。以前からスペースマーケットではApollo Federationを使って複数のGraphQLサーバを一つのエンドポイントに集約して利用しています。

下記は一例ですが物理的に別れた検索APIと記事APIをAPI gatewayの後ろに配置しています。

この構成の場合WORKのトップページからGraphQLクエリを投げる時に１つのクエリにまとめて実行することが可能になっています。

POST https://exampleapi.spacemarket.com/graphql

query {
  searchRooms { // 検索APIから取得
    results {
      id
      name
      prices {
        minPrice
      }
    }
  }
  
  workArticles { // 記事APIから取得
    results {
       title
       description
       image
    }
  }
}

FE

新規サービスを使うにあたってNext.jsを導入しました。今まではexpressサーバで自前でSSRを実装していたのですが、他社事例など含めてNext.jsがproductionでも使えるレベルになってきたと判断して導入に踏み切りました。また同時にTypeScriptとReact hooksの導入も行い今後のFEテンプレートとなるプロジェクトとなっていきます。FEの詳しい構成は今後別の記事でご紹介しようと思います。

- TypeScript
- Next.js(Custom serverでExpressは継続利用)
 - React hooks​

インフラ

- Fargate(アプリケーションサーバ)
Node.jsやAPIはDockerで構築しAWSで動かしています。下記はDockerfileの一部抜粋してどのような構成にしているか紹介します。

// プロセスマネージメントのpm2を利用
RUN yarn global add pm2@4.4.0

// 環境変数を設定
ARG SENTRY_DSN
ENV SENTRY_DSN $SENTRY_DSN

// next.jsのビルド
RUN yarn install --no-progress --no-cache && yarn run build

// assetをファイルストレージにアップロード
RUN yarn run gulp && sh -e ./asset_upload.sh

// 起動コマンドはPM2で実行
CMD ["pm2-runtime", "process.yml"]

pm2はcluster modeで動かしています。

apps:
 - script: 'dist/server/index.js'
   name: 'work'
   instances: -1
   exec_mode: 'cluster'
   env:
     NODE_ENV: production

監視

サービスの監視にはDatadogを利用しています。

- APM(パフォーマンス監視)
パフォーマンスの統計情報やリクエスト数、エラー数が見れます。またLogをDatadogに送信することでリクエストとログが紐づくのでFargateなど物理サーバにsshで入れないサービスを運用する時は必須です。

- Synthetic Monitoring(死活監視)
5分毎にアクセスしてサーバが生きているか確認してくれます。その時のリクエストをAPMと紐付けてくれるので原因の分析もしやすく重宝しています。

まとめ

今回はNext.jsをproductioinで利用する時にどういう構成を使っているかのお話をしました。今後Next.jsの採用を考えている方にこちらの記事が少しでも参考になれば幸いです。