rexondex's blog

본 글은 EC2 Amazon Linux 2(AL2) 인스턴스 생성 및 연결된 이후의 백엔드 배포 과정입니다.

1. 제가 배포할 express 서버는 5050포트를 사용하므로 5050 포트 Anywhere IPv4 인바운드 규칙 추가했습니다

2. 깃허브에 푸시돼있는 프로젝트를 내려받기 위해 Git을 사용할 것입니다. Git을 설치합니다.

sudo yum install git -y

3. 깃허브에 업로드돼있는 저장소를 git clone해서 AL2에 받아옵니다.

4. 처음에는 node와 npm이 안깔려있어서 설치합니다

# NVM 설치 (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# NVM 로드 (터미널 재시작하거나 아래 명령 실행)
source ~/.bashrc
# 또는
source ~/.profile

# 최신 LTS 버전 Node.js 설치
nvm install --lts
nvm use --lts

# Node.js 및 npm 설치 확인
node -v
npm -v

# 버전이 출력되면 설치완료

5. 이제 npm install을 사용할 수 있습니다.

클론한 프로젝트 루트로 이동하고 npm install 합니다.

6. 프로젝트를 빌드합니다.

npm run build

7. npm start해서 실행되는지 확인합니다

제 경우 `Server listening on port 5050`이 출력되는 것을 확인했습니다.

8. 퍼블릭IP주소를 복사합니다.

9. 주소창에 [퍼블릭IP주소]:[포트번호] 로 접근 가능합니다.

접속되는지 확인해봅니다.

10. 배포 성공입니다

AWS EC2 - AL2 인스턴스 생성하고 브라우저로 접속 확인까지의 과정을 정리했습니다.

1. ec2 인스턴스 생성

2. 인스턴스 유형 선택

3. 네트워크 설정 선택

4. 스토리지 구성 선택

5. 연결하기

6. EC2 인스턴스 연결

7. 백엔드 서버 구성하고 실행하기

(참고) Express 서버 AmazonLinux2에 클론하고 설치한 과정을 정리해두었습니다

8. `[퍼블릭IP주소]:[포트번호]` 로 접근 가능합니다.

AWS EC2 Amazon Linux 2 인스턴스 생성하고 웹서버를 올려 브라우저에서 접속 확인까지 마쳤습니다.

먼저 배포중이던 [RakaFeed](https://rakaso598.github.io) 라는 피드형 게시판이 있었는데, 포트폴리오나 개발 현황 등을 구체적으로 정리하고 공유하기 위해 새로운 포트폴리오 페이지를 만들었습니다.

이번 포트폴리오 배포 페이지는

[나의 개발 포트폴리오](https://rakaso598.github.io/portfolio/) 라는 제목으로 정했습니다.

빠른 로딩속도와 간편한 조작을 위해 HTML,CSS,JS로 이루어진 단일 html 파일로 구성했습니다.

그리고 RakaFeed에 있던 gnb를 가져와 portfolio 페이지에 적용시켜, 두 배포페이지 간에 자유롭게 이동할 수 있도록 했습니다.

또 깃허브, 블로그, 방명록 등 다른 메뉴들도 유지시켜 일관적인 기능과 디자인을 이용할 수 있도록 구성했습니다. 

아래는 진입 화면의 모바일 너비 스크린샷입니다.

그리고 스크롤을 내려보면 기술 스택 키워드와 연락망을 정리해둔 구역도 있습니다.

그리고 조금 더 넓은 태블릿 너비 정도의 화면에서도 적절한 크기로 화면이 잘 보이는 걸 확인할 수 있습니다.

포트폴리오를 위한 정적 페이지를 배포해 보았습니다.

앞으로도 여러 결과물을 정리해갈 것입니다.

그리고 각 카드를 클릭하면 상세 포트폴리오 페이지로 이동시키는 확장 아이디어를 떠올려 보기도 했습니다.

GitHub Pages를 통해 배포한 포트폴리오를 확장하여, 개발 결과물을 언제 어디서든 쉽게 접근하고 설명할 수 있도록 상세 페이지 연결 기능을 추가하고 지속적으로 발전시켜 나갈 계획입니다.

rakaso598.github.io

깃허브에는 `유저명.github.io` 리포지토리를 통해 정적 웹페이지를 배포하는 기능이 있습니다.

이번에 유저명 저장소를 업데이트 한 겸, 후기를 작성합니다.

HTML로 전체적인 구조를 정의하고 `/` 루트 위치에 배치했습니다.

`/images` 에는 이미지가 들어가도록,

그리고 `/items`에는 게시물을 담당하는 데이터를 넣었습니다.

`/items/items.json` 파일은 게시물의 데이터를 표현합니다.

이렇게요!

JSON은 문자열 데이터 포맷으로, 문자열을 구조화하여 저장합니다.

가장 큰 틀을 대괄호로 감싸고 중괄호로 게시물을 구분하게 했습니다.

중괄호 `{}`안에는 키와 값으로 구분되도록 데이터를 정리하면 됩니다.

    [
        {
            "id": 4,
            "author": "rakaso598",
            "profile_image": "/images/profile1.jpg",
            "content": "제 블로그도 방문해주시겠어요? ✨ 👉 <a href='https://rexondex.tistory.com/' target='_blank'>바로가기</a>",
            "image": "/images/post3.png",
            "timestamp": "2025-01-26 21:35"
        }
    ]

가장 최근 게시물 구조는 이렇게 생겼습니다.

`게시물 id, 작성자, 프로필 이미지의 경로, 게시물 내용, 게시물 이미지, 타임스탬프`

를 직접 정의할 수 있습니다.

제 경우는 자동화되어있진 않아서 `/images`에 직접 이미지를 저장한 후,

`/items/items.json`을 직접 수정하는 방식으로 게시물을 작성하고 있습니다.

json 파일은 내용을 구분하기도 쉽고 사람이 읽기에도 가독성이 좋아서

`items.json`을 열어 간단하게 텍스트를 작성하면 바로 게시물이 작성된다는 점은

직관적이며 편리한 것 같습니다!

최대한 깔끔하고 단순하게, 가독성이 좋아보이도록 했습니다.

그리고 이번 배포에선 최대한 경로를 간결하게 만드는 걸 목표로 삼았습니다.

깃허브 블로그 배포하는 방법 중에 Jeykll(지킬) 이라는 도구가 있습니다.

오픈소스 정적 웹사이트 생성기라고 설명되어 있는데요.

다른사람들이 만든 테마를 적용하는 것도 가능하고,

깃허브에서 포크를 통해 저장소를 가져와 편리하게 배포할 수도 있습니다.

편하게 미리 디자인된 테마를 적용하고, 블로그를 업데이트 할 수 있다는 점은 좋았으나

단점으로는, 테마 제작자마다 블로그 구성 방법이 다르기때문에

게시물을 작성하기 위해 정해진 파일을 직접 수정해줘야한다는 점.

또 업데이트가 멈춰 제대로 동작하지 않는 테마도 있으며,

섬세하게 구성되어 있는 테마의 경우, 건드렸을 때 문제가 생기면 복구하는게 힘들었습니다.

그럼에도 미리 디자인된 테마와 빠른 배포를 생각한다면 매우 좋은 기능이라고 생각합니다.

다만, 제 경우 경로가 복잡하게 보이기 시작하면 블로그를 작성하기 힘들어질 때가 많았습니다.

그리고 잔오류로 게시물 하나 작성하는데 외부요인을 정리하느라 시간을 더 많이 할애한 적도 있습니다.

그래서 이번 배포에서는, 최대한 간단하면서 유지보수가 쉬운 방법을 생각하며 HTML로 만들어봤습니다.

루트에 `index.html`을 두고, 이미지와 아이템 2가지 디렉토리로만 구성했습니다.

게시물을 작성하기 위해서는 `items.json`을 열어 중괄호 안에 데이터를 입력하기만 하면 됩니다.

이미지를 추가하려면 이미지 디렉토리에 이미지를 추가시킨 후,

`items.json`에 이미지 파일의 경로와 파일명만 추가시키면 자동으로 적용 배포됩니다.

제 계정을 도메인으로 하는 기본 웹페이지인 만큼,

최대한 간단하며, 소식 위주로, 그리고 날짜와 사진, 텍스트와 같은 기본적인 요소들을 통해

로딩이 빠르고, 접근이 쉬우며, 하이퍼링크를 활용해

바로바로 새 페이지를 띄울 수 있는 메인화면을 구성했습니다.

페이스북이나 인스타그램과 같은

타임라인형, 또는 피드형 게시판 아이디어를 떠올리고,

제 요구사항에 맞게 간결하게 구성한 결과,

의도한 정적 웹페이지를 성공적으로 배포할 수 있었습니다.

https://rakaso598.github.io/xlsx-generator/

자바스크립트 탐색 중 CSV라는 데이터 포맷에 대해 알게 되었고, 이를 활용하여 파일을 제작하고 다운로드하는 기능을 만들 수 있을 것이라는 아이디어를 떠올렸습니다.

CSV 포맷은 데이터를 콤마(,)로 구분하는 간단하고 직관적인 방식으로, 이를 자바스크립트에서 처리하는 것은 비교적 용이한 작업이라고 예상했습니다.

자바스크립트는 이미 JSON 파싱 및 직렬화 기능을 갖추고 있어, 문자열을 다루는 함수 구현에 있어 충분한 기반을 제공하고 있었기 때문입니다.

이러한 배경을 바탕으로, 사용자로부터 입력 받은 데이터를 CSV 파일로 변환하는 프로토타입을 제작한 뒤, 이를 발전시켜 브라우저에서 다운로드할 수 있는 .xlsx 엑셀 파일로 내보내는 기능을 추가했습니다.

그리고 GitHub Pages에 배포하여, 사용자가 엑셀 파일을 다운로드할 수 있는 웹 애플리케이션을 구현했습니다.

• CSV 포맷: CSV는 데이터를 텍스트 파일로 간단하게 저장할 수 있는 방법입니다. 특히 엑셀 파일을 다룰 때 유용하게 사용됩니다.
• 자바스크립트의 역할: 자바스크립트는 문자열을 다루는 데 강력한 기능을 제공하여 CSV 형식의 데이터를 쉽게 처리하고, 이를 엑셀 파일로 변환합니다.
• GitHub Pages 배포: GitHub Pages를 통해 사이트를 간단히 배포하여 사용자가 엑셀 파일을 다운로드 할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel 파일 다운로드</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.2/xlsx.full.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .input-container {
            margin-bottom: 15px;
        }

        .input-container label {
            font-size: 16px;
            display: block;
            margin-bottom: 5px;
        }

        .input-container textarea {
            width: 100%;
            padding: 0px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            resize: vertical;
        }

        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
        }

        .btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Excel 파일 제작하기</h1>
    <div class="input-container">
        <label for="csvData">각 행은 줄 바꿈으로 구분하고, 열은 쉼표로 구분하세요.</label>
        <textarea id="csvData" rows="10" placeholder="예: 이름,나이,직업"></textarea>
    </div>
    <button class="btn" onclick="downloadExcelFromInput()">Excel 다운로드</button>
</div>

<script>
    function generateExcelData(data) {
        // 데이터 배열을 Excel의 워크북 형식으로 변환
        const ws = XLSX.utils.aoa_to_sheet(data); // 2D 배열을 워크시트로 변환
        const wb = XLSX.utils.book_new(); // 새로운 워크북 생성
        XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 워크북에 시트 추가
        return wb;
    }

    function downloadExcel(data, filename = 'data.xlsx') {
        const wb = generateExcelData(data); // Excel 파일 생성
        XLSX.writeFile(wb, filename); // 파일 다운로드
    }

    function downloadExcelFromInput() {
        const inputData = document.getElementById('csvData').value.trim();
        
        if (!inputData) {
            alert('데이터를 입력해 주세요!');
            return;
        }

        // CSV 입력 데이터를 줄 바꿈으로 나누고, 쉼표로 각 열을 나눕니다.
        const rows = inputData.split('\n').map(row => row.split(','));
        
        downloadExcel(rows); // Excel 파일 다운로드
    }
</script>

</body>
</html>

https://animista.net/play/text/tracking-in/tracking-in-expand

↑ ↑ ↑

Animista 에서는 미리 정의된 CSS 애니메이션을 쉽고 빠르게 사용할 수 있도록 도와줍니다.

FreeBSD 라이선스를 가지고 있으므로 자유롭게 사용할 수 있지만, 원 저작자의 저작권을 꼭 명시하여야 합니다.

CSS/JS를 사용해 애니메이션 효과를 하나하나 작성하고 있기는 힘든 부분이 많습니다.

대신 코드를 복사하여 사용하는 것만으로 빠르게 깔끔한 애니메이션을 구현할 수 있었습니다.

https://rakaso598.github.io/gh-art-gallery/

↑ ↑ ↑

온디맨드 애니메이션을 적용한 깃허브 페이지입니다.

첫 로드시 애니메이션이 적용됩니다.

https://rakaso598.github.io/dodge-the-bullets/

[ 여기서 플레이 해보세요! ]

자바스크립트의 오픈소스 라이브러리인 Phaser.js를 활용했습니다.

2D 이미지를 활용한 간단한 게임을 만들때 편리하고 유용한 것 같습니다.

Phaser.js에서는 간편하게 설정할 수 있는 중력과 백그라운드 화면 개념, 그리고 스프라이트 이미지도 사용할 수 있습니다.

백그라운드 화면 기능은 Phaser.js에는 특정 함수가 작동할때 미리 정의된 맵으로 현재 맵을 덮는 기능입니다.

예를 들면, 캐릭터가 이동하여 포탈에 닿으면 미리 정의된 맵이 넘어오는(현재 맵을 덮어쓰는) 것과 비슷한 맥락입니다.

Phaser.js는 간단한 게임들을 구현하기에 용이하게 설계된 것 같습니다.

PC에서는 키보드 방향키를 사용하여 캐릭터를 이동하면 됩니다.

모바일 화면에서는 화면에 나오는 방향키 이미지를 클릭하여 캐릭터를 조작하면 됩니다.

캐릭터 이미지는 도트 캐릭터 이미지인데 GPT한테 만들어달라고 했습니다. (64x64 픽셀 png)

장애물 이미지는 그림판으로 주황색 네모 이미지를 작게 만들어서 넣었습니다. (2x2 픽셀 png)

index.html가 있는 경로에 player.png와 bullet.png를 같이 두면 index.html를 켤때 이미지도 같이 로드합니다.

Setting -> Pages 에서 main 브랜치를 선택했습니다. 이 브랜치를 배포합니다.

[ 깃허브유저명.github.io/리포지토리명 ] 에서 렌더링된 html를 확인할 수 있습니다.

깃허브 리포지토리를 GitHub Pages 기능을 이용하여 깃허브 도메인을 가진 정적 웹페이지로 빠르게 배포할 수 있었습니다.

https://github.com/rakaso598/dodge-the-bullets

↑ ↑ ↑

소스코드는 여기에 (index.html)

https://rakaso598.github.io/memory-match-game/

[ 여기서 게임을 플레이해 보세요!/PC 모바일 모두 지원 ]

게임 룰: 게임 시작 버튼을 누르면 2초간 전체 카드를 보여줍니다.

같은 알파벳이 적힌 카드를 순서대로 클릭하면 뒤집어놓을 수 있습니다.

모든 카드를 뒤집으면 게임 승리입니다. 클리어하는데 걸린 시간을 확인할 수 있습니다.

리셋 버튼을 누르면 초기 설정으로 돌아갑니다. 다시 게임 시작 버튼을 눌러 새로 게임을 시작합니다.

깃허브 리포지토리를 GitHub Pages 기능을 이용하여,

깃허브 도메인을 가진 정적 웹페이지로 빠르게 배포할 수 있었습니다.

https://github.com/rakaso598/memory-match-game/tree/main

↑ ↑ ↑

소스코드는 여기에