전체 글 (393) 썸네일형 리스트형 [푸드피커] Github Actions 를 활용한 NodeJS 백엔드 배포 CI/CD 구축(With 국내 클라우드 플랫폼 Cloudtype ) 들어가기 전 | 배포 방향과 클라우드 타입 내부 동작 원리저번 시간에는 Github Actions 을 이용한 프론트엔드 배포를 시도하였습니다. 이번 시간에는 NodeJS Express 기반의 백엔드를 배포하려고 합니다. 배포에 사용되는 도구는 Github Actions 를 사용합니다. 배포 클라우드 플랫폼은 국내에서 활발하게 활동 중이고 가파르게 성장중엔 Cloud Type 을 이용할 예정입니다. 참고로 클라우드타입은 내부적으로 도커 컨테이너를 사용합니다. 깃허브 레포지토리에서 소스파일을 받아온 후 해당 파일을 도커 이미지로 만들고 생성된 컨테이너를 서버에서 실행하는 방식으로 동작합니다. 백엔드 레포지토리의 경우에는 공개된 저장소가 아닌 비공개 저장소에 접근하여 프로젝트를 배포 합니다. 이렇게 하는 이유.. [푸드피커] Github Actions 을 통한 AWS S3+CloudFront 배포 자동화 구축 [이전 포스트] AWS S3 + CloudFront 를 사용한 정적사이트 배포 [푸드피커] AWS S3 + CloudFront 를 활용한 정적사이트 배포시작에 앞서이번에 푸드피커 사이트를 S3와 Cloud Front 를 사용하여 배포를 해보았는데, 이에 대한 정리를 나름 간략하게 정리해보았습니다. 해당 포스트의 내용은 AWS 공식 문서와 유튜브의 배포duklook.tistory.com 들어가기 전 저번 시간에는 수동으로 S3 + CloudFront 배포를 진행했습니다. 이번에는 깃허브 액션을 통해 전 과정을 자동화하는 작업을 시도해 봅니다. 이 부분은 건너 뛰어도 문제 없습니다. 작업을 들어가기 전에 개념을 정리해보는 부분 입니다. 이번에는 이전 포스트에 배포한 리액트 프로젝트를 CI/CD 를 .. [푸드피커] AWS S3 + CloudFront 를 활용한 정적사이트 배포(ReactJS) 들어가기 전전체적인 과정 요약이번 포스트를 통해 S3 버킷을 생성 해보고, 수동으로 배포하는 테스트를 거친 후, Cloud Front 를 통해 S3 버킷에 저장된 데이터를 읽어와서 HTTPS를 적용한 정적 웹 사이트를 배포해볼 것입니다. 그리고 다음 연계 포스트에서는 해당 배포를 Github Actions 를 사용하여 자동화해볼 것입니다. 아래 이미지를 보면 빨간색 점선으로 표시된 영역이 오늘 수행할 작업입니다.시작에 앞서 몇 가지 주요 개념에 대하여 정리해보고 넘어가는 시간을 가져볼까 합니다. [더보기] 를 눌러서 참고해보세요. 도메인과 관련한 기초 개념더보기DNS(Domain Name System)는 도메인 이름을 IP 주소로 변환해주는 시스템입니다. DNS 레코드는 다양한 유형이 있으며, 각기 다른.. certbot 인증서 관련 명령어 모음집 포스트 목적배포 시 사용한 Certbox 을 이용한 SSL 인증서가 곧 만료된다고 하여 이참에 참고할 만한 명령어를 모아두고자 작성되었습니다.Certbot 설치운영체제에 따라 Certbot을 설치하는 명령어가 다릅니다. 일반적으로 다음과 같은 명령어를 사용합니다Ubuntu/Debian sudo apt updatesudo apt install certbotsudo apt install python3-certbot-nginx # Nginx 플러그인sudo apt install python3-certbot-apache # Apache 플러그인 CentOS/RHELsudo yum install certbotsudo yum install python3-certbot-nginx # Nginx 플러그인sudo.. CSS, JS를 이용한 웅장한 N-S(자석) 애니메이션 제작 [이전 애니메이션] 3D 카드 회전 애니메이션 HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기미리보기이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3D 로 구현해 봅니다. HTML 우선 HTML 을 아래와 같이 구성해줍니다. 부연설명을 해보자면, 3D 효duklook.tistory.com 미리보기해당 과정을 따라오시면 아래와 같은 놀라운 자석 애니메이션을 구현하실 수 있는 능력을 가지게 됩니다. 이번에 자바스크립트에서 투자되는 코드가 비중이 큰 편입니다. 요소를 동적으로 생성하고, 생성된 각 요소에 각도 변환을 이용한 자석 효과를 표현하기 위한 조치가 필요하기 때문입니다. [버전1] gap 과 자석의 수를 적당히 [버전2] 빼곡한 버전, 웅장함을 느낄 .. [푸드피커] 기능 구현 정리본 오늘의 명언 들어가기 전프로젝트를 진행하면서 구현한 기능들을 향후 재참고 하기 위한 혹은 포트폴리오를 위해 정리해두는 모음 형식의 포스트 입니다. 해당 기능 구현 목록은 2024.05.24 ~ 이후로 재개발에 들어가면서 변경된 혹은 추가된 로직에 대한 구현을 담고 있습니다. 참고로, 사용된 코드는 실제 프로젝트 코드와는 차이가 있을 수 있습니다. 해당 기능들이 프로젝트에서 구현된 모든 기능을 대변하지는 않습니다. 혹시나 이 글을 참고하시는 분이 있으시다면, 이러한 방식으로 작성하기도 하는구나 용도로 보시면 좋을 것 같습니다. 최대한 신경써서 작성하지만 제가 아는 수준에서 작성되는 만큼 코드의 퀄리티는 장담하지 못 합니다. 따라서 사용하시는 부분이 있다면, 직접 검증하셔서 필요한 부분만 재사용해도 좋을 것.. HTML,CSS 를 사용한 3D 카드 회전 애니메이션 만들기 미리보기이번에 만들어볼 애니메이션은 원의 중심축을 기준으로 카드가 회전하는 애니메이션을 3D 로 구현해 봅니다. HTML 우선 HTML 을 아래와 같이 구성해줍니다. 부연설명을 해보자면, 3D 효과를 적용하고, 카드의 중심축이 되어 실제 회전 효과를 구현하는데 사용되는 .container 요소와 각 카드를 표현하는 .card 요소들을 만들어줍니다. 그리고, 각 카드의 각도를 계산하는데 사용할 CSS 변수인 --i 에 각각 1 ~ 8 까지 값들을 순서대로 할당해 줍니다. CSSCSS 초기화 및 초기 설정이번에는 기초 셋팅으로 기본설정된 값을 초기화하고, container 요소를 수직-수평으로 중앙정렬 해보겠습니다.* { margin:0; padding:0; box-s.. HTML,CSS,JS 로 간단한 무한 슬라이드 만들기 3탄 이전 애니메니션 ※ 이 부분은 작성 예정입니다(사정상 순서가 뒤로 미뤄졌습니다.) HTML/CSS/JS 로 초간단 무한 슬라이드 갤러리 만들기 [2탄] (1탄 이후 작성예정)이전 애니메이션 | 1탄(작성중) HTML+CSS+JS로 초간단 무한 슬라이드 만들기 [1탄] (작성예정) duklook.tistory.com 미리보기HTMLCSSJSduklook.tistory.com 미리 보기이번에 구현하는 애니메이션은 이전 시간에 이어서 무한 슬라이드 입니다. 이전과 다른 점이 있다면, 이전 방식은 첫 번째 슬라이드의 이미지를 확대하는 방식이었다면, 이번 슬라이드는 가운데 슬라이드 카드를 기준으로 게단식으로 깊이감이 생기는 애니메이션 입니다. 진짜 별거 없으니 잠깐 시간내셔서 알고 가세요. 분명 쓰이는 곳이 많을.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 50 다음
