[HeyForm] docker로 HeyForm 설치하기

 

ㅁ 들어가며

 누구나 코딩 기술 필요없이 설문조사, 설문지, 퀴즈, 투표를 위한 매력적인 대화형 양식(Form)을 만들 수 있는 HeyForm이라는 오픈소스가 있다. HeyForm에 대해서 알아보고, 실 사용을 위해 Deploy with Docker를 따라서 설치해 보았다.

 

ㅁ HeyForm이란?

 HeyForm은 누구나 설문조사, 설문지, 퀴즈 및 여론 조사를 위한 매력적인 대화 양식을 만들 수 있는 오픈 소스 양식 작성 도구이다. 코딩 기술이 필요하지 않는다. 

ㅇ 쉽고 강력한 양식을 작성할 수 있다.
  - 다양한 입력: 기본 텍스트, 이메일, 전화번호 필드, 사진 선택, 날짜 선택기, 파일 업로드 등
  - 스마트 로직: 조건부 로직 및 URL 리디렉션을 통해 동적으로 조정 가능한 양식을 제공
 - 강력한 통합: 웹훅, 분석, 마케팅 플랫폼, Zapier 및 Make.com과 같은 도구와 연결 가능

 

ㅇ 브랜드에 맞게 사용자 지정
 - 비쥬얼 테마: 사용자 정의 가능한 글꼴, 색상, 배경 등을 사용하여 브랜드 아이덴티티에 맞게 양식의 모양과 느낌을 조정
 - 고급 테마: 보다 심층적인 개인화를 위한 사용자 지정 CSS를 포함한 광범위한 사용자 지정 옵션

ㅇ 데이터 분석 및 액션
 - 통찰력 있는 분석: 이탈률, 완료율 등 상세한 분석 제공
 - 데이터 내보내기: 추가 분석이나 시스템 통합을 위해 양식 결과를 CSV로 쉽게 내보낼 수 있음

 

ㅇ 오픈 소스

 - GNU Affero General Public License v3.0(AGPL-3.0) 하에 오픈소스로 제공

 

 

ㅁ 로컬 설치 방법

설치는 로컬배포과 셀프 호스팅 배포가 있다.

ㅇ 로컬배포

 - HeyForm Help Center에 로컬 배포 방법 안내가 있다.

 - macOS와 Window 개발환경에 배포할 수 있다. 

 - 구성요소

   ㄴ Node.js v18.x
   ㄴ Pnpm v8.x
   ㄴ MongoDB v4.x
   ㄴ Redis

 

ㅇ 로컬환경은 다른 개발 요소와 충돌이 있어 Docker로 배포해보자.

 

 

ㅁ Docker 배포방법

 ㅇ 셀프 호스팅 중 Docker 배포 방법에 따라 배포하였다. 

 

 

Deploy with Docker

---

 

ㅁ Docker 및 Docker Compose를 설치

 시작하기 전에 다음 사항이 필요하다.
  - Docker 및 컨테이너화 원칙에 대한 기본 지식
  - Docker 및 Docker Compose의 설치

 

macOS 사용자의 경우 Homebrew 로 설치할 수 있다 .

brew install docker docker-compose

Windows 사용자의 경우 Chocolatey를 통해 설치할 수 있다.

choco install docker-desktop docker-compose -y

 

 

ㅁ docker.env 작성

ㅇ 모든 고정적으로 종속된 환경 변수는 docker.env에 설정한다.

ㅇ 샘플파일을 통해 환경변수를 docker.env 파일로 만들어야 한다. 

ㅇ 환경변수 지정을 위해서 구성 설명을 참조하면 된다. 

 

# https://docs.heyform.net/configuration

# App serve
# If you are developing locally, you can use http://[ip]:[port].
APP_HOMEPAGE_URL=http://127.0.0.1:8000

# If you are using docker:
# ports:
#  - "9090:8000"
# The url should be http://127.0.0.1:9090 but not :8000.

# If you are deploying to a server, please replace it with your domain.
# APP_HOMEPAGE_URL=https://heyform.net

# Auth
SESSION_MAX_AGE=15d
SESSION_KEY="key1"
FORM_ENCRYPTION_KEY="key2"

# Mongo
MONGO_URI="mongodb://192.168.33.74:27017/heyform"   # <=== 수정부분
MONGO_USER=
MONGO_PASSWORD=

# Upload
UPLOAD_FILE_TYPES=".jpg,.png,.bmp,.gif,.txt,.md,.doc,.docx,.xls,.xlsx,.csv,.ppt,.pptx,.pdf,.mp4,.wmv,.zip,.rar,.7z"

# SMTP
SMTP_FROM="HeyForm <noreply@example.com>"
SMTP_HOST="example.com"
SMTP_PORT=465
SMTP_USER=
SMTP_PASSWORD=

# Social login
APPLE_LOGIN_TEAM_ID=
APPLE_LOGIN_WEB_CLIENT_ID=
APPLE_LOGIN_KEY_ID=
APPLE_LOGIN_PRIVATE_KEY_PATH=

# https://docs.heyform.net/login-with-google
GOOGLE_LOGIN_CLIENT_ID=
GOOGLE_LOGIN_CLIENT_SECRET=

# Submission spam filter
AKISMET_KEY=

# Anti bot
# https://www.geetest.com/en/
GEETEST_CAPTCHA_ID=
GEETEST_CAPTCHA_KEY=

# https://www.google.com/recaptcha/about/
GOOGLE_RECAPTCHA_KEY=
GOOGLE_RECAPTCHA_SECRET=

# Bull & redis
BULL_JOB_ATTEMPTS=3
BULL_JOB_BACKOFF_DELAY=3000
BULL_JOB_BACKOFF_TYPE=fixed

REDIS_HOST=192.168.33.74   # <=== 수정부분
REDIS_PORT=6379
REDIS_DB=0

# Unsplash
UNSPLASH_CLIENT_ID=

# Stripe
# https://docs.heyform.net/connect-with-stripe
STRIPE_PUBLISHABLE_KEY=pk_
STRIPE_SECRET_KEY=sk_
STRIPE_CONNECT_CLIENT_ID=ca_
STRIPE_WEBHOOK_SECRET_KEY=whsec_

ㅇ 샘플 파일에서 mongoDB와 Redis URL을 해당 IP로 수정하였다. 

ㅇ 나의 경우 맥미니에서 테스트 중이라 192.168.33.74로 변경하였다.

 

ㅁ docker-compose.yml 작성

version: "3"

services:
  heyform:
    image: heyform/community-edition:latest
    restart: "always"
    env_file: ./docker.env
    ports:
      - "8000:8000"
    depends_on:
      - mongo
      - redis

  mongo:
    image: mongo:4.4.29
    restart: "always"
    ports:
      - "27017:27017"

  redis:
    image: redis
    restart: "always"
    command: "redis-server --appendonly yes"
    ports:
      - "6379:6379"

 ㅇ 만약 heyform 웹의 접속 포트를 9090으로 변경하려면,

services:
   heyform:
   ~~ 생략 ~~
     ports:
       - "9090:8000"

으로 수정할 수 있다.

 

 

 

ㅁ Docker 실행

ㅇ heyform이라는 폴더를 만들고, docker-compose.yml과 docker.env를 생성하였다.

 

# docekr 실행
$ docker-compose up

 ㅇ 네트워크와 mongoDB, Redis, heyform이 생성되었다.

 

ㅇ실행이 되면 MongoDB에 heyform이라는 database가 생성된다.

 

ㅁ heyform 접속

ㅇ 192.168.33.74:8000으로 접속하였다. 

ㅇ 로그인 화면이 정상적으로 로딩되었다. 

 

ㅁ 사용가이드

ㅇ HeyForm Help Center에 구체적인 사용방법과 구글, 이메일, Slack등의 연동 방법이 안내되어 있다. 

 

 

 

 

 

Docker Image 빌드

---

 소스 분석을 위해 git 클론하여 docker image 빌드를 진행해 보았다. 

 

ㅁ Git clone

$ git clone https://github.com/heyform/heyform.git

  ㅇ 우선 소스 분석을 위하여 git clone하였다.

ㅁ Docker image 빌드

FROM node:18.20.0-alpine3.19 as base

ARG APP_PATH=/app
WORKDIR $APP_PATH

RUN npm install -g pnpm
RUN apk add --update python3 make g++ && rm -rf /var/cache/apk/*

COPY package.json $APP_PATH/package.json
COPY pnpm-lock.yaml $APP_PATH/pnpm-lock.yaml
COPY pnpm-workspace.yaml $APP_PATH/pnpm-workspace.yaml
COPY packages/server $APP_PATH/packages/server
COPY packages/webapp $APP_PATH/packages/webapp

RUN pnpm install
RUN pnpm build
RUN pnpm --filter ./packages/webapp export

FROM node:18.20.0-alpine3.19 as runner

ARG APP_PATH=/app
WORKDIR $APP_PATH

RUN npm install -g pnpm
RUN apk add --update python3 make g++ && rm -rf /var/cache/apk/*

COPY --from=base $APP_PATH/packages/server/dist ./dist
COPY --from=base $APP_PATH/packages/server/mongoose ./mongoose
COPY --from=base $APP_PATH/packages/server/resources ./resources
COPY --from=base $APP_PATH/packages/server/static ./static
COPY --from=base $APP_PATH/packages/server/view ./view
COPY --from=base $APP_PATH/packages/server/src ./src
COPY --from=base $APP_PATH/packages/server/.mongooserc.js ./.mongooserc.js
COPY --from=base $APP_PATH/packages/server/.npmrc ./.npmrc
COPY --from=base $APP_PATH/packages/server/tsconfig.json ./tsconfig.json
COPY --from=base $APP_PATH/packages/server/package.json ./package.json

RUN pnpm install --prod

EXPOSE 8000
CMD ["npm", "start"]

 ㅇ clone한 소스의 Dockerfile 내용이다.

 

ㅁ docker build

$ docker build -t heyform .

 ㅇ git source를 통해 build까지 테스트 해 보았다.

 

ㅁ 함께 보면 좋은 사이트

ㅇ HeyForm - 오픈소스 Form 빌더 

ㅇ git-heyform