뭐하는 내용이죠?

react 샐플로 랜딩페이지를 만들어, 가지고 있는 도메인이 있어서 publish까지 해봤습니다. netflify사용법을 좀 잊어서 복습해야 했지만, 그렇게 어렵지 않습니다.

이번 예제는 오픈소스로 react landing template을 다운로드 받아서 수정해보고 netlify에 deploy합니다.

왜 이걸 하려구요?

왜 생각했는가 하면, 많은 분들이 static html로 된 사이트를 하나 가지고 있으면서 수정해보고 publish하는 것에 많은 부담을 가지고 있기에, 이렇게 하면 간단합니다 하고 이야기 하기 위해서였습니다.

사이트 만드는 것이 이렇게 간단한데, 데모용으로 ppt나 slide를 간단히 만드는 방법도 생각해 봐야겠습니다.

전체 순서

• react 템플릿 다운로드 받아서 수정해보고 빌드 확인하기
• github.com이나 gitlab.com에 코드 올리기
• netlify.toml작성하기
• custom domain 설정하기
• let’s encrypt 설정하기

사실 방법을 알면 쉽습니다. 어떻게 하면 되는 지 머리속으로 이미지화 할 수 있으면 부담이 덜 됩니다.

해보지 않은 부분이 실행에 허들이 됩니다. 이 부분을 넘기만 하면 완성하기 수월합니다.

react 템플릿 다운로드, 수정, 빌드, 코드 올리기

수정해서 코드 올리는 것까지 함께해도 내용이 그렇게 많지 않아서 함께 했습니다.

저는 여기에서 react를 사용하는 template를 clone했습니다.
https://github.com/issaafalkattan/React-Landing-Page-Template

ajax의 장점이 데이타와 디자인을 분리할 수 있는 것이죠. 이 랜딩페이지는 data.json 의 내용을 수정하는 것으로, 페이지의 customizing이 가능합니다.

react는 또 컴포넌트로 context를 분리 할 수 있는 것이 장점이기 때문에, 디자인의 재구성, 추가, 삭제도 수월합니다.

다운로드, 수정, 빌드, 업로드 하는 코드는 다음과 같습니다.

git clone https://github.com/issaafalkattan/React-Landing-Page-Template goldapi.tkim.info
git remote remove origin
git remote add origin https://github.com/crowdy/goldapi.tkim.info
git add -A 
git commit -m "initial upload"
git push

시험삼아 로컬에 실행해 봅니다.

yarn start

빌드만도 문제가 없는 지 확인해 봅니다.

yarn build

netlify.toml작성하기

netlify.toml없이도 디플로이 설정을 하는 것은 그렇게 어렵지 않습니다.
또 netlify.com 에서는 package.json이 있으면 그 내용을 확인해서 deploy한 디렉토리와 커맨드를 제안해 줍니다.

이 hugo blog, tkim.info에서 사용하는 toml은 다음과 같습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

[build] 
  publish = "public"
  command = "hugo --gc --minify"

[context.production.environment]
  HUGO_VERSION = "0.73.0" # if older, use format: 0.53 (no trailing zero)
  HUGO_ENV = "production"
  HUGO_ENABLEGITINFO = "true"
  
[context.branch-deploy.environment]
  HUGO_VERSION = "0.73.0" # if older, use format: 0.53 (no trailing zero)

[context.deploy-preview.environment]
  HUGO_VERSION = "0.73.0"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

사실 [build]부분만 있어도 됩니다.

그러면 goldapi.tkim.info를 만들기 위한 부분은 다음과 같이 됩니다.

1
2
3

[build] 
  publish = "build"
  command = "yarn build"

custom domain 설정하기

저는 저희 회사의 onamae.com 에서 도메인을 구입했기때문에 서브도메인 설정은 이쪽을 사용했습니다.

netlify.com에서는 서브도메인인 경우 cname을 설정하라고 얘기해줍니다.

let’s encrypt 설정하기

netlify.com에서 버튼을 하나 누르는 것만으로 설정이 가능합니다. 도메인 설정만 제대로 되어 있다면 금방 됩니다.

결과 페이지입니다.

goldapi.tkim.info

느끼는 점

이 부분은 늘 느낍니다.

• 코드를 받아서 빌드하는 것은 그렇게 어렵지 않습니다.
• 또 stackoverflow.com에서 복사해서 만드는 것은, 찾는 과정이 어렵지, 적용은 어렵지 않습니다.
• 하지만 그 사용자에게 전달하는 문구를
  • 사용자가, 이 페이지를 방문한 사람에게, 알기쉽게(이해하기 쉽게),
  • 사용해 보고 싶은 마음이 들도록 작성하는 것은 시간이 훨씬 더 들어갑니다.
  • 제가 써놓고도 좀처럼 스스로 만족스럽지도 않습니다.
• 그러니 “(어려운) 코드는 (내가) 만들었으니, (쓰기 쉬운) 문구만 수정하면 돼” 라는 말은, 참으로 주의해야 할 말입니다.
• 문장은 많이 준비해 놓고, 연습해 두어야 할 것 같습니다.
  • 그래서 저는 마케팅 문구를 수집하고 있습니다.
  • 그런데 준비해둔 문구들과 템플릿 페이지의 구성이 맞지 않네요.

netlify는 server-side 로직을 넣을 수 없습니다. 기본적으로 static html 을 보여주니까요. javascript가 움직이는 곳은 server-side가 아니고 browser-side이기 때문에 logic을 넣을 수 없습니다.

• 지금은 netlify에서 AWS의 function을 이용한 방법을 제공하고 있다고 합니다.
• plugin을 이용한 방식이라고 합니다만, AWS를 이용할 기회가 좀 처럼 없어서(자회사의 VM 서비스를 이욯가는 경우가 많아서), 아직 경험해 보지 못했습니다.
• 만일, DB라던지 연결하지 않더라도 간단한 script정도 실행할 수 있는 server-side CGI라도 실행될 수 있다면,
  • 물론 보안상 굉장히 어려운 일이겠습니다만,
  • Container를 이용한다면, 그리고 이용 비용을 제공할 의사가 있다면, 가능하지 않을까요?
  • 물론 어느 정도 managed된 guest OS여야 하니까 infra쪽에서는 번거로워집니다만.

마무리 멘트입니다만, 웹 application이 api를 통해서 데이터를 받아 렌더링하는 것은 일반 모바일 어플리케이션에서도 많이 사용하는 방식입니다. 이 api를 사용하는 방식에 익숙해 지면, 인터페이스는 어느 것을 사용하더라도 원하는 정보를 얻을 수 있습니다. 이 페이지를 방문하시는 분들 모두 즐거운 프로그래밍 하시길 바랍니다.

ref

• netlify.toml document
• goldapi.tkim.info