끄적끄적

pynecone 사이트

https://pynecone.io/docs/getting-started/project-structure

프로젝트 디렉토리 생성 

% mkdir demo_board
% cd demo_board
% ll
total 0
drwxr-xr-x   2 dongsik  staff   64  2 18 11:02 .
drwxr-xr-x  11 dongsik  staff  352  2 18 11:02 ..

프로젝트 초기화

% pc init
[11:05:35] Initializing the web directory.                           utils.py:410
           Initializing the app directory.                           utils.py:399
           Finished Initializing: demo_board                         pc.py:49

초기화된 프로젝트 디렉토리 구조

% ll
total 16
drwxr-xr-x   7 dongsik  staff  224  2 18 11:05 .
drwxr-xr-x  11 dongsik  staff  352  2 18 11:02 ..
drwxr-xr-x  10 dongsik  staff  320  2 11 00:49 .web
drwxr-xr-x   3 dongsik  staff   96  2 11 00:49 assets
drwxr-xr-x   5 dongsik  staff  160  2 18 11:05 demo_board
-rw-r--r--   1 dongsik  staff  128  2 18 11:05 pcconfig.py

# 디렉토리 구조 상세보기
% tree .
.
├── .web               # 컴파일된 NextJS 
├── assets             # images, fonts등 정적 파일 
│   └── favicon.ico    # pynecon favicon file
├── demo_board         # 메인 프로젝트 디렉토리
│   ├── __init__.py
│   └── demo_board.py  # Default App 파일 (생성한 프로젝트 이름과 동일하게 생성됨)
└── pcconfig.py        # App에 대한 설정파일

첫번째 구동

% pc run
───────────────────── Starting Pynecone App ──────────────────────
────────────────── Installing frontend packages ──────────────────
bun install v0.5.0 (2db04ef9)
────────────────────────── App Running ───────────────────────────
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 2.4s (757 modules)
wait  - compiling /404 (client and server)...
event - compiled client and server successfully in 191 ms (761 modules)
warn  - Fast Refresh had to perform a full reload. 
        Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
wait  - compiling / (client and server)...
event - compiled client and server successfully in 375 ms (831 modules)

실행화면

http://localhost:3000/

다음 페이지 : https://amnesia.tistory.com/9

pynecone demo dashboard를 업무 모니터링하는 용도로 사용하기 위해서 사용중인 클라우드의 CentOS서버에 Docker Container로 pynecone 서버를 구동했습니다.

서버 (클라우드) : CentOS 7.9 

cat /etc/redhat-release
CentOS Linux release 7.9.2009 (Core)

Mac에서 docker image 받아서 사용해도 괜찮습니다.

Python 최신 & Node js Docker image

https://hub.docker.com/r/nikolaik/python-nodejs

https://github.com/nikolaik/docker-python-nodejs

해당 컨테이너는 수시로 업데이트 됩니다. 

Docker Pull Command

docker pull nikolaik/python-nodejs

All images have a default user pn with uid 1000 and gid 1000.

다운받은 Docker Image 확인

$ docker images
REPOSITORY               TAG       IMAGE ID       CREATED         SIZE
nikolaik/python-nodejs   latest    eaeeaf150538   6 weeks ago     1.29GB

(문서만드는 시점에 Docker image의 python, node js 버젼이 올라갔네요 하지만 최신으로 받아도 설치에는 문제 없을겁니다.)

Linux 서버의 사용자 디렉토리에 pynecone 폴더를 만들고 해당 폴더를 volume으로 지정해서 컨테이너를 구동합니다.

이때 포튼 기본포트(3000), API 포트 (8000)을 열어야 합니다.

물론 3000, 8000 번포트는 클라우드 서버의 방화벽에도 포트를 오픈해야 외부에서 접속 가능합니다. 

docker run -it -d --name=demo_board -p 3000:3000 -p 8000:8000 -v /home/<사용자>/pynecone:/pynecone --user 1000 nikolaik/python-nodejs:1.0 bash

docker run -it -d --name=demo_board -p 3000:3000 -p 8000:8000 -v /home/<사용자>/pynecone:/pynecone --user 1000 nikolaik/python-nodejs:1.0 bash

root 로 컨테이너 들어가기

docker exec -it --user root demo_board bash

$ docker ps
CONTAINER ID   IMAGE                       COMMAND  CREATED       STATUS       PORTS                                                      NAMES
9e1be00f07e1   nikolaik/python-nodejs:1.0   "bash"  5 weeks ago   Up 5 weeks   0.0.0.0:3000->3000/tcp, 0.0.0.0:8000->8000/tcp, 5006/tcp   demo_board
$

vim 설치

apt-get update
apt-get install vim

리눅스 버전확인

root@9e1be00f07e1:/pynecone# cd /pynecone
root@9e1be00f07e1:/pynecone# uname -a
Linux 11d0133a3eb6 3.10.0-1160.42.2.el7.x86_64 #1 SMP Tue Sep 7 14:49:57 UTC 2021 x86_64 GNU/Linux
root@9e1be00f07e1:/pynecone# cat /etc/issue
Debian GNU/Linux 11 \n \l
root@9e1be00f07e1:/pynecone#

Python, Node 버전 확인

root@9e1be00f07e1:/pynecone# python -V
Python 3.11.1
root@9e1be00f07e1:/pynecone# node -v
v18.13.0
root@9e1be00f07e1:/pynecone#

pynecone 설치전 pip list 확인

root@9e1be00f07e1:/pynecone# pip list
Package          Version
---------------- ----------
certifi          2022.12.7
distlib          0.3.6
filelock         3.9.0
pip              23.0
pipenv           2022.12.19
platformdirs     2.6.2
setuptools       65.5.1
virtualenv       20.17.1
virtualenv-clone 0.5.7
wheel            0.38.4
root@9e1be00f07e1:/pynecone#

pynecone 설치

root@9e1be00f07e1:/pynecone# pip install pynecone

설치후 pip list 확인

root@9e1be00f07e1:/pynecone# pip list
Package            Version
------------------ ----------
anyio              3.6.2
async-timeout      4.0.2
certifi            2022.12.7
charset-normalizer 3.0.1
click              8.1.3
commonmark         0.9.1
distlib            0.3.6
fastapi            0.88.0
filelock           3.9.0
greenlet           2.0.2
gunicorn           20.1.0
h11                0.14.0
httpcore           0.16.3
httpx              0.23.3
idna               3.4
numpy              1.24.1
pandas             1.5.3
pip                23.0.1
pipenv             2022.12.19
platformdirs       2.6.2
plotly             5.13.0
psutil             5.9.4
pydantic           1.10.2
Pygments           2.14.0
PyMySQL            1.0.2
pynecone           0.1.15
python-dateutil    2.8.2
pytz               2022.7.1
redis              4.4.2
requests           2.28.2
rfc3986            1.5.0
rich               12.6.0
setuptools         65.5.1
six                1.16.0
sniffio            1.3.0
SQLAlchemy         1.4.41
sqlalchemy2-stubs  0.0.2a32
sqlmodel           0.0.8
starlette          0.22.0
tenacity           8.1.0
typer              0.4.2
typing_extensions  4.4.0
urllib3            1.26.14
uvicorn            0.20.0
virtualenv         20.17.1
virtualenv-clone   0.5.7
websockets         10.4
wheel              0.38.4
root@9e1be00f07e1:/pynecone#

설치가 완료된 후에는 일반 사용자로 컨테이너로 들어가서 작업하면됩니다.

docker exec -it demo_board bash

필요한 Python 라이브러리가 설치완료되면 본격적으로 demo 프로젝트를 생성합니다.

1.pynecone Demo 프로젝트 생성 참조해서 첫번째 프로젝트를 생성합니다.

https://amnesia.tistory.com/6

운영업무에서 사용할 대시보드를 pynecone으로 구현해볼려고 합니다.

기본적인 골격을 만들기위해서 아래 데모로 Navigation bar, 로그인, 매뉴, 다중 콤보, Table, DataTable 등 필요한 기능들을 하나씩 기능 테스트 및 구현해보고 있습니다.

개별 기능은 아래 '카테고리'에서 확인가능합니다. 

데모 구성은 https://amnesia.tistory.com/category/pynecone/demo%20board

목표 : pynecone을 이용해서 업무에서 사용할 Business Dash Board를 구현

• Reference Gallery Twitter Clone 샘플 참고
• Common한 로그인 화면 구현
• SQLite db(pynecone.db) 를 이용해서 사용자 관리하는 샘플을 구현