라벨이 web인 게시물 표시

GitAction GoogleChat web hook 사용하기

이미지
 GitAction을 이용하여 Google Chat에 웹푸시를 할수 있습니다. 2024.01.26 현재 GitHub에서는 토큰을 이용하여 push/pull하기 때문에 해당 토큰이 적용이 되고 Git Action도 사용할수 있게 되어있어야 합니다. 자세한 내용은 공식 Document를 참고해 주시기 바랍니다. GitHub :  https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#issues Google Web Push :  https://developers.google.com/chat/how-tos/webhooks 먼저 GitHub계정과 Google 계정이 있어야 합니다. 사진1) 구글챗 화면 사진2) GitHub Repository 생성 사진3) Repository pull 사진4) git action 폴더 생성 git action을 실행하기 위해서는 루트 폴더에서 /.github/workflows 폴더 안에 .yml파일을 생성해야 합니다. # 워크플로우의 이름을 정의합니다. GitHub Actions 로그와 UI에서 이 이름이 표시됩니다. name : GitAction Google Chat application test # 이 워크플로우가 어떤 GitHub 이벤트에 의해 트리거될지 정의합니다. # 여기서는 'push' 이벤트와 'pull_request' 이벤트에 대해 워크플로우가 실행됩니다. on : [ push , pull_request ] # 워크플로우에서 실행할 작업을 정의합니다. jobs : build : # 워크플로우가 실행될 가상 환경을 지정합니다. 여기서는 Ubuntu 22.04를 사용합니다. runs-on : ubuntu-22.04 # 워크플로우에서 실행할 단계들을 정의합니다. steps : - name : Google Chat Notificatio...

AWS 1-WWW에 HTTPS웹사이트를 올리기(Route53, CloudFront, S3) - 구조 파악

이미지
 안녕하세요. 알렉스 입니다. 이번 시리즈는 AWS를 이용하여 https프로토콜이 적용된 웹사이트를 올리도록 하겠습니다. 일단 전체적인 구조와 흐름에 대해서 설명을 하도록 하겠습니다. 사진1) 이번 시리즈에서 구성된 개념도  사진1에 대한 간단한 설명으로 시작은 S3입니다. S3에 간단한 HTML, CSS, JavaScript로 작성한 코드를 저장합니다. 물론 index.html로 정적으로 웹사이트가 동작되어야 합니다.  다음 도매인을 구매합니다. 도매인 구매는 Route53에서 진행하도록 하겠습니다. 이후 구매한 도매인에 대한 인증서를 발급받기 위해서 AWS Certification에서 신청을 하고 이 모든것을 CloudFront에서 역어줄 것입니다.  나중에 작성하겠지만 CloudFront없이도 배포를 진행할수 있습니다. 하지만 이번에는 CloudFront를 이용하겠습니다.  CloudFront를 사용하는 이유는 S3의 데이터를 캐시에 넣고 전세계 AWS 리전과 고유가 되기 때문입니다. 사진2) 전세계 리전(참고용-정확하지 않음) AWS서비스는 전세계 여러곳에 데이터 센터가 있습니다. 만약 사진2번에서 1번(서울)에 베이스로 하는 웹사이트가 있는데 4번(미국서부)에사는 사람이 웹사이트에 접속할려고 합니다. 하지만 거리상 문제때문에 시간이 걸립니다.   하지만 CloudFront를 하용하게 되면 전세계에 존재하는 AWS 데이터 센터에 캐시가 등록이 됩니다. 그래서 실제 미국 서부에 살아도 서울까지의 긴거리를 연결할 필요없이 4번 리전에서 간단하게 캐시를 받아서 웹사이트를 진행하면 됩니다.  물론 단점도 있는데 서울에 있는 서버의 내용이 변경이 되면 바로 반영이 안됩니다. 수동으로 캐시를 업데이트하거나 정기 업데이트까지 기다려야 합니다. 그래도 이번 시리즈에서 간단한 배포이기 때문에 CloudFront를 사용하도록 하겠습니다.

NestJS에 Swagger(스웨거) Document(문서)를 적용 - API적용

이미지
 안녕하세요. 이번에는 CRUD를 코드로 작성하면서 동시에 Swagger를 적용해서 Swagger API문서를 작성하도록 하겠습니다. 일단 가장 기본적인 API문서를 만들어보겠습니다. nestjs을 설치시 자동으로 나오는 app모듈중 'app.controller.ts'에서 아래와 같이 코드를 수정합니다. import { Controller , Get } from '@nestjs/common' ; import { ApiResponse , ApiTags } from '@nestjs/swagger' ; import { AppService } from './app.service' ; // ApiTags는 해당 컨트롤러의 Root경로를 입력받습니다. @ ApiTags ( '/' ) @ Controller () export class AppController { constructor ( private readonly appService : AppService ) {} // ApiResponse는 해당 API가 응답 코드에 따른 설명을 작성합니다. @ ApiResponse ({ status : 200 , description : '정상적인 GET응답' , }) @ ApiResponse ({ status : 500 , description : '서버에러 발생시' , }) @ Get () getHello (): string { return this . appService . getHello (); } } ./src/app.controller.ts 웨 코드에서 'ApiTags', 'ApiResponse' 이 2개가 추가 됬다. 이 데코레이션은 해당 Document에 관련 API정보를 보내는 것이다. 그럼 실제 출력을 보자. 그림1) rootUrl:3...

NestJS에 Swagger(스웨거) Document(문서)를 적용

이미지
 이제 본격적으로 Swagger를 이용하여 자동 API Document를 작성하도록 하겠습니다. 기본적으로 nestjs가 설치됬다는 가정하에 진행을 하도록 하겠습니다. 만약 설치방법이 궁금하시면 아래 링크를 참고해 주시기 바랍니다. 링크 : NestJS 설치법 먼저 npm모듈을 설치합니다. npm i @nestjs/swagger swagger-ui-express copy 위 두개의 모듈은 각각 nestjs 지원 및 프런트 화면구성을 위한 swagger모듈 입니다. import { NestFactory } from '@nestjs/core' ; import { DocumentBuilder } from '@nestjs/swagger' ; // DocumentBuilder import import { AppModule } from './app.module' ; async function bootstrap () { const app = await NestFactory . create ( AppModule ); // Swagger Document를 설정 const options = new DocumentBuilder () . setTitle ( 'nest API' ) . setVersion ( '1.0' ) . build (); await app . listen ( 3000 ); } bootstrap (); 위의 코드와 같이 main.ts파일을 수정합니다. 위 코드에서 추가된 것은 DocumentBuilder class이며 이는 API문서를 만들기 위한 준비사항 입니다. 해당 문서의 제목(setTitle), 버전(setVersion) 그리고 빌드(build)를 합니다. import { NestFactory } from '@nestjs/core' ; import { DocumentBuilder...

Swagger(스웨거) Document(문서)가 필요한 이유

이미지
 안녕하세요. 알렉스 입니다. 이번에는 자동으로 문서를 생성해 주는 Swagger를 이용하여 API문서를 만들도록 하겠습니다.  백엔드에서 주요 업무중 하나는 API문서를 만드는 것입니다. 하지만 개발한 API를 다시 문서로 작성하기에는 상당히 많은 시간이 걸립니다. 또한 중간에 API가 변경이 되면 해당부분의 코드를 변경해야하지만 동시에 API문서를 최신화 해줘야 합니다.  위 그림과 같이 백엔드 개발자는 2가지 일을 갖이 처리하게 되는 일이 발생합니다. 그런데 API 개발을 하면서 동시에 문서작업도 가능한 npm모듈이 나오고나서 이러한 작업량이 상당히 줄었습니다.  코딩작업을 하면서 스웨거에 관련된 부분만 조금 추가를 하면 서버를 구동할때 따로 스웨거 API가 배정이 되서 열어볼수 있습니다.  이는 백엔드 개발자만 편한것이 아닌 API문서를 사용하는 모든 사람들한테 큰 도움이 됩니다. 항상 API문서를 최신으로 유지할수 있으며 API에 대해서 조건을 확인하기위해 매번 질문할 필요가 없게 됩니다.  이번은 자동 API 생성기의 필요성에 대해서 설명하고 다음부터 실제 NestJS을 이용하여 Swagger를 적용하도록 하겠습니다. (다음글)

node js를 localhost가 아닌 웹상에 직접 올리는 방법(PC이용)

이미지
 node js로 작업을 하다보면 항상 localhost:[포트번호] 로 진행하는 경우가 대다수이다. 물론 혼자서 작업을 한다면 상관이 없지만 협업을 하는 상황이면 Front-End와 Back-End 사이의 테스트를 진행해야 한다. AWS를 이용한 테스트는 복잡하고 시간이 걸리기 때문에 최종작업에서 시행하는게 낳다고 생각한다.  따라서 이번 글은 본인의 PC를 서버로 만들어 테스트 할수 있는 환경을 작성하도록 하겠다. const express = require ( 'express' ); // middleware const app = express (); const PORT = 5000 ; // 서버 체크 app . get ( '/' , ( req , res ) => { console . log ( "GET Request from Client" ); res . send ( '<h1>Server is Working</h1>' ) }) app . listen ( PORT , () => { console . log ( `Server is starting ${ PORT } ` ); }); 위는 매우 간단한 node js를 이용한 localhost서버를 만든 것이다.  포트는 5000번이며 GET요청을 할시 Client쪽에서는 'Server is Working'의 글자가 보이게 된다. 이제 현재 localhost:5000의 IP를 전세계 어디서나 접속할수 있는 웹으로 만들자. 먼저 Global로 localtunnel을 설치한다. - terminal: npm i -g localtunel localhost에서만 구동되는 5000포트를 전세계 web상으로 올린다.  'your url is : ' 이후에 나오는 웹 주소는 실제 전세계 어디서나 접속할수 있는 주소 이다. - terminal: lt --port 5000 처음 ...