쿠...sal

[컴][웹] vendure 사용해 보기(빌드 및 실행)

nodejs / expressjs e commerce solution / shopping mall / shoppingmall / 쇼핑몰

vendure 사용해 보기

windows 10 에서 vendure 를 설치하고 demo 를 띄워보자.

대략적으로 vendure를 설명하면, 다음과 같은 특징이 있다.

Nest(nestjs, expressjs 기반의 framework) 로 만들어졌다.
headless e-commerce framework 이다. 즉 api server 만 제공한다고 보면 된다. admin-ui 는 제공한다.

사용법은 아래 링크에 잘 나와 있다.

GitHub - vendure-ecommerce/vendure: A headless GraphQL ecommerce framework for the modern web

설치 및 dev server 실행

yarn 설치
- yarn이 필요하다. npm i를 사용해봤는데, 제대로 설치가 되지 않았다.
yarn bootstrap
- 이것은 lerna bootstrap을 실행한다. lerna boostrap에 대한 설명은 여기를 참고하자.
yarn build
- 이제 빌드를 하면 된다.
db 를 만들고, test 값을 생성해서 넣기(populate)
- <vendure>\packages\dev-server\dev-config.ts 에서 getDbConfig() 부분에 db 설정값을 수정한다. sqlite인 경우 굳이 수정할 필요는 없다.
- getDbConfig() 에 database 이름이 적혀있는데, 그 database 는 RDBMS 에 미리 만들어놔야 한다. sqlite은 굳이 안해도 된다.
- cd packages\dev-server && set DB=mysql&& yarn populate 은 duplicate error 가 난다. 다만 insert 시점의 error 이기에 table은 다 만들어진다. 이것은 mysql 의 경우 table 만들때 id에 대해서 auto_increment 설정이 안되기 때문으로 보인다. postgreSQL 로 db 를 set 하는 것은 잘 동작한다.
- cd packages\dev-server && set DB=sqlite&& yarn populate 는 잘 동작한다.
- set 을 한후 && 를 바로 붙어야 한다. (참고)
서버실행
- yarn start 또는 npm run dev-server:start : dev server를 run
  cd packages/dev-server && set DB=postgres&& yarn start
접속
- http://localhost:3000/admin 로 가면 admin login 화면에 접속할 수 있다.
- superadmin/superadmin 를 사용해서 login 할 수 있다.

admin ui 의 확장시 react / vue 사용방법

Using Other Frameworks | Vendure docs

vendure 실행

다음 repository 를 이용해서 server 를 run 할 수 있다. 이 repo에는 react ui extesion 에 대한 예제도 들어있다.

GitHub - vendure-ecommerce/real-world-vendure: A project showcasing a real-world tooling and plugin setup for a Vendure server

vendure `dev-server`

vendure/packages/dev-server 의 파일들은 npx @vendure/create my-app 를 실행할 때 생기는 내용과 비슷하다.

my-app/src/의 내용과 vendure/packages/dev-server 를 비교하면 유사하다.

추후, 이 dev-server 부분을 수정해서 server run 을 하면 될 듯 하다.

vendure 는 packages 밑에 build 가 필요한 부분을 flat 하게 놔둔듯 하다. 예를 들어 packages/admin-ui 는 build 돼서, <pro>\packages\admin-ui-plugin\lib\admin-ui로 들어가는 듯 하다. npm publish 를 할 때는 이 lib 부분을 publish 한다.(추측)

clients

javascript monorepo tools

monorepo 는 별것 아니다. 그냥 한 repository 에 여러 project가 들어가 있는 것을 monorepo 로 부른다고 보면 된다. 그래서 이 여러 project를 관리하기 위한 tool 들이 여럿 보여서 정리해 놓는다.

polyrepo(monorepo 의 반대) 에서는 client-server 의 경우 버전을 맞출 필요가 있다. 그러나 monorepo 에서는 이런 불편함이 줄어든다.

lerna 사용해 보기

Lerna and Nx | Lerna

시작

다음처럼 lerna 를 설치하고, init 를 하면 된다.

npm install lerna
npx lerna init

그러면 다음과 같은 directory 구조가 만들어진다. 자세한 사항은 Getting Started | Lerna 를 참고하자.

.git\
node_modules\
packages\
.gitignore
lerna.json
package.json
package-lock.json

이전 lerna에서는 lerna bootstrap을 해줘야 했는데, 이때는 package manager들이 workspace를 지원하지 않았기 때문이라고 한다. 하지만 이제는 지원하기 때문에 이 command 는 Lerna v7 에서 사라진다고 한다.(참고)

다음 package.json 를 보면 workspaces 가 정의되어 있다.

package.json:

{
  "name": "root",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    "lerna": "^6.4.1"
  }
}

workspace를 visualize

npx nx graph 를 하면 workspace를 graph 로 확인할 수 있게 해준다.

Lerna commands

Commands | Lerna

위 link 에서 lerna 의 모든 command 를 확인할 수 있다.

package 추가

workspace의 package를 추가 하는 방법은 npx learna create 이다.

추가하면, 다음처럼 package가 추가된다.

packages\
  |
  +- myproj1
  |
  +- myproj2


d:\lerantest>npx lerna create myproj1
lerna notice cli v6.4.1
lerna WARN ENOREMOTE No git remote found, skipping repository property
package name: (myproj1)
version: (0.0.0) 1
Invalid version: "1"
version: (0.0.0) 0.0.1
description: test-1
keywords: my module
homepage:
license: (ISC)
entry point: (lib/myproj1.js)
git repository:
About to write to d:\lerantest\packages\myproj1\package.json:

{
  "name": "myproj1",
  "version": "0.0.1",
  "description": "test-1",
  "keywords": [
    "my",
    "module"
  ],
  "author": "sal <gae@mail.com>",
  "homepage": "",
  "license": "ISC",
  "main": "lib/myproj1.js",
  "directories": {
    "lib": "lib",
    "test": "__tests__"
  },
  "files": [
    "lib"
  ],
  "scripts": {
    "test": "node ./__tests__/myproj1.test.js"
  }
}


Is this OK? (yes)
lerna success create New package myproj1 created at ./packages\myproj1

module 추가(`npm i`)

examples | lerna add

learn add를 하면 module 를 추가할 수 있다. 이것은 npm install과 같은 효과를 가져온다고 보면 된다. 다면, workspace안의 모든 package에 해당 module 을 install 하는 것이다.

# 모든 pacakge 에 babel-core 모듈을 추가
lerna add babel-core

내가 만든 module(여기서는 myproj1) 을 다른 package 에 추가하려 할 때는 다음처럼 하면 된다.

# 모든 pacakge 에 myproj1 module을 추가한다. myproj1 에는 추가하지 않는다.
lerna add myproj1

# 특정 package에 내 module 을 추가하려 할 때
lerna add myproj1 --scope=myproj2

모든 project를 한번에

다음처럼 하면 packages 안에 있는 모든 project를 build, test 해준다.

npx lerna run build 
npx lerna run test

특정 순서로 실행하기

특정 순서로 수행하고 싶다면 아래 command 로 설정할 수 있다. 즉, dependency 가 있는 경우 사용하면 될 듯 하다.

npx lerna add-caching

실행이 끝나면, nx.json 파일이 생성된다.

개인적인 결론

monorepo 를 위한 tool 이라고 보면 된다. 잠깐 사용해니, 이 툴은 여러개의 project를 만들어 쓰다가 그것을 하나로 모아서 쓰고 싶을 때 사용해도 될 듯 하다. lerna 에서 package를 추가할 때 git repository 로도 추가가 가능하다.

즉, 따로 분리된 repository 를 사용하다가, 이것들의 dependency 가 심하다고 하면, 그 때 lerna를 사용해도 될 듯 싶다.

[컴][웹] nodejs e-commerce solutions

framework / ecommerce / node ecommerce / 이커머스 / shopping mall / shoppingmall / 쇼핑몰 / 솔루션 / 프레임워크 / solution

nodejs e-commerce solutions

GitHub - vendure-ecommerce/vendure: A headless GraphQL ecommerce framework for the modern web
- Nest(nestjs, expressjs 기반의 framework) 로 만들어졌다.
- headless e-commerce framework 이다. 즉 api server 만 제공한다고 보면 된다.
- vendure 사용해 보기
GitHub - evershopcommerce/evershop: Node E-commerce Platform : a GraphQL Based and React ecommerce platform
GitHub - spurtcommerce/spurtcommerce : LoopBack framework 로 구현됐다.

[컴][웹] saleor 설치

세일러 / 쇼핑몰 / 장고 / python /

saleor 설치

django framework 로 만들어진 e-commerce 용 frmework 이다.

Prerequisites

docker
- 쿠…sal: [컴] Windows 용 Docker 설치

설치 full

절차

saleor-platform/docker-compose.yml 에서 storefront와 saleor-app-checkout 의 주석처리
docker compose build
storefront와 saleor-app-checkout 의 주석처리 없애고
docker compose up

상세

saleor-platform/docker-compose.yml 에서 storefront와 saleor-app-checkout 만 주석처리하고, docker compose build를 한다.

storefront
saleor-app-checkout

docker compose build

위 2개는 build 를 하면, npm build 를 하는 듯 한데, 제대로 build 가 되지 않았다. 그래서 그냥 docker compose up할 때만 추가를 했는데, 제대로 동작했다. 원인은 현재로선 파악을 하지 않았다.

다시 storefront와 saleor-app-checkout의 주석을 풀고

docker compose up

을 한다.

그리고 db migration 을 하고, 테스트 값을 만들기 위해 아래처럼 하면 된다.

docker compose run --rm api python3 manage.py migrate
docker compose run --rm api python3 manage.py collectstatic --noinput
docker compose run --rm api python3 manage.py populatedb --createsuperuser

--createsuperuser 를 하면 admin@example.com/admin으로 계정을 만들어준다.

설치, core api 만 사용시

saleor-platform 이라는 git repository 가 있다. 여기에 여러가지를 한번에 모아놨다. 이것을 이용해도 된다.

GitHub - saleor/saleor-platform: All Saleor services started from a single repository with docker-compose.

관련 내용은 다음 문서에서 확인할 수 있다.

Installation with Docker | Documentation – Saleor Commerce

git clone https://github.com/saleor/saleor-platform.git –recursive –jobs 3 cd saleor-platform

여기서는 saleor-platform 의 docker-compose.yml 를 수정해서 사용하려 한다.

기존의 docker-compose.yml을 아래처럼 줄였다.

version: "3.4"

services:
  api:
    build:
      context: ./saleor
      dockerfile: ./Dockerfile
      args:
        STATIC_URL: "/static/"
    ports:
      - 8000:8000
    # restart: unless-stopped
    networks:
      - saleor-backend-tier
    stdin_open: true
    tty: true
    # depends_on:
    #   - db
      # - redis
      # - jaeger
    volumes:
      - ./saleor/saleor/:/app/saleor:Z
      - ./saleor/templates/:/app/templates:Z
      - ./saleor/tests/:/app/tests
      # shared volume between worker and api for media
      # - saleor-media:/app/media
    command: python manage.py runserver 0.0.0.0:8000
    env_file:
      - common.env
      - backend.env
    # environment:
      # - JAEGER_AGENT_HOST=jaeger
      # - STOREFRONT_URL=http://localhost:3000/
      # - DASHBOARD_URL=http://localhost:9000/
      # - ALLOWED_HOSTS=localhost,api


  db:
    image: library/postgres:13-alpine
    ports:
      - 5432:5432
    restart: unless-stopped
    networks:
      - saleor-backend-tier
    volumes:
      - c:\saleor-platform\db\data:/var/lib/postgresql/data
      - ./replica_user.sql:/docker-entrypoint-initdb.d/replica_user.sql
    environment:
      - POSTGRES_USER=saleor
      - POSTGRES_PASSWORD=saleor

volumes:
  saleor-db:
    driver: local
  saleor-redis:
    driver: local
  saleor-media:

networks:
  saleor-backend-tier:
    driver: bridge

그리고, backend.env 에서 SECRET_KEY를 설정하자. 아무값이나 넣어놓자. 여기서 database 와 redis 설정을 해주는데, redis 는 무시하자. 이것때문에 추후 실행하면 error 가 보이긴 하지만, 큰 이슈는 없다.

이제 docker compose build를 하자.

cd saleor-platform
docker compose build

그러면, db 와 saleor web server 가 만들어진다.

이젠 db 를 만들어주자. 아래처럼 하면 된다. populatedb는 테스트 데이터를 넣어주는데, 굳이 필요하진 않다. 실행하면, redis 관련 에러가 보이긴 하지만, 무시해도 된다.

docker compose run –rm api python3 manage.py migrate docker compose run –rm api python3 manage.py populatedb docker compose run –rm api python3 manage.py createsuperuser

docker compose run –rm api python3 manage.py collectstatic –noinput

이제 실행하자.

docker compose up

웹 브라우저에서 http://localhost:8000/로 접근하면 화면이 보인다. core api server 는 8000 port 이다. 이것은 api server 이기에, view 가 보이진 않는다.(graphql page 는 있다.)

Where is the application running? | saleor/saleor-platform

db client 로 postgreSQL 에 접근도 된다. 위에서 createsuperuser 를 하면 saleor/saleor 로 접속하면 된다.

단점

Django Oscar vs Saleor for Digital Products store? : django
- framework 를 가져다 fork 해서 써야 한다. framework 의 upgrade 도 쉽지 않다. 이것이 장기적인 project에 적합하지 않게 한다.
- UI 를 customize 하는것이 어렵다.

mariadb 의 `.frm` `.ibd` 파일로 data 내용 불러오기

mysql, mariadb 의 저장된 파일인 .frm, .ibd file에서 data 를 다시 가져오는 방법이다. 다만, 이방법은 백업한 것을 다시 살려서 운영버전으로 쓰려는 것보다는, data를 어떻게든 살려보려 할 때 쓰는 방법으로 보는 것이 맞을 듯 하다.

참고: How Do I Restore Data from FRM and IBD Files

db 생성, 아무이름이나 가능, 여기서는 mydb1 으로 만들었다.
table 생성, table을 같은 DDL 로 생성
- ddl 을 모르는 경우 위 문서로 가면 mysqlfrm라는 tool을 사용해서 .from에서 ddl 을 얻는 방법을 알려준다.
ALTER TABLE table_name DISCARD TABLESPACE;
<mariadb>\data\mydb1\ 에 예전 ‘ibd’ 복사
primary index 외에 모든 index 를 삭제(처음 table을 만들때 index를 없애고 만들어도 된다.)
- mysql - Internal error: Drop all secondary indexes before importing table onlinelogistics/users when .cfg file is missing - Stack Overflow
ALTER TABLE table_name IMPORT TABLESPACE;

테이블 정의 추출

util 을 설치후 아래처럼 명령어를 실행하면 DDL 이 보인다. port 8080 은 db port 는 아니다. 서버를 띄우는 듯 하다.

"d:\a\MySQL Utilities 1.6\mysqlfrm.exe" --server=root:mypassword@localhost d:\a\mytable.frm --port=8080

[컴] aws snapshot volume을 root storage 로 설정해서 instance 를 띄우는 방법

aws / 복구 / recovery / restore /

aws snapshot volume을 root storage 로 설정해서 instance 를 띄우는 방법

root disk image 가 저장(snapshot) 된 경우, 이것을 이용해서 instance를 띄우는 방법이다.

AMI image 생성
1. snapshot 선택
2. create image
3. Image name 입력
4. Create Image
AMIs 메뉴에 가서 확인
Launch instance
1. AMI 선택 –> Launch instance from AMI

쿠...sal

[컴][웹] vendure 사용해 보기(빌드 및 실행)

vendure 사용해 보기

설치 및 dev server 실행

admin ui 의 확장시 react / vue 사용방법

vendure 실행

vendure `dev-server`

clients

See Also

[컴] javascript monorepo tools

javascript monorepo tools

See Also

[컴] lerna 사용해 보기

lerna 사용해 보기

시작

workspace를 visualize

Lerna commands

package 추가

module 추가(`npm i`)

모든 project를 한번에

특정 순서로 실행하기

개인적인 결론

[컴][웹] nodejs e-commerce solutions

nodejs e-commerce solutions

[컴][웹] saleor 설치

saleor 설치

Prerequisites

설치 full

절차

상세

설치, core api 만 사용시

단점

See Also

[컴] mariadb 의 .frm .ibd 파일로 data 내용 불러오기

mariadb 의 `.frm` `.ibd` 파일로 data 내용 불러오기

테이블 정의 추출

[컴] aws snapshot volume을 root storage 로 설정해서 instance 를 띄우는 방법

aws snapshot volume을 root storage 로 설정해서 instance 를 띄우는 방법

vendure 사용해 보기

설치 및 dev server 실행

admin ui 의 확장시 react / vue 사용방법

vendure 실행

vendure dev-server

clients

See Also

javascript monorepo tools

See Also

lerna 사용해 보기

시작

workspace를 visualize

Lerna commands

package 추가

module 추가(npm i)

모든 project를 한번에

특정 순서로 실행하기

개인적인 결론

nodejs e-commerce solutions

saleor 설치

Prerequisites

설치 full

절차

상세

설치, core api 만 사용시

단점

See Also

mariadb 의 .frm .ibd 파일로 data 내용 불러오기

테이블 정의 추출

aws snapshot volume을 root storage 로 설정해서 instance 를 띄우는 방법

vendure `dev-server`

module 추가(`npm i`)

mariadb 의 `.frm` `.ibd` 파일로 data 내용 불러오기