7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Webアプリ構築カレンダーAdvent Calendar 2023

Day 1

【Day 1】ディレクトリ構成を考える

Last updated at Posted at 2023-11-30

はじめに

スライド2.PNG


2023年アドベントカレンダー1日目です。

初日である今回は、開発を進める前にディレクトリ構成について少し考えてみようと思います。

開発を進める前にディレクトリ構成を考えることにはいくつかメリットがあると思っています。

  1. 効率的な開発
    プロジェクトの構成を事前に計画することで、開発が効率化されます。
  2. メンテナンス性の工場
    ファイルや機能がどこにあるかを簡単に見つけられるために、バグの修正や、機能の追加がスムーズに鳴ります。
  3. スケーラビリティ
    拡張可能なディレクトリ構成を考えることで、プロジェクトが成長し、新しい機能がつい生かされる際にもスケールアップが容易になります。

以上の理由から、今回はソースのディレクトリ構成を考えていきます。

ディレクトリ構成検討

まず、やりたいことを列挙していきます

開発環境

image.png

  • 各環境を独立して開発できる
  • web
    • Next.jsで開発
    • BFFはApollo Serverでスタブサーバーを立ち上げて利用
    • port: 3000
    • apolloServerPort: 4000
  • BFF
    • NestJSで開発
    • APIはWiremockでスタブサーバーを立ち上げて利用
    • port: 3000
    • wiremockPort: 8080
  • API
    • Rustで開発
    • port: 3000
    • db Port: 5432

本番環境

image.png

展開予定はないので、ざっくりと

  • k8sで展開
  • web
    • port: 80

完成

開発しながら随時アップデートしていきますが、ひとまずはこの構成で進めていきます。
ディレクトリ構成と、大まかな用途を書いています。

.
├── Makefile               ・・・・・・・ 環境起動用Makefile
├── README.md
├── skaffold.yaml          ・・・・・・・ prod環境用のskaffoldファイル
├── web                    ・・・・・・・ Webソースコード
│   ├── README.md
│   ├── app/
│   ├── e2e/               ・・・・・・・ e2eテスト
│   ├── mock/              ・・・・・・・ bffのスタブサーバー用
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── node_modules/
│   ├── package-lock.json
│   ├── package.json
│   ├── postcss.config.js
│   ├── public/
│   ├── tailwind.config.ts
│   └── tsconfig.json
├── bff           ・・・・・・・ BFFソースコード
│   ├── README.md
│   ├── dist/
│   ├── nest-cli.json
│   ├── node_modules/
│   ├── package-lock.json
│   ├── package.json
│   ├── src/
│   ├── test/     ・・・・・・・ Unit/e2eテスト
│   ├── tsconfig.build.json
│   ├── tsconfig.json
│   └── wiremock/ ・・・・・・・ apiのスタブサーバー用
├── api           ・・・・・・・ APIソースコード
│   ├── Cargo.lock
│   ├── Cargo.toml
│   ├── e2e/      ・・・・・・・ E2Eテスト
│   ├── src/
│   ├── target/
│   └── test/     ・・・・・・・ Unitテスト
├── dockers       ・・・・・・・ k8s起動用のDockerfile
│   ├── bff
│   │   └── Dockerfile
│   ├── api
│   │   └── Dockerfile
│   └── web
│       └── Dockerfile
└── k8s            ・・・・・・・ k8s
    ├── bff
    │   ├── deployment.yaml
    │   └── service.yaml
    ├── api
    │   ├── deployment.yaml
    │   └── service.yaml
    ├── db
    │   ├── service.yaml
    │   └── statefulset.yaml
    └── web
        ├── deployment.yaml
        └── service.yaml

ざっくり説明

web開発時

├── web           ・・・・・・・ Webソースコード
│   ├── e2e       ・・・・・・・ e2eテスト
│   ├── test/     ・・・・・・・ Unitテスト
│   └── mock/     ・・・・ bffのスタブサーバー用
  • ./web/
    • こちらのソースで開発
  • ./web/mock/
    • BFFのスタブサーバー設定
  • ./web/test
    • jestのテストコード
  • ./web/e2e
    • e2eのテストコード(Cypress)

bff開発時

├── bff           ・・・・・・・ BFFソースコード
|   ├── test/     ・・・・・・・ Unit/E2Eテスト
│   └── wiremock/ ・・・・・・・ apiのスタブサーバー用
  • ./bff/
    • こちらのソースで開発
  • ./bff/wiremock/
    • APIのスタブサーバー設定
  • ./bff/test
    • nestjsのテストコード

API開発時

├── api           ・・・・・・・ APIソースコード
|   ├── e2e/      ・・・・・・・ e2eテスト
|   ├── src/
|   └── test/     ・・・・・・・ Unitテスト
  • ./api/
    • こちらのソースで開発
  • ./api/test
    • rustのテストコード
  • ./e2e/api
    • e2eのテストコード

本番環境

├── dockers/      ・・・・・・・ k8s起動用のDockerfile
├── k8s/          ・・・・・・・ k8s
├── skaffold.yaml ・・・・・・・ prod環境用のskaffoldファイル
  • ./skaffold.yaml
    • skaffoldの設定ファイル
  • ./dockers/
    • 各サービスのDockerfile
  • ./k8s/
    • 各サービスのdeployment.yamlおよびservice.yaml

明日からこちらで開発を進めていきます。

7
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?