[AWS] 티스토리 API 없이 크롤링하여 Lambda를 활용한 실시간 최신 블로그 포스트 보여주기

티스토리 크롤링

사실상.. 예전부터 실시간으로 티스토리에 블로그 올리면 자동으로 개인 홈페이지에도 나오면 좋겠다는 생각을 많이 했슴다. 근데 이게 티스토리 API가 막히면서 되게 복잡해졌다고 해요. 그래서 저는 원초적이고 가장 기본적인 방법인 크롤링을 활용해보면 좋을 것 같다고 생각했어요. 

그래서 저는 파이썬 코드로 웹 크롤링 코드를 작성해봤는데, 이게 제 블로그에 들어가서 직접 크롤링할 부분의 태그를 직접 찾아야 하더라구요.. 이게 생각보다 오래걸렸던 것 같아요. 그리고 사람마다 태그 이름이 달라서 그거를 직접 찾아야 합니다. 방법을 알려드릴게요.

크롬에서 크롤링 할 홈페이지에 들어간 다음 -> 오른쪽 상단에 땡땡떙 누른 후 -> 도구 -> 개발자 도구를 클릭해서 확인하면 됩니다.!!

개발자 도구 찾는법

개발자 도구

import json
import requests
from bs4 import BeautifulSoup

def lambda_handler(event, context):
    blog_url = 'https://mrkite.tistory.com/'
    num_posts = 3

    response = requests.get(blog_url)
    response.raise_for_status()
    soup = BeautifulSoup(response.text, 'html.parser')

    titles = soup.select('.title a')
    dates = soup.select('.metainfo time.text-h-400')
    thumbnails = soup.select('.thumbnail')

    titles = titles[:num_posts]
    dates = dates[:num_posts]
    thumbnails = thumbnails[:num_posts]

    posts = []
    for title, date, thumbnail in zip(titles, dates, thumbnails):
        post_title = title.get_text().strip()
        post_date = date.get_text().strip()
        post_href = title['href']
        if not post_href.startswith('http'):
            post_href = blog_url.rstrip('/') + '/' + post_href.lstrip('/')
        img_tag = thumbnail.find('img')
        post_img_src = img_tag.get('src') or img_tag.get('data-src')
        posts.append((post_title, post_date, post_href, post_img_src))

    html_content = '<h3 class="latest-posts-header">Latest Blog Posts</h3><ul class="latest-posts-list">'
    for title, date, href, img_src in posts:
        html_content += f'<li class="latest-posts-item"><a href="{href}" target="_blank" class="latest-posts-title"><img src="{img_src}" alt="{title}" class="latest-posts-thumbnail">{title}</a><span class="latest-posts-date">{date}</span></li>'
    html_content += '</ul>'

    return {
        'statusCode': 200,
        'headers': {
            'Content-Type': 'text/html',
            'Access-Control-Allow-Origin': '*'  # CORS 헤더 추가
        },
        'body': html_content
    }

 

이건 제가 Lambda에 넣을 때 사용할 파이썬 코드를 만들었습니다. 제가 가져올 건 블로그 제목, 날짜, 그리고 썸네일 사진 주소, 게시물 주소 였습니다. 그래서 이렇게 해서 다 가져왔습니다. 실제로 로컬에서 파이썬을 테스트 해봤을 때 정상적으로 잘 떠서 이대로 사용하기 결정했습니다!! 

 

Lambda에 함수 코드 올리기 

사실 이 부분도 오류가 생각보다 많이 떠서 뭐가 문제인지 한참 고민했던 것 같아요.. 여기서 키포인트는 외부 라이브러리가 설치되어 있지 않아서 생기는 문제였습니다... 

Response
{
  "errorMessage": "Unable to import module 'lambda_function': No module named 'requests'",
  "errorType": "Runtime.ImportModuleError",
  "requestId": "{}",
  "stackTrace": []
}

 

이 오류 해결하는 방법 알려드릴게요! 

 

Lambda Layers를 사용하여 requests 모듈을 추가하는 방법이 있습니다. 하지만, 저는 BeautifulSoup 모듈도 없었기 때문에 둘 다 설치한 케이스입니다..  

 

1. Zip 파일을 생성해서 올려야 하기 때문에 로컬 환경에서 requests 라이버리를 포함한 패키지와 beautifulsoup4 라이브러리를 포함한 패키지를 만들어 줍니다. 

mkdir python
pip install requests -t python/
pip install beautifulsoup4 -t python/
zip -r requests-bs4-layer.zip python

 

2. Lambda 콘솔에서 Layer를 생성합니다.

계층 생성

Layer name은 편한대로 만드시면 되는데, 저는 requests-bs4-layer로 설정하였습니다. 그리고 아까 만들었던 requests-bs4-layer.zip을 업로드 해주고, 호환 런타임에서 python 3.10을 선택합니다. 

 

3. 아까 생성한 Lambda 함수를 클릭해서 들어간 다음에 Layer를 추가합니다.

Add a Layer

 

사용자 지정 계층을 누르고, 아까 생성해 놨던 requests-bs4-layer를 선택합니다. 그리고 버전을 선택한 뒤 추가를 해줍니다. 

 

4. Lambda 함수 테스트

 

아까와 같이 모듈 설치가 안되었다는 문구가 안뜨고 성공적으로 나오는 모습을 확인할 수 있었습니다. 

 

 

Html, Css, Javascript를 살짝 수정해주니까 성공적으로 나오는 모습까지 볼 수 있었습니다!! 꽤나 시간이 오래걸렸습니다.. 하지만.. 다시 한번 갓람다.. 진짜 크롤링부터 거의 실시간으로 가져오는 모습을 보고.. 너무 신기했습니다. 사실 블로그를 이렇게 작성하는 것도 적었을 때 이제 저기 최신 3개에 이 블로그도 나오는지가 너무 궁금하고, 저 처럼 이거 도전해보고 싶으신 분들에게 도움이 되고자 적어봤습니다.

사실 설명이 너무 허접..  하지만... 그래도 언제든 댓글로 질문해주시거나 제가 잘못 이해한 부분이 있다면 언제든 편하게 말씀해주세요!

 

추가 오류 해결 부분

제가 로컬에서 잘되는 것을 확인하고 이제 S3에 올려서 실제로 업데이트를 진행했는데.. 이게 웬걸.. 바뀐게 안뜨는 겁니다.. 그래서 찾아보니까 S3에 업로드하고 CloudFront를 통해 배포할 때 변경 사항이 반영되지 않는 문제는 주로 캐시 문제라고 합니다.

 

CloudFront는 캐시를 사용하여 성능을 최적화하므로, 새로 업로드한 파일이 바로 반영되지 않을 수 있어서, 캐시를 무효화하여 최신 파일이 반영되도록 할 수 있도록 하였습니다.

1. CloudFront로 이동한 뒤 무효화 생성을 클릭합니다.

CloudFront

2. 객체 경로에 /*를 입력하여 모든 파일의 캐시를 무효화합니다. 그리고 무효화 생성 버튼을 눌러줍니다.

 

3. 성공적으로 업데이트 된 모습을 확인할 수 있습니다.