hongkyu_mr_chu.log

Docker + Git Actions

Mon, 12 Feb 2024 13:57:21 GMT

깃 허브에서 Actions를 누른다.

공식 독스 https://docs.github.com/en/actions/quickstart

docker-image.yml 파일을 작성합니다.

배포할 브랜치 정하기

name: Deploy Next.js App

on:
  push:
    branches:
      - main

JOBS

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3

jobs: 작업(job), 작업은 하나 이상의 단계steps로 구성됩니다.
build-and-deploy: 작업의 이름!
runs-on:: 이 작업이 실행될 환경, ubuntu-latest 제 서버는 Oracle Ubuntu 입니다.
uses: actions/checkout@v3: 이 단계는 GitHub 리포지토리를 체크아웃하여 작업을 실행하는데 필요한 파일들을 가져옵니다. actions/checkout 라이브러리를 사용하고 있습니다.
- actions/checkout@v1 를 하면 아래와 같은 경고 정도 받을 수 있습니다.
  
  Node.js 16 actions are deprecated. Please update the following actions to use Node.js 20:
- 라이브러리의 최신을 여기서 확인할 수 있습니다.
  
  https://github.com/actions/checkout

env 파일 설정

.env 파일을 만들어줍니다.
- secrets는 Settings ⇒ Actions secrets and variables 에서 환경변수처럼 만들 수 있습니다.
- .env 파일을 만들고 변수를 설정합니다.

- name: Create .env file
  run: |
     touch .env
     echo "NEXT_PUBLIC_API_KEY=${{ secrets.NEXT_PUBLIC_API_KEY }}" >> .env
     echo "NEXTAUTH_SECRET=${{ secrets.NEXTAUTH_SECRET }}" >> .env
     echo "NEXTAUTH_URL=${{ secrets.NEXTAUTH_URL }}" >> .env
     echo "GOOGLE_CLIENT_ID=${{ secrets.GOOGLE_CLIENT_ID }}" >> .env
     echo "GOOGLE_CLIENT_SECRET=${{ secrets.GOOGLE_CLIENT_SECRET }}" >> .env

Docker 설정

Set up Docker: Docker를 설정, docker/setup-buildx-action@v3 액션을 사용하여 Docker를 설정. 이것은 Docker 빌드를 위한 도구인 Buildx를 설정하는 데 사용됩니다.
- 최신 릴리즈가 v3인 것으로 보입니다.
  
  https://github.com/docker/setup-buildx-action
```
  - name: Set up Docker
    uses: docker/setup-buildx-action@v3
```
Login to DockerHub: Docker Hub에 로그인, docker/login-action@v3 액션을 사용하여 Docker Hub에 로그인합니다. 이 때 사용자 이름과 비밀번호가 필요하며, 여기서는 GitHub Secrets에 저장된 값들을 사용합니다.
- 최신 역시나 v3이다.
- DOCKER_USERNAME = “이 값은 Docker 허브에 가입했을때 프로필에 username 입니다.”
- DOCKER_PASSWORD = “이 값은 Docker 허브에서 토큰을 설정해서 나온 토큰값입니다.”
  
  https://github.com/docker/login-action
```
  - name: Login to DockerHub
    uses: docker/login-action@v3
    with:
      username: ${{ secrets.DOCKER_USERNAME }}
      password: ${{ secrets.DOCKER_PASSWORD }}
```
Build and push Docker image: Docker 이미지를 빌드하고 Docker Hub에 푸시(push)하는 단계입니다. docker/build-push-action@v3 액션을 사용하여 이미지를 빌드하고, 푸시합니다. 여기서 사용되는 옵션들은 다음과 같습니다:
- context: Docker 빌드 컨텍스트를 지정합니다. 보통 현재 디렉토리를 의미하는 .을 사용합니다.
- file: 사용할 Dockerfile의 경로를 지정합니다.
- push: 이미지를 푸시할 것인지 여부를 나타내는 부울 값입니다. 여기서는 true로 설정되어 있으므로 이미지를 푸시합니다.
- tags: 빌드한 이미지에 지정할 태그를 지정합니다. 여기서는 GitHub Secrets에 저장된 Docker 사용자 이름을 포함한 태그를 사용합니다. 보통은 username/repository:tag 형식으로 사용됩니다.
- DOCKER_USERNAME = “이 값은 Docker 허브에 가입했을때 프로필에 username 입니다.”
```
  - name: Build and push Docker image
    uses: docker/build-push-action@v3
    with:
      context: .
      file: ./Dockerfile
      push: true
      tags: ${{ secrets.DOCKER_USERNAME }}/nextjs-app:latest
```

Docker Login - GitHub Marketplace

Deploy to Server

서버에 배포하는 단계입니다. appleboy/ssh-action@master 액션을 사용하여 SSH를 통해 서버에 접속하고, 배포 스크립트를 실행합니다. 이 때 사용되는 옵션들은 다음과 같습니다

- name: Deploy to Server
  uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.SERVER_IP }}
        username: ${{ secrets.SERVER_USER }}
        key: ${{ secrets.SERVER_SSH_KEY }}
        script: |
          cd 경로
          docker pull ${{ secrets.DOCKER_USERNAME }}/nextjs-app:latest
          docker stop nextjs-app || true
          docker rm nextjs-app || true
          docker run -d --name nextjs-app -p 80:3000 ${{ secrets.DOCKER_USERNAME }}/nextjs-app:latest

host: 서버의 IP 주소를 지정합니다.
- SERVER_IP = “이 값은 서버 ip 입니다.”
username: 서버에 접속할 때 사용할 사용자 이름입니다.
- SERVER_USER = “서버 만들 때 사용했던 이름”
key: SSH 키를 지정합니다. 이것은 서버에 접속하기 위한 인증에 사용됩니다. 보통은 SSH 키의 내용을 secrets에 저장합니다.
- SERVER_SSH_KEY = “-----BEGIN OPENSSH PRIVATE KEY----- 부터 -----END OPENSSH PRIVATE" (개인 키 열어보시면 요런 형태)
script: 서버에 실행할 스크립트를 정의합니다. 이 스크립트는 서버에서 실행됩니다. 여기서는 다음과 같은 작업들이 수행됩니다:
- cd 프로젝트 위치
- docker pull ${{ secrets.DOCKER_USERNAME }}/nextjs-app:latest: Docker Hub에서 최신 이미지를 다운로드합니다.
- docker stop nextjs-app || true: 실행 중인 Docker 컨테이너를 중지합니다. 만약 해당 컨테이너가 실행 중이지 않다면 에러가 발생하지 않도록 true를 추가하여 무시합니다.
- docker rm nextjs-app || true: 중지된 Docker 컨테이너를 제거합니다. 마찬가지로 에러를 무시합니다.
- docker run -d --name nextjs-app -p 80:3000 ${{ secrets.DOCKER_USERNAME }}/nextjs-app:latest: 새로운 Docker 컨테이너를 실행합니다. 여기서는 포트 80으로 외부와 통신할 수 있도록 설정되어 있습니다.

빌드 과정 확인

파일을 업데이트 되면 빌드 배포 과정을 아래 그림처럼

~~vercel, 젠킨스, 넷틀리파이처럼~~ 실패 한 부분을 확인 할 수있다.

Docker + NEXT.js

Fri, 09 Feb 2024 14:02:04 GMT

😄이 글은 Oracle + 우분투로 서버를 구축한 상태에서 시작합니다.

마이그레이션 이유: Vercel:504

최근 프로젝트를 Vercel에 배포하게 되면 로컬 로그인, 로컬 회원가입이 504 Gateway Timeout 오류를 반환하였습니다.

문제의 원인은 Vercel의 무료 플랜과 관련된 자원 제한이 주요 원인 중 하나로 추정되었습니다. 실제로 Vercel Pro 플랜으로 업그레이드 한 후, 문제가 해결되었습니다.

Vercel: Serverless functions have a timeout of only 10 seconds (300 seconds if you upgrade to pro plan)

위의 글에서 볼수 있듯이 Vercel의 무료 플랜에서는 서버리스 함수의 실행 시간이 10초로 제한됩니다. 그래서 제 해결책은 자체 서버를 구축하여 데이터베이스 요청의 처리 속도와 효율성을 향상시키는 것입니다.

도커 설정법

Docker 설치를 위한 패키지 업데이트
```
 sudo apt-get update
```

필요한 패키지 설치

 sudo apt-get install apt-transport-https ca-certificates curl software-properties-common

Docker의 공식 GPG 키 추가

 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

Docker 저장소를 APT 소스에 추가

 sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

Docker 패키지 업데이트 및 설치

 sudo apt-get update
 sudo apt-get install docker-ce

Docker가 정상적으로 설치되었는지 확인
```
 sudo docker run hello-world
```
Docker 이미지 빌드
- 폴더 만들어주시고 깃 클론으로 프로젝트 가져옵시다.
- .env 파일도 꼭 설정해주시고요.
- Dockerfile도 있어야합니다.
```
mkdir project
cd project
git clone ‘url’
```
```
sudo docker build -t nextjs-app .
```
Docker 컨테이너 실행
- 본인은 nginx포트가 80을 이미 사용중이여서 변경하였습니다.
```
sudo docker run -d -p 3000:3000 nextjs-app
sudo docker run -d -p 80:3000 nextjs-app
```
- 자신의 컨테이너를 확인하고 싶다면
```
sudo docker ps
```
- 컨테이너 이름 또는 ID로 여러가지를 할 수 있다. stop,remove
```
sudo docker stop 컨테이너
sudo docker rm 컨테이너
```
Oracle Cloud Infrastructure의 VCN 설정

포트 80을 외부 접속 개방하기

Security List
- Source CIDR: 0.0.0.0/0, 모든 IP에서 오는 요청
- IP Protocol: TCP
- Destination Port Range: 80, 개방할 포트
```
sudo docker run -d -p 80:3000 nextjs-app
```

이제 브라우저에 IP주소로 접속시 프로젝트를 잘 확인할 수 있습니다.
가비아에서 도메인을 삽니다. (이벤트 하는 이름으로 사면 좀더 싸요.)
DNS 관리 ⇒ DNS 설정 ⇒ 도메인을 연결 ⇒ 레코드 추가

| A | @ | 당신의 ip 주소 |
| --- | --- | --- |
| CNAME | www | ott-we-t.com. |

http:ott-we-t.com 접속

다음은 Git Actions를 활용해서 자동배포 https://velog.io/@hongkyu_mr_chu/Docker-Git-Actions

dangerouslySetInnerHTML did not match

Wed, 24 Jan 2024 05:51:26 GMT

문제 발단

OTT 공유 플랫폼 [We T] 프로젝트 (간단하게 게시판)에서 게시글에 html 태그를 이용하여 스타일을 더 하기로 하였다. 글쓰기의 에디터영역에서 글을 작성할때 html태그를 포함한 형태로 DB에 보냈다. 홈영역에서 게시글을 미리보기로 보여주고 있는데 이 부분에서 문제가 발생하였다.

문제 인식

오류를 확인해 보면 dangerousSlysetInnerHTML' did not match. Server: '' Client: '<>'

서버(Server)에서 pre-rendering 된 html은 “” 이고 클라이언트(Client)는 “<> 왓챠 …” 이런식이니 서로 일치하지 않고 있다는 소리이다.

We T 프로젝트의 홈 ‘/’ 인덱스 페이지는 아래 그림처럼 SSG로 정적 생성된 페이지이다.

getStaticProps로 데이터를 이용한 정적 생성을 하고 있다.

export const getStaticProps = async () => {
  let client = await connectDB;
  const db = client.db('forum');
  let data = await db.collection('post').find().toArray();
  return { props: { data: JSON.parse(JSON.stringify(data)) } };
};

그렇다면 사전 렌더링을 하는 과정에서 문제가 있는 것일까? DB에 html 태그에 클로징 태그 가 빠진 것이 있는지 체크해보았다. 하지만 이 문제도 아니였다.

첫번째 시도 - SSR : false

const ListComponent = dynamic(() => import('components/home/ListComponent'), { ssr: false })

인덱스에 있는 컴포넌트를 사전 렌더링(pre-rendering)하지 않기로 하였다. 이렇게 하니까 mis match가 일어나지 않았고 오류가 사라졌다. 하지만 이렇게 클라이언트 단에서만 존재하게 되면 SEO에 좋지 않고 초기 렌더링도 길어질 수 있다.

자 이제 남들은 대체 어떻게 했는지 찾아보자…

HTML5

나는 마크업 퍼블리싱 일도 많이 했고 링크드인 HTML5테스트도 통과하여 HTML을 좀 안다고 생각하였다.

인터넷을 통해 알게 된 사실은 나는 아직도 HTML에 대해 무지 하다는 것이다. https://www.w3.org/TR/html401/struct/text.html#h-9.3.1

W3C(W3에서) p 태그에 대해 이렇게 말하고 있다.

HTML에서

요소의 종료 태그는 생략될 수 있는데, 이는

요소가 address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, 또는 ul 요소에 바로 이어질 경우, 혹은 부모 요소에 더 이상의 콘텐츠가 없고 그 부모 요소가 요소가 아닐 경우에 해당합니다.

요소는 문단을 나타냅니다. 이 요소는 블록 레벨 요소(자기 자신인

포함)를 포함할 수 없습니다. 저희는 작성자들이 빈

요소를 사용하는 것을 권장하지 않습니다. 사용자 에이전트는 빈

요소를 무시해야 합니다.

실습으로 확인해보자. 내가 이렇게 마크업을 한다면

hello
mr.chu

이렇게 출력된다. p태그 안에 div 와 같은 요소가 들어오면 p 태그는 종료 태그가 만들어진다.

결론적으로

태그는 블록 레벨 요소를 포함할 수 없고 빈

태그의 사용을 권장하지 않는다.

문단이 단독으로 콘텐츠를 포함하고 있음을 명확하게 하기 위해서다.
마크업을 피하고, 콘텐츠의 의미와 구조를 더 명확하게 하기 위함이다.

결론

내가 겪은 오류는 next.js의 pre-rendering 된 부분과 client 에 렌더링 된 부분이 일치 하지 않았던 것이고 이 문제의 해결법은 dangerouslySetInnerHTML을 잘못 사용했거나 SSG사용 방식이 잘못되었던게 아니라

마크업에 대한 이해가 부족했던 것이고 해결책은 dangerousSlysetInnerHTML를 쓸때는 **div 태그 안에 쓰는게 좋을것이다.**

font.json 최적화(글리프 압축)

Sat, 30 Dec 2023 15:05:00 GMT

포인트(문제 해결법)

필요한 글자 모양(glyph)을 정리하자.
Json 파일에 필요한 문자만 남기고 지우자.

문제 발단

근래 포트폴리오(모음) 사이트를 업데이트 하면서 3D 텍스트를 넣었습니다. 라이브러리가 추가된 만큼 성능 개선을 하던 중

프로젝트에 사용되는 글자 모양은 ‘M’, ‘r’, ‘.’ ‘C’, ‘h’, ‘u’일 뿐인데…

Pretendard.json 파일(11.3MB)의 용량을 줄일 수 없을까?라는 생각이 들었습니다.

웹 폰트에서도 글리프 압축이 존재하니까요. Pretendard.json 파일을 확인해 보니 웹폰트 처럼 글리프 속성으로 모양을 정하고 있었습니다.

오호 그렇다면 여기서 내가 필요한 것들만 두고 필요없는 것들을 제거하면 되겠다는 생각이 들었습니다.

const modifiedGlyphs = {};  //수정된 글리프를 저장할 곳

for (let i = 0; i < targetText.length; i++) {
    const char = targetText[i];
  const charKey = char in fontData.glyphs ? char : char.toUpperCase();
  if (charKey in fontData.glyphs) {
     modifiedGlyphs[charKey] = fontData.glyphs[charKey];
  }
}

변수 fontData에 폰트를 담고 반복문을 통해서

대,소문자를 먼저 체크하고

charKey가 fontData.glyphs 객체에 존재하는 키라면, 해당 글리프를 modifiedGlyphs 저장합니다.

잘될 것이라 생각했는데, 만들어낸 json 파일은 오류가 났습니다. 알고 보니 Pretendard.json 파일에는 글리프 말고도 다른 여러 속성들이 필요합니다.

속성은 폰트마다 다를수도 있으니 글리프가 아닌 속성들은 그대로 복사해 가져와야 겠습니다.

const modifiedFontData = {
    ...fontData,
  glyphs: modifiedGlyphs
};

11.3MB 에서 5KB 까지 줄였네요.!

혹시 나중에도 변환 코드를 사용할지 모르니까, 깃허브에 배포해놨습니다. https://chuhongkyu.github.io/font-json/

CSR 페이지 전환 모션 (Recat Router v6.4)

Sat, 25 Nov 2023 07:56:25 GMT

구현 링크 (https://4mryxj.csb.app/)

안녕하세요

이 글에서는 리액트 라우터 돔v6.4 createBrowserRouter에서 페이지 전환시 어떻게 framer-motion의 exit를 활용하는지 이야기 해보려 합니다.

_ Exit animations AnimatePresence works by detecting when direct children are removed from the React tree. Any motion components contained by the removed child that have an exit prop will fire that animation before the entire tree is finally removed from the DOM. Note: Direct children must each have a unique key prop so AnimatePresence can track their presence in the tree._

AnimatePresence는 React 트리에서 직접적인 자식이 제거될 때 작동합니다. 그렇기 때문에 트리에서 존재 여부를 추적할 수 있도록 고유한 key 속성을 가져야 합니다.

그래서 페이지 전환시 AnimatePresence의 자식 요소가 변했다는것을 알려주기 위해 자식요소로 Layout을 만들어 pathname으로 key값을 줍니다.

NEXT.js 예시

//Root

  
    
         
    


//Layout
export default function Layout({children}:LayoutComponent) {
    return (
        
            {children}
        
    );
}

BrowserRouter

그렇다면 리액트 라우터 돔에서는 어떻게 해왔을까요? 중첩 라우팅 예시를 확인해 보겠습니다.

//Root

   
      } />
      } />
      } />
  


//Home
export function Home() {
    const location = useLocation()
    return(
        <>
        
        
        
           
             } />
             } />
             } />
             } />
             } />
             } />
           
        
        
    )
}

Data Api가 존재하지 않는 BrowserRouter 컴포넌트로 작업할 때 Routes에 key로 location.pathname를 할당하는 형식으로 작업 했습니다.

그러나 (createBrowserRouter)

v6.4부터 data Api를 지원하는 createBrowserRouter로 작업해야 하는 경우가 생겼습니다.

An should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

하위 경로 요소를 렌더링하려면 상위 경로 요소에서 를 사용해야 합니다. 그래서 아래와 같이 구성 합니다.


//Root
const router = createBrowserRouter(routerInfo)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
     
  
);

//router.js 
export const routerInfo = [
    {
      path: "/",
      element: ,
      errorElement: ,
      children: [
        {
            path: "home",
            element: ,
            errorElement: error,
            children: [
              {
                  path: "resume",
                  element: ,
              },
              {
                 path: "detail/:id",
                 element: ,
                                 loader: getDetailPage
              },
...

//Home
export function Home() {
    const location = useLocation()
    return(
        <>
        
        
        
           
        
        
    )
}

그렇다면 이제 어디에 키를 주어 AnimatePresence의 트리에 변화를 알릴까요?

Outlet에 key 값을 줘봅시다.

export function Home() {
    const location = useLocation()
    return(
        <>
        
        
        
           
        
        
    )
}

React Developer Tools를 보면 Outlet에 key 값이 들어갔지만 framer-motion에 exit가 일어나지 않습니다.

Outlet은 대체… 무엇일까?

interface OutletProps {
  context?: unknown;
}
declare function Outlet(
  props: OutletProps
): React.ReactElement | null;

[v6] First-class animation primitives · remix-run/react-router · Discussion #8008

링크에 글을 보고 알게 된 것은

Outlet은 location이 변경될 때마다 다음에 렌더링할 컴포넌트를 찾아 렌더링하는 역할을 합니다. Outlet 자체는 내부적으로 상태를 유지하지 않고, location이 변경되면 해당 위치에 따라 매번 렌더링을 수행합니다.

Outlet은 단순히 중첩된 라우트 트리에서 현재 위치에 해당하는 하위 라우트를 찾아 렌더링하는 것이라는 겁니다.

따라서 Outlet은 상태를 가지지 않고 location에 의존하여 동적으로 컴포넌트를 렌더링하는 역할을 합니다. 상위 컴포넌트에서 location이 변경될 때마다 Outlet은 해당 위치에 따라 다음에 렌더링할 컴포넌트를 찾아 렌더링합니다.

그렇다면 우리는 어떻게 해야하는가?

function AnimatedOutlet() {
  let [context] = useState(useOutlet());
  return context.outlet;
}

글에서 처럼 useOutlet()을 사용하여 AnimatedOutlet 컴포넌트를 활용합시다.

const AnimatedOutlet = () => {
  const o = useOutlet();
  const [outlet] = useState(o);

  return <>{outlet};
};

AnimatedOutlet의 역할은

현재 라우트의 Outlet을 가져오기: useOutlet을 호출하여 현재 라우트에 해당하는 Outlet 컴포넌트를 얻습니다.
상태로 Outlet 관리: useState를 사용하여 outlet을 상태로 관리합니다. 이는 리액트 컴포넌트의 상태로써 outlet이 변경될 때마다 컴포넌트가 리렌더링되도록 합니다.
UI에 Outlet 렌더링: JSX에서 {outlet}을 통해 현재 라우트에 해당하는 Outlet 컴포넌트를 렌더링합니다. 이로써 현재 라우트의 컴포넌트가 동적으로 표시됩니다.

요약

React Router v6.4 최신버젼에서 Data Api 지원하는 createBrowserRouter를 사용할 때 Outlet 컴포넌트를 사용하게 되는데 Outlet은 라우트가 변경될 때마다 단순히 새로운 컴포넌트를 렌더링합니다. 그래서 Outlet을 상태관리하는 AnimatedOutlet을 만들고 key 값을 사용하여 AnimatePresence가 라우트 변경을 감지하도록 합니다. 이로써 라우트 변경 시에 리마운트를 통한 애니메이션(exit) 효과를 얻을 수 있습니다.

코드 소스

아래는 아래와 같은 뎁스가 있는 화면전환을 코드샌드박스에 올려 놨습니다.

index
- home
  - login
  - more
- mypage

hongkyu_mr_chu.log

Docker + Git Actions

깃 허브에서 Actions를 누른다.

배포할 브랜치 정하기

JOBS

env 파일 설정

Docker 설정

Deploy to Server

빌드 과정 확인

Docker + NEXT.js

마이그레이션 이유: Vercel:504

도커 설정법

dangerouslySetInnerHTML did not match

문제 발단

문제 인식

첫번째 시도 - SSR : false

HTML5

결론

font.json 최적화(글리프 압축)

포인트(문제 해결법)

문제 발단

CSR 페이지 전환 모션 (Recat Router v6.4)

안녕하세요

NEXT.js 예시

BrowserRouter

*그러나 (createBrowserRouter) *

Outlet은 대체… 무엇일까?

AnimatedOutlet의 역할은

요약

코드 소스

그러나 (createBrowserRouter)