파이썬으로 nextjs 페이지를 만들고.. Docker컨테이터화

시작!

몇 달 전에 python코드로 next.js 코드를 생성, 배포까지 해주는 프레임워크인 pynecone 이라는 프레임 워크를 본 일이 있어서 오늘 한 번 공식 홈페이지를 방문하여 사용해 보았다.

이러면 프론트엔드 코드에 파이썬의 강력한 연산 라이브러리를 그냥 탑재할 수 있을 것 같다. 예를 들어 pc init 을 통해 생성한 프로젝트에서 [프로젝트명].py (예: app.py)파일에서 바로 numpy를 import하여 numpy연산을 chakra ui와 함께 할 수 있는 것이다.

from pcconfig import config
import pynecone as pc
import numpy as np

docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"


...

def index() -> pc.Component:
    # 여기서 np 계산이 가능
    list1 = [1,2,3,4]
    a = np.array(list1)
    return pc.center(
        pc.vstack(
            pc.heading("안녕하세요....!", font_size="2em"),
            pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
            # 결과 출력...
            pc.box("Shape : ", a.shape),
            ...

코드의 구조는 플러터와 상당히 유사했다. heading, box, link등의 다양한 요소들을 테트리스 블럭 쌓듯이 배치시키는 것이었다.

class State(pc.State):
    """The app state."""

    pass

이런 것도 있는 것을 보니 앱 상태 스토리지도 핸들링 할 수 있는 모양이다.

실행은 npm install 처럼 pc run 로 실행시키고 실행시 컴파일 결과가 .web 디렉토리에 next.js 의 코드로 변환되어 저장되고 bun.js와 next.js가 자동으로 설치되어 애플리케이션이 구동되는 것 같다. 백엔드로 fastapi를 내장하고 있다 하니, fastapi에 nextjs를 붙인 것이라 생각하면 될 듯 하다.

의문이 들었다. 실행은 pc run으로 시키지만 배포는 어떤 형태로 될 까?

• 정적 페이지로 변환
  • 정적 페이지로의 변환은 numpy 결과만 표시하기 때문에 (말 그대로 정적) 동적인 부분을 위해서는 의미는 없을 것 같다.
• 별도의 프로덕션 전용 커멘드
  • 별도의 커멘드가 있기는 한데.. nohub으로 띄우는 게 잘 안되어 연구를 좀 더 해야 할 것 같다.
• Docker 컨테이너화
  • 배포시 이게 좀 쓸만 하겠네..!

그래서 공홈에 있는 깃헙에 들어가 설명대로 Dockerfile, requirements.txt 를 생성하고 docker build -t pynecone-project:latest . 를 수행하고 docker run을 시켜 보았다.

오류를 만났다.!

오류를 분석해 보니 컨테이너에서는 자동으로 bun.js, next.js chakra ui 등 필요한 것들을 설치해 주지 못하고 있는게 원인이었다. 그리고 Dockerfile내 유저 실행 권한도 문제가 되었다.

Dockerfile에 일단 필요한 것들을 설치하는 스크립트를 추가하여 보완한 버전이 아래와 같다.

FROM python:3.11-slim as base

RUN adduser --disabled-password pynecone

FROM base as build

WORKDIR /app
ENV VIRTUAL_ENV=/app/venv
RUN python3 -m venv $VIRTUAL_ENV
ENV PATH="$VIRTUAL_ENV/bin:$PATH"

COPY . .

RUN pip install wheel \
    && pip install -r requirements.txt


FROM base as runtime

RUN apt-get update && apt-get install -y \
    curl \
    && curl -fsSL https://deb.nodesource.com/setup_19.x | bash - \
    && apt-get update && apt-get install -y \
    nodejs \
    unzip \
    && rm -rf /var/lib/apt/lists/*
RUN curl -fsSL https://bun.sh/install | bash 



ENV PATH="/app/venv/bin:$PATH"


FROM runtime as init

WORKDIR /app
ENV BUN_INSTALL="/app/.bun"
COPY --from=build /app/ /app/
RUN pc init


FROM runtime
COPY --chown=pynecone --from=init /app/ /app/
USER root
WORKDIR /app
RUN npm install next
RUN npm install @chakra-ui/react @emotion/react socket.io-client json5 axios focus-visible


CMD ["pc","run" , "--env", "prod"]

EXPOSE 3000
EXPOSE 8000

docker build를 하고 docker run를 공식 깃헙 페이지를 참조하면 아래와 같이 이미지가 깔리고 실행이 된다.

~/Pyne$ docker images
REPOSITORY         TAG         IMAGE ID       CREATED       SIZE
pynecone-project   latest      8ab7a6983aeb   5 hours ago   1.17GB
<none>             <none>      7fc4eb0a60bc   5 hours ago   1.18GB
<none>             <none>      271d6e08eafe   5 hours ago   949MB
python             3.11-slim   d74a102e9001   2 days ago    128MB
~/Pyne$ 

~/Pyne$ docker ps
CONTAINER ID   IMAGE                     COMMAND               CREATED       STATUS       PORTS                                                                                  NAMES
8ce8c7bcd847   pynecone-project:latest   "pc run --env prod"   5 hours ago   Up 5 hours   0.0.0.0:3000->3000/tcp, :::3000->3000/tcp, 0.0.0.0:8000->8000/tcp, :::8000->8000/tcp   pynecone

실행결과 성공…