yukiyokotani / my-app

Prototype of simple microservice architecture.

WEBアプリケーション雛形 (作成中)

構成

• Server-side: Golang (Gorilla Web Toolkit, SQLX)
• Client-side: React (TypeScript, Next.js, Redux Toolkit, Material UI, React Hook Form)
• Database: Postgres
• Others:
  • Docker-based local development environment
  • API definition in the format of OpenAPI 3.0
  • API client libraries and Server stubs are generated by the OpenAPI Generator
    • Client: typescript-axios
    • Server: go-server
  • User authentication by the OpenID Connect

Application Server (Go), Web Server (NGINX), Reverse Proxy Server (NGINX), DB はそれぞれ Docker コンテナで用意している。同一ネットワークで実行するため docker-compose で起動させる。

メモ

単体の起動

• GolangのAPIサーバーは golang ディレクトリから以下で起動

  go run main.go

• Reactアプリケーションは react ディレクトリから以下で起動

  npm run dev

開発環境用コンテナの起動（開発時は基本的にこちらを推奨）

• 事前準備（この手順を踏まないとコンテナが起動しない）

  • mkcert によって localhost 用の localhost.pem と localhost-key.pem を作成する。 [参考]

  brew install mkcert // 未インストールの場合のみ
  mkcert --install
  mkcert localhost

  • 作成した pem ファイル localhost.pem, localhost-key.pem を ./nginx 下に置く。これで NGINX のリバースプロキシサーバー https://localhost に https 接続できるようになる。（クライアントサーバー http://localhost:3000 は express で用意しており、こちらは https 接続できないので注意。またその影響で CORS 制限があり、API も利用できないようになっている。）

• 開発環境を起動する際は root で以下を実行

  docker-compose build
  docker-compose up -d

  • 立ち上がったら https://localhost にアクセスする
    • 起動状況を確認するために Docker Desktop があると便利
  • サーバー・クライアントともに保存で再ビルドされ、コンテナを立ち上げなおさずともホットリロードで反映される

• 開発環境を終了する際は以下を実行

  docker-compose down

デプロイ用コンテナの起動

• .env.example を参考に .env ファイルを用意する。Postgres の情報と OpenID Connect の情報、どちらとも正しい情報に書き換える必要がある。OpenID Connect については Google アカウントによる認証を想定している。詳しくは auth_api.go を参照。
• 現在の API の設計上、OpenID による認証を有効にするとき、Google の認証情報設定でリダイレクトURLのパスは api/auth/callback にする必要がある。
• 以下を実行する。

  docker-compose -f docker-compose.prod.yml up -d

  デプロイ用コンテナでは Go のビルド、Next.js の静的ファイル出力が行われる。

my-app's Issues

管理者権限のテスト

proxyのpathの修正

• apiサーバーへproxyする際のpathから /api を取り除く

golangでCRUDを実装する

CRUDのUを実装する

Allow-Originの対象を制限する

• Access-Control-Allow-Origin の対象を制限する

openapiの導入

nginxのreverse proxyの修正

• localhost:3000 (express の clientサーバー) では express の設定 で /api を 8080 port に proxy する
• localhost:443 (nginx の rever) では nginx の設定で /api を 8080 port に proxy する
• localhost:8080 (golang の api サーバー) はレスポンスヘッダに Allow-Origin を設定する

GitHub Actionsの導入

• GitHub Actionsを導入する
  • ESLint

[DB] migration整備

ReduxのuseDispatchの型の修正とNGINXのプロキシの修正

SWRとRecoilに移行する

csrf対策をする

GoでCRUDのCを実装する

Client側のOpenAPI Generatorの置き換え

• OpenAPIのTypeScript Code Generatorを置き換える

Client側のデザイン改修

GCPへのdeployを確認する

• GCP の Cloud Engine での起動まで確認する
• Postgres の対応については除く

サインイン・サインアウトのUIを実装する

OpenIDによる認証を実装する

CRUDのDを実装する

ドキュメントのアップデート