Netlify는 웹 호스팅 서비스와 웹 애플리케이션 배포 및 관리를 위한 광범위한 도구를 모두 제공하는 클라우드 기반 플랫폼입니다.
이 플랫폼의 기능은 서버리스 기능을 통해 전용 서버 없이도 서버 측 코드를 실행할 수 있기 때문에 앞서 언급한 기능을 뛰어넘습니다.
배포를 위한 지속적 통합/지속 배포(CI/CD) 파이프라인 구성 프로세스
CI/CD 파이프라인과 깃허브 액션을 조사합니다: 개요
CI/CD 파이프라인은 소프트웨어 프로그램이 실제 운영으로 릴리스되기 전에 거치는 일련의 자동화된 프로세스입니다.
일반적인 CI/CD 파이프라인에는 소싱, 빌드, 테스트 및 배포 단계와 같은 몇 가지 중요한 단계가 포함됩니다.
언어 모델을 구성하고 배포하는 프로세스는 수동으로 수행하거나 자동화를 통해 수행할 수 있습니다. 언뜻 보기에는 수동 구현이 가능해 보일 수 있지만 자동화와 관련된 수많은 이점이 있어 매력적인 옵션이 될 수 있습니다.
사람이 실수할 확률을 줄이는 것은 다양한 작업에서 정확성과 신뢰성을 보장하는 데 있어 핵심적인 목표입니다.
릴리스 속도를 가속화합니다.
완벽한 소프트웨어 제공을 위한 원활하고 표준화된 프로세스 보장
GitHub Actions란?
GitHub 환경 내에서 필수 구성 요소로 작동하는 GitHub Actions 플랫폼은 사용자가 프로젝트 리포지토리 내에서 특히 코드를 통해 워크플로를 생성할 수 있는 사전 구성된 포괄적인 동작 모음을 제공하여 지속적인 통합 및 지속적인 배포 프로세스를 자동화할 수 있도록 합니다.
GitHub Actions는 개발자가 고유한 프로젝트 요구 사항에 맞는 사용자 지정 작업을 만들어 워크플로를 자동화할 수 있는 기회를 제공합니다. 이를 통해 애플리케이션을 빌드하고 릴리스하는 프로세스를 간소화하여 잠재적인 장애물이나 복잡성을 제거할 수 있습니다.
이 기능의 통합으로 새 커밋 발생과 같은 특정 상황에 대응하여 워크플로를 시작할 수 있으므로 필요할 때마다 CI/CD 파이프라인을 자동화할 수 있습니다.
Node.js 프로젝트 설정
시작하기 위해서는 Express 웹 서버를 구축해야 합니다. 이를 위해
mkdir express-netlify
cd express-netlify
Node 패키지 관리자(npm)를 사용하여 package.json 파일을 생성합니다.
npm init -y
궁극적으로 프로젝트 내에서 필수 구성 요소의 설치를 구현해야 합니다.
npm install express netlify-lambda serverless-http
netlify-lambda 패키징은 서버리스 함수 활용에 대한 로컬 호스트 테스트를 지원하는 역할을 하며, 서버리스-http를 통합하면 서버리스 함수 핸들러 호환성 내에서 사용하기에 적합한 Express.js 애플리케이션을 변환할 수 있습니다.
Netlify는 기본적으로 완전한 기능을 갖춘 백엔드 애플리케이션을 호스팅하고 실행하는 기능을 제공하지 않습니다. 대신 백엔드 작업을 관리하기 위한 적합한 옵션으로 서버리스 기능을 제안합니다.
앞서 언급한 함수는 서버 측 로직 실행, HTTP API 요청 처리, 동적 콘텐츠 생성을 담당하여 서버리스 아키텍처의 범위 내에서 백엔드 같은 기능을 제공합니다.
이 프로젝트의 코드는 GitHub 리포지토리에서 확인할 수 있습니다.
Express 웹 서버 생성
“dist”, “functions” 및 “src”.
Express 서버를 설정하기 전에 “dist” 디렉터리 내에 빈 index.html 파일을 생성하세요. 이 파일은 Netlify가 Express 애플리케이션을 효과적으로 배포하고 API 경로에 대한 액세스를 제공할 수 있도록 하는 플레이스홀더로 작동합니다.
“이제 src/app.js 파일을 생성하세요.” 대신 “새 소스 파일 ‘src/app.js’를 생성하고 다음 코드를 포함하세요.”와 같이 좀 더 공식적인 언어를 사용하는 것이 좋습니다.
const express = require("express");
const serverless = require("serverless-http");
const app = express();
const router = express.Router();
router.get("/", (req, res) => {
res.send("hello world!")
});
app.use(`/.netlify/functions/app`, router);
module.exports = app;
module.exports.handler = serverless(app);
주어진 코드는 Express 서버를 설정하고 GET 요청을 처리할 수 있는 루트 URL에 대한 단일 경로를 처리하도록 구성합니다. app.use` 함수를 사용하면 이 경로의 미들웨어가 Express 애플리케이션 내에 등록되므로, 프로덕션 환경인지 여부에 관계없이 `
결과적으로 “/api/auth”와 같은 새로운 URL 엔드포인트를 통합하는 경우 ”
앞서 언급한 기술을 통해 로컬 웹 서버의 유효성을 검사할 수 있으며 Netlify에서 익명의 상태 비저장 서버리스 함수로 함수를 쉽게 배포할 수 있습니다.
Netlify.toml 파일 정의
이 작업을 수행하려면 루트 디렉터리에 Netlify에 대한 특정 구성 설정이 포함된 “Netlify.toml”이라는 새 파일을 만들어야 합니다.지침에는 이 파일에 다음 코드를 추가해야 한다고 명시되어 있습니다:
[build]
base = "/"
command = "npm run build"
publish = "/dist/"
functions = "functions/"
[build.environment]
NODE_VERSION = "16"
[functions]
external_node_modules = ["express"]
node_bundler = "esbuild"
[[redirects]]
force = true
from = "/api/*"
status = 200
to = "/.netlify/functions/app/:splat"
[[redirects]]
from = "/*"
status = 200
to = "/index.html"
앞서 언급한 코드는 Netlify에서 호스팅되는 Express 애플리케이션의 구성 및 배포 규정을 설명합니다. 해당 규정에는 기초 폴더, 구성 순서, 게시 폴더 및 기능 폴더와 같은 지시문이 포함됩니다.
플러그인은 또한 Netlify 서버리스 함수에 대한HttpRequest API 요청 전송을 처리하기 위한 리디렉션 매개변수를 지정합니다.
패키지 파일 업데이트
“package.json” 파일을 열고 그 안에 있는 “스크립트” 객체 내에 앞서 언급한 지시문을 포함시켜 주세요.
"scripts": {
"start": "netlify-lambda serve src",
"build": "netlify-lambda build src"
},
이후 지침을 실행하여 로컬 컴퓨터에서 애플리케이션을 구성하고 시작합니다.
npm run build
npm run start
HTTP 요청을 전송하는 도구인 Postman을 활용하여 트위터의 애플리케이션 프로그래밍 인터페이스(API)를 사용해 보시기 바랍니다. 테스트를 시작하려면
Netlify에서 자동 배포를 위한 GitHub Actions 워크플로우를 구성하기 전에 GitHub 내에 리포지토리를 설정하고 Git을 사용하여 프로젝트 파일을 업로드합니다.
Netlify에 Express 애플리케이션 배포
ReactJS 앱에 대한 GitHub Actions 워크플로 구성을 진행하기 전에 먼저 API를 Netlify에 배포해야 합니다.
로 이동하여 계정을 생성하고 개요 페이지에 로그인한 후
에 따라 쉽게 수행할 수 있는 몇 가지 간단한 단계를 수행합니다.
앞서 언급한 디지털 웹사이트 아이콘을 클릭하면 그래픽 사용자 인터페이스를 통해 다양한 인터넷 기반 콘텐츠와 서비스를 열람하고 활용할 수 있는 온라인 플랫폼에 접속하라는 메시지가 표시됩니다.
‘Git에서 가져오기’ 버튼을 클릭한 후 선호하는 Git 공급자 플랫폼으로 GitHub를 선택합니다. 그런 다음 인증 자격 증명을 제공하여 계정과 프로젝트 리포지토리에 모두 액세스할 수 있는 권한을 Netlify에 부여해야 합니다.
리포지토리 목록에서 사용 가능한 옵션 중에서 익스프레스 프로젝트의 리포지토리를 선택합니다.
⭐ 리포지토리를 선택한 후에는 배포 프로세스에 대한 빌드 설정을 구성해야 합니다. Netlify는 애플리케이션 빌드에 사용되는 기술을 자동으로 감지하고 필수 빌드 설정으로 필드를 미리 채움으로써 이 프로세스를 단순화합니다. 이 경우 빌드 명령, 게시 및 함수 디렉터리가 해당됩니다. 
마지막으로 “사이트 배포” 버튼을 클릭하면 프로세스가 완료됩니다.
GitHub 작업 워크플로 만들기
프로젝트의 GitHub 리포지토리 내 작업 탭으로 이동하세요. 지속적 통합 섹션으로 이동하여 Node.js 워크플로 구성 옵션을 선택합니다.
이 명령은 GitHub 편집기에서 파일 이름을 “Netlify.yml”로 바꾸고 기본 Node.js 워크플로 텍스트를 제거한 다음 문장 뒷부분에 언급된 특정 지침 세트를 삽입하도록 지시합니다.
name: Build and Deploy to Netlify
on:
push:
pull_request:
jobs:
build:
runs-on: ubuntu-22.04
steps:
- uses: actions/checkout@v3
# ( Build to ./dist or other directory... )
- name: Deploy to Netlify
uses: nwtgck/[email protected]
with:
publish-dir: './dist'
production-branch: main
github-token: ${{ secrets.GITHUB_TOKEN }}
deploy-message: "Deploy from GitHub Actions"
enable-pull-request-comment: false
enable-commit-comment: true
overwrites-pull-request-comment: true
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
timeout-minutes: 1
워크플로우는 순서대로 수행되는 작업으로 구성되며, 각 작업은 특정 개인에게 할당됩니다. 워크플로의 진행 상황은 대시보드 또는 기타 모니터링 도구를 사용하여 추적할 수 있습니다. 작업은 여러 당사자의 입력이 필요할 수 있으며 완료되기 전에 승인 프로세스가 필요할 수 있습니다. 요약하자면, 워크플로우는 필요한 모든 단계를 수행하고 관련된 모든 사람이 자신의 책임을 인식하도록 설계되었습니다.
이 워크플로 프로세스에 설명된 절차를 시작하고 활성화하는 이벤트로 지정된 사전 정의된 규칙 또는 조건 집합입니다.
작업 섹션은 빌드 및 배포 이벤트를 모두 포함하여 특정 작업이 실행되는 상황을 간략하게 설명합니다.
지정된 작업이 대상 호스트의 운영 환경에서 실행됩니다.
특정 작업 또는 프로젝트를 실행하는 데 필요한 작업의 순차적 진행을 설명하는 일련의 지침을 ‘단계’라고 합니다.
입력 매개변수는 효과적으로 실행할 수 있는 작업을 설명합니다.
‘환경’으로 표시된 워크플로 설정 섹션은 워크플로를 성공적으로 실행하는 데 필요한 환경 변수를 정의합니다.
궁극적으로 이러한 변경 사항이 이 파일에 저장되었는지 확인합니다. 이 작업으로 인해 GitHub의 워크플로가 자동으로 시작됩니다.
초기 구축 단계에서는 배포 사이트 식별자 및 Netlify의 인증 토큰을 포함하는 특정 기밀 파라미터 세트를 워크플로에 추가해야 합니다. 이러한 필수 세부 정보를 얻으려면 Netlify 내의 사이트 설정으로 이동하여 사이트 ID를 확보하세요.
사용자 프로필 아이콘을 클릭하고 드롭다운 메뉴에서 “사용자 설정”을 선택하여 본인 인증을 하세요. 그런 다음 “애플리케이션” 섹션으로 이동하여 “새 액세스 토큰”을 클릭하여 인증 토큰을 받습니다.
두 개의 환경 변수인 NETLIFY\_SITE\_ID 및 NETLIFY\_AUTH\_TOKEN을 GitHub 리포지토리의 환경 변수 및 리포지토리 비밀 섹션에 모두 추가하세요. 이 단계에 따라 워크플로를 다시 실행합니다.그러면 넷플라이 배포 프로세스가 이 파이프라인을 통해 향후 업데이트를 자동으로 게시합니다.
[Netlify 사이트 URL]/.netlify/functions/app
GitHub Actions와 Netlify로 CI/CD 파이프라인 구성
Netlify의 서버리스 기능을 사용하면 플랫폼을 통해 프론트엔드 및 백엔드 기능을 모두 통합하는 포괄적인 웹 애플리케이션을 배포할 수 있습니다.
GitHub Actions를 활용하여 CI/CD 파이프라인을 설정하면 애플리케이션의 구축 및 배포를 자동화할 수 있는 우아한 솔루션을 제공합니다. 워크플로우를 정의함으로써 초기 컨셉부터 배포 단계에 이르기까지 원활하고 신뢰할 수 있는 개발 여정을 가능하게 합니다.