3장. Frontend 기반 구조

.env 의 구조

.env 파일 세팅 예제

 참고자료

Lavavel .env 기본 메뉴얼(https://laravel.kr/docs/5.7/configuration)

Lavavel .env Example(https://zetawiki.com/wiki/라라벨_.env,_.env.example)

# [Dabory]
ERP_THEMES=업종특화 소스코드 분리 위해 사용 (themes/erp 폴더 임포트)
PRO_THEME=PRO 소스코드 분리하기 위해 사용 (themes/pro 폴더 임포트)
LOCALE_SEQUENCE=다국어 사용 목록
APP_MOBILE_NO=아직 사용X
TAG_LINE=아직 사용X
CDN_TYPE=미디어 CDN (aws-s3 or local)
MEDIA_URL=미디어 base url 지정(미디어가 local or a3)
FAVICON_PATH=파비콘 파일 path
IS_SKIP_DBUPDATE=DBUPDATE 스킵 or 사용
IS_ON_MEMBER_SIGNUP=아직 사용X

## [MetaMask]
CHAIN_ID=0xE67B
CHAIN_NAME='Dang Smart Chain'
RPC_URLS=http://3.38.62.211:8545
NATIVE_CURRENCY_NAME=DGT
NATIVE_CURRENCY_SYMBOL=DGT
NATIVE_CURRENCY_DECIMALS=18
BLOCK_EXPLORER_URLS=https://explorer-staging.dangnn.co.kr

### [asset & cache]
BROWSER_CACHE=브라우저 캐시사용  (개발단계에서 false)
CSSJS_URL=local or asset url 입력          (개발단계에서 local)

### [Printer]
REPORT_SERVER_URL=프린터 서버 base url

### [Laravel]
APP_NAME=앱 이름
APP_ENV=.env 기본 메뉴얼 참고
APP_KEY=base64:.env 기본 메뉴얼 참고
APP_DEBUG=.env 기본 메뉴얼 참고
APP_URL=앱 url
LOG_CHANNEL=stack
LOG_LEVEL=debug
DB_CONNECTION=사용x
DB_HOST=사용x
DB_PORT=사용x
DB_DATABASE=사용x
DB_USERNAME=사용x
DB_PASSWORD=사용x

BROADCAST_DRIVER=사용x
CACHE_DRIVER=사용x
FILESYSTEM_DRIVER=사용x
QUEUE_CONNECTION=사용x
SESSION_DRIVER=사용x
SESSION_LIFETIME=사용x
MEMCACHED_HOST=사용x
REDIS_HOST=사용x
REDIS_PASSWORD=사용x
REDIS_PORT=사용x

MAIL_MAILER=.env 기본 메뉴얼 참고
MAIL_HOST=.env 기본 메뉴얼 참고
MAIL_PORT=.env 기본 메뉴얼 참고
MAIL_USERNAME=.env 기본 메뉴얼 참고
MAIL_PASSWORD=.env 기본 메뉴얼 참고
MAIL_ENCRYPTION=.env 기본 메뉴얼 참고
MAIL_FROM_ADDRESS=.env 기본 메뉴얼 참고
MAIL_FROM_NAME=.env 기본 메뉴얼 참고

AWS_ACCESS_KEY_ID=.env 기본 메뉴얼 참고
AWS_SECRET_ACCESS_KEY=.env 기본 메뉴얼 참고
AWS_DEFAULT_REGION=.env 기본 메뉴얼 참고
AWS_BUCKET=.env 기본 메뉴얼 참고
AWS_USE_PATH_STYLE_ENDPOINT=.env 기본 메뉴얼 참고

PUSHER_APP_ID=사용x
PUSHER_APP_KEY=사용x
PUSHER_APP_SECRET=사용x
PUSHER_APP_CLUSTER=사용x

MIX_PUSHER_APP_KEY=사용x
MIX_PUSHER_APP_CLUSTER=사용x

ANALYTICS_UA_ID=
ANALYTICS_VIEW_ID=

ANALYTICS_G_ID=
ANALYTICS_PROPERTY_ID=

.env.dabory 와 Gate Token

제 2장 Rest Api의 구성(https://manual.dabory.com/books/frontend-tutorial/chapter/restfull-api)에서 Gate Token에 대한 내용을 다뤘으니 참조하시고 해당 장을 숙지하시면 이해하는데 도움이 됩니다.

dabory Gate Token(DGT) 순서도
- [ KeyPair/PublicKey 등을 를 생성하는 일반적인 PHP Code]
https://www.php.net/manual/en/function.sodium-crypto-box-seal.php).
- [Sodium 사용 Ajax 제공 (260~262 Lines)]
http://git.daboryhost.com:10880/dabory/dbrerp/src/master/routes/web.php).
- [ DB 정보 암호화 how to use it in PHP (254~263 Lines)](http://git.daboryhost.com:10880/dabory/dbrerp/src/master/resources/views/front/dabory/pro/my-app/popup/popup-form1/form-a/client-app-form.blade.php).


[DGT 생성과정 시작]

[Main Request]

[DCS 생성과정 시작]

[요청 끝]

다보리 Frontend 폴더 구조

├── 0.0.0

├── app

├── app.examples

├── appslabke

├── artisan* 

├── composer

├── config

├── dabory 

     ├── para

    ├── themes

      (... 생략)

├── public

├── ralouphie

├── ramsey

├── resources ├── robots.txt

      (... 생략)

 

 주요 디렉토리 설명
- dabory 

- public

*심볼릭 링크 (Symbolic Link)
dabory 폴더 안에서는 이미지나 리소스에 직접 접근할 수 없기 때문에, public 폴더에 심볼릭 링크(symbolic link)를 생성하여 dabory 내부의 이미지 및 리소스를 외부에서 접근 가능하도록 연결합니다. 이를 통해 public 폴더를 경유하여 dabory 폴더 내의 리소스를 웹 애플리케이션에서 사용할 수 있습니다.

 

 추가설명

다보리의 프론트엔드 구조는 매우 유연하고 확장 가능하도록 설계되어 있으며, dabory 폴더를 통해 관리자는 ERP 시스템과 테마를 자유롭게 커스터마이징할 수 있습니다. 또한 public 폴더는 웹 애플리케이션의 외부 리소스를 제공하는 중심 역할을 하며, 필요한 경우 심볼릭 링크를 통해 리소스를 접근할 수 있습니다.

 

다보리 Theme 폴더의 구조

Theme 폴더의 구조

다보리의 테마 폴더는 두 가지 주요 카테고리로 나뉩니다. 다보리에서는 각 업체별로 개별적으로 제공하는 사이트를 "테마"라고 부릅니다.

 Pro (서비스 페이지)

    Pro 테마는 기업이나 조직 외부에 있는 게스트 및 고객을 대상으로 하는 프론트 오피스 페이지입니다. 표준 ERP와는 별도로 Pro에서만 사용되는 독립적인 클래스와 로직이 app, resources, routes 등 여러 디렉토리에 구분되어 존재하며, 독립적으로 작동합니다. 이러한 구조는 각 사이트별로 독자적인 구축이 가능합니다.

- pro 테마의 구조 예시

├─themes

     ├─point2u(테마명)

         ├─erp

               ├─shell

          ├─pro

               ├─app

                    ├─Http

                    ├─Services

               ├─para

               ├─resources

               ├─routes

               ├─shell

각 디렉토리에 대한 설명

1. app/Http

2. resources

2. erp (관리자 페이지)

ERP 테마는 기업이나 조직 내 직원 및 관리자를 위한 백오피스 페이지입니다. erponly 테마는 ERP 기능만 사용하도록 설계되어, /pro 경로로 들어오는 모든 트래픽을 관리자 페이지로 리디렉션하는 구조로 간결하게 구성되어 있습니다.

- erp 폴더의 구조 예시

├─themes

      ├─erponly

             ├─erp

                    ├─shell

              ├─pro

                    ├─routes

                    ├─shell

              ├─qry

gate-token-get 요청 보내기

- api 테스트를 통해 gate-token 받아오기

rest api를 테스트할 수 있는 PostMan이나 Thunder Client(vsocde 사용시)를 통해 gate-token response를 테스트해봅니다.

먼저 .env.dabory 파일에서 초기설정된 MAIN_API_URL, MAIN_API_CLIENT_ID, MAIN_API_BEFORE_BASE64

세개의 값을 확인하여 복사해줍니다. Thunder Client에서 MAIN_API_URL을 입력하고 엔드포인트는 clientId와 BeforeBase64를 통해 gate-toeken을 받아올 수 있는 GateTokenController에 store() 또는 test() 매서드의 엔드포인트로 post 요청을 합니다. 또한
body에 json 형식으로 다음과 같이 입력합니다.

{
  "ClientId": "MAIN_API_CLIENT_ID의 value",
  "BeforeBase64": "MAIN_API_BEFORE_BASE64의 value"
}

위와 같이 요청하면 api server에서 gate-toekn을 응답받을 수 있습니다.