GithubHelp home page GithubHelp logo

new-support-tools's Introduction

new-support-tools

Next + サーバーレスなモダンなフレームワークで実装する

ファイル構成

.
├── Dockerfile
├── README.md
├── docker-compose.yml
├── lambda -> lambdaのディレクトリ
│   └── SampleFunction
│       ├── Dockerfile
│       ├── entry.sh
│       ├── go.mod
│       └── main.go
└── support-tools -> Nextのディレクトリ
    ├── README.md
    ├── next-env.d.ts
    ├── next.config.js
    ├── package.json
    ├── pages
    │   ├── _app.tsx
    │   ├── api
    │   │   └── hello.ts
    │   └── index.tsx
    ├── public
    │   ├── favicon.ico
    │   └── vercel.svg
    ├── styles
    │   ├── Home.module.css
    │   └── globals.css
    ├── tsconfig.json
    └── yarn.lock

nodeのライブラリ一覧

  • Nextjs
  • typescript
  • tRPC
  • jest
  • tailwind
  • material-ui

立ち上げ方法

  1. まずold-support-toolsのdbをマイグレートした後に立ち上げてください(GO言語でのマイグレーションは作成していません) LambdaではこのDBに接続します。
docker compose up db
  1. その後、new-support-toolsのDockerを立ち上げます
docker compose up --build

注意: 以下のエラーが出た場合

ERROR [new-support-tools_sample-function internal] load metadata for public.ecr.aws/lambda/provided:al2 => ERROR [new-support-tools_support-tools internal] load metadata for docker.io/library/node:18-alpine

Lambdaを立ち上げるために以下のコマンドでLoginを行う必要がある可能性があります

aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws

注意: Windowsの場合、改行コードの変更が必要な可能性があり

 exec /entry.sh: no such file or directory というようなエラーが発生した場合は改行コードを変更する必要があり  詳しくは以下のwebサイトなどを参考のこと How to fix “exec user process caused: no such file or directory” in Docker on Windows?

注意: DBのHOST_NAMEについて

環境によっては以下のケバブケースに書き換える必要がある可能性があります。

HOST_NAME=old-support-tools-db-1

serverless-nextjsのデプロイ方法

注意: まず、AWSのconfigなどが設定されており、その設定が、デプロイしたい環境になっていることを確認してください

serverless-nextjsのデストロイ方法

npx [email protected] remove

ただ、全てのリソースがdestoryされないので注意が必要(要チェック)

https://blog.hey3.dev/posts/deploy-nextjs-to-aws

usage

  • Nextの表示

以下のurlをブラウザで表示することでNextの画面が表示できる

http://localhost:3001/
  • Lambdaの仕様

以下のurlでlocalのLambdaにアクセスできます。

http://localhost:9000/2015-03-31/functions/function/invocations

以下のようにcurlで叩くとDBから持ってきたcgg_idの結果が返ってきます

curl -XPOST "http://localhost:9000/2015-03-31/functions/function/invocations" -d '{}'

結果例

{"message":"cgg_id: GL1004","statusCode":200}

new-support-tools's People

Contributors

as-28 avatar ifhito avatar takenokoroid avatar

Stargazers

 avatar

Watchers

 avatar

new-support-tools's Issues

サポートツールで使う言語・フレームワークを決定する

概要

まだ使う言語・フレームワークが決定していなかったので決定したい
モダンフレームワークを使いたいという思い

目的

フレームワークを決めて開発着手できる状態にしたい

タスク

備考

候補はReact, Vueか
この規模なら正直どっちも大差ないので二人の経験値で決めるかなと思う

フロントエンドの作成

概要

フロントエンド側のコード作成

目的

Nextでサポートツールが作成できるようにする。

タスク

  • Next APIでバックエンドにfetchする
  • 受け取った内容をカスタムフックで受け取りstateの更新
  • stateを使用してDOMの構築を行う

備考

issue作り忘れてましたすみません

【要相談】DBについての相談

概要

RDSを構築していたが、クエリを入力するためにプライベートクラウドの場合は踏み台用EC2が必要など、思ったよりも使い勝手が悪そうだった。そのため、使用するDBを変更したい

目的

使用するDBをdynamoDBに変更する

タスク

備考

ちょっと1時間くらいかけて調べながらやっていたのですが、書いていた資料が無駄になりました…
Lambdaの修正が必要になる形になってしまうため、そこが許容できるかを聞きたいです(そんなに大幅な改修じゃないと思います)
確実にDynamoDBを使用した方が楽に作れる気がする(DBをコンソール上で操作可能)のでどうかよろしくお願いします

開発環境の作成

概要

Next.js+Lambda+etcの開発環境を作成する

目的

新しい方のアーキテクチャを完成させるため

タスク

  • 以下のライブラリの入ったDocker環境の構築
    • Nextjs
    • Prism
    • Matrial-UI or Tailwind?
    • tRPC?
    • SAMでのLambda local実行環境
    • jest
    • Typescript
    • DB(使い回す場合はdocker networkを共通化する)

備考

作り始めていいっすか?

prismでAPIモックを立ち上げる

概要

フロントエンドの開発時のモックサーバーをprismで立ち上げたい

目的

フロントエンドの開発を行うため

タスク

  • openapiのyamlを記述する
  • Prismでサーバーを立ち上げる

備考

発表資料について考えたい

@takenokoroid

概要

発表資料について思ったことがあったためissueを立てさせていただきました。

目的

発表資料の内容で追加or取り替えて発表した方が良い内容を思いついたので質問したいです

タスク

フロントエンドのデプロイを考える中でビルド方法やレンダリング方法の違いによって、さまざまなインフラ構築の方法が考えられると思いました。そのため、その内容を調べていたのですが、その中でこの種類は説明すべきではないかなと感じました。そのため、この内容について追加で話した方が良いのではないかと思い、意見をお聞きしたいと思ってIssueを立てました。

備考

以下のNotionがインフラの構築方法についてまとめたものになります。
流れとしては最近のフロントエンドのビルドおよびレンダリング方法の種類と、それに合わせたインフラという流れで記述しています
フロントエンドのデプロイ方法

また、新しいアプリケーションへの移行方法もまとめてみたのですが、自分が言っといてなんなのですが、フロントエンドという主題からはそれている気がしたので、改めてこれを説明するか否かもお聞きしたいです。
システム移行(言い訳回)

よろしくお願いいたします

ユーザーストーリーを作成

伝えたいこと: フロントエンドフレームワークを使ってシステムを作り替える上でのインフラとフレームワークの選択方法を伝えたい

フロントエンドのデプロイ方法とAWSでのインフラ構築の手法

  • ユーザストーリー
    • メインシステムを置き換えたい
      • ただいきなりだと知識がないし、ベテランは忙しかった。
      • 新人に作ってもらって知識を広めてもらうようにした。
    • サポートツールの置き換え
      • メインシステムはお金を稼いでいる
      • サポートシステムはそこまで大きくない
    • A君は新人研修の一環でそのサポートシステムを置き換えることになった。
      • A君はフロントエンドのシステムを作成することになった。
      • A君はあまりインフラわからん
    • 期日: 短い
    • 自由に作って良い
    • 社内ツールなので、社内の情報である。なので、APIを秘匿にする必要があった。
    • SSRでNuxtは新しいVueのバージョンになっていない。SveltekitはバージョンがRCだったので今後メインを置き換えるとなると危険
      • Next
    • 普通にあるシステムである。
    • 蜜結合
    • お金は儲かっているとする

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.