웹을 위한 구축은 항상 흥미로운 전망입니다. 이를 통해 개발자는 웹 애플리케이션을 구축할 수 있습니다. 사용하려는 프레임워크, 기술, 도구 및 철학을 선택할 수 있습니다.
그러한 철학 중 하나가 Jamstack입니다. 웹 개발 문제를 해결하기 위한 유연한 접근 방식을 제공합니다.
이 기사에서는 첫 번째 Jamstack 앱을 빌드하는 방법을 배웁니다. 시작하자.
목차
잼스택이란?
Jamstack은 웹용으로 사물을 구축하기 위한 새로운 웹 철학 중 하나입니다. 기술적으로는 개발자에게 구성 가능한 웹 아키텍처를 제공합니다. 동일한 목표를 달성하기 위해 프레임워크와 도구를 선택할 수 있습니다.
자세히 보면,
잼 + 스택 = JAM스택.
Jamstack은 세 가지 주요 구성 요소로 구성됩니다.
- 자바스크립트용 J
- 애플리케이션 프로그래밍 인터페이스(API)용 A
- 마크업의 경우 M
이 접근 방식은 비즈니스 로직을 데이터와 분리하여 웹 경험 계층을 분리합니다. 이점은 다음과 같습니다.
- 더 빠른 로딩 시간(거의 즉각적).
- 유연하고 신속한 개발 워크플로.
- 확장성 및 유지보수성 향상.
Jamstack에 대해 자세히 알아보려면 Jamstack for Newbies를 확인하세요.
잼스택의 역사
Jamstack은 비교적 새롭습니다. 2016년 Matt Biilmann은 회사 프레젠테이션에서 Jamstack을 소개하여 전통적인 경로를 거치지 않고 웹 사이트를 구축하는 방법을 전 세계에 보여주었습니다.
이 솔루션은 백엔드 서버 종속성과 애플리케이션 로직을 분리합니다. 따라서 대부분의 콘텐츠는 API를 통해 지원되고 액세스되는 동적 기능인 CDN이 있는 정적 파일을 통해 제공됩니다. 그리고 서버에서 동적 작업을 처리해야 하는 경우 최종 사용자가 액세스하기 전에 컴파일되어 CDN으로 푸시됩니다.
Jamstack의 역사를 더 잘 이해하려면 정적 및 동적 웹사이트를 살펴봐야 합니다.
- 정적 웹 사이트: 정적 웹 사이트는 서버에서 호스팅되지만 동적 측면은 없습니다. 인터넷의 초기 시대에 대부분의 사이트는 HTML, CSS 및 서버에 저장된 이미지를 제공하는 정적 웹사이트였습니다. 서버가 사용자의 요청을 처리하는 데 시간을 소비할 필요가 없고 항상 파일이 준비되어 있으므로 접근 방식이 빠릅니다. 그러나 아무 것도 변경할 수 있는 기능이 없으면 상호 작용이 발생하지 않습니다.
- 동적 웹사이트: 동적 사이트는 사용자의 요청을 처리하고 제공에 필요한 HTML을 생성하여 상호 작용을 제공합니다. 접근 방식은 느리지만 상호 작용의 이점을 추가합니다. 대부분의 최신 사이트는 동적 사이트입니다. 가장 좋은 예는 WordPress 기반 웹사이트입니다.
그런 다음 Jamstack 웹 사이트가 있습니다. 정적 사이트와 동적 사이트의 문제를 어떻게 해결했는지 알아보겠습니다.
Jamstack 웹사이트: 어떻게 작동하나요?
Jamstack은 두 가지 핵심 문제를 해결합니다.
- 동적 사이트의 느린 로딩 시간
- 정적 사이트 상호 작용
Jamstack 사이트는 빠른 정적 파일을 제공합니다. 그러나 API와 상호 작용하여 동적 콘텐츠를 제공할 수 있는 JavaScript도 포함되어 있습니다.
무대 뒤에서 정적 웹 페이지를 생성하는 무거운 작업을 수행하려면 정적 사이트 생성기가 필요합니다.
이러한 정적 웹 사이트 생성기는 Markdown을 사용하여 정적 웹 사이트를 제공합니다. 정적 사이트 생성기는 사용 가능한 HTML, CSS 및 JavaScript 파일에서 정적 파일을 생성합니다. 일단 개발되면 정적 사이트는 CDN을 통해 제공됩니다.
정적 파일을 제공하면 사이트가 거의 즉시 로드됩니다. 그러나 사이트에 동적 측면을 추가하려면 JavaScript에 의존해야 합니다. JavaScript 파일은 API에 연결하고 데이터베이스와 통신하여 동적 데이터를 추가할 수 있습니다.
최초의 Jamstack 웹사이트 구축
Jamtack은 자유를 제공하므로 Hugo, Gatsby, Next.js, Hexo 등을 포함한 모든 Jamstack 프레임워크/정적 사이트 생성기를 선택할 수 있습니다.
또한 읽기: JamStack을 위한 최고의 프레임워크
그리고 배포를 위해 GitHub Pages, Netlify, Azure Static Web Apps 등에 배포할 수 있습니다.
우리는 Hugo를 Jamstack 개발에 사용하고 Netlify를 사용하여 이 튜토리얼을 위한 사이트를 호스팅할 것입니다.
이 자습서에서는 웹에 대한 기본적인 이해가 있다고 가정합니다. 웹이 어떻게 작동하는지 알아야 합니다. 또한 Git 사용법도 알아야 합니다.
시작하자.
#1. 필수 구성 요소 설치: Go 및 Git
Hugo를 설치하려면 Git과 Go라는 두 가지가 필요합니다. 빌드 워크플로를 간소화하려면 Git이 필요합니다(나중에 Netlify에서 확인할 수 있음). Hugo가 기반으로 구축되었으므로 Go가 필요합니다.
Windows 11의 WSL 2에서 실행되는 Ubuntu를 사용하고 있습니다. Windows에서 직접 Ubuntu 커널에 액세스하고 있습니다.
또한 읽기: Windows 11과 Linux의 만남: WSL2 기능에 대한 심층 분석
운영 체제, Windows, Linux 또는 Mac을 선택할 수 있습니다.
힘내 설치
Ubuntu에서는 다음 명령을 실행하여 Git을 설치할 수 있습니다.
$ sudo apt update $ sudo apt install git
Windows의 경우 Windows 바이너리 설치 프로그램을 다운로드해야 합니다. 전체 Git 설치 가이드를 확인하세요.
Git이 올바르게 설치되었는지 확인하려면 다음 명령을 입력합니다.
[email protected]:~$ git --version git version 2.34.1
Go 설치
이제 Golang을 설치할 차례입니다. 이렇게 하려면 Linux에서 몇 가지 명령을 실행해야 합니다. 그럼 단계적으로 해봅시다.
1단계: 이전 Go 설치를 제거하고 로컬 Go 트리를 만듭니다.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
2단계: PATH 환경 변수 사용자 정의
내보내기 경로=$PATH:/usr/local/go/bi
3단계: 마지막으로 Golang이 올바르게 설치되었는지 확인합니다.
$ go version. #output go version go1.18.1 linux/amd64
이제 Hugo를 설치할 준비가 되었습니다!
휴고 설치
Homebrew 또는 Chocolately를 사용하는지 여부에 따라 다음 명령 중 하나를 사용해야 합니다.
홈브류의 경우:
$ brew install hugo
초콜릿을 위해:
$ brew install hugo -confirm
그리고 사용하지 않는 경우 소스에서 직접 설치할 수 있습니다.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Hugo가 성공적으로 설치되었는지 확인하려면 다음 명령을 실행하십시오.
$ hugo -version
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/koreantech.org/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms
#2. 휴고 사이트 만들기
Hugo는 사이트를 만드는 쉬운 방법을 제공합니다. 이렇게 하려면 다음 명령을 실행합니다.
$ hugo new site koreantech.org-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/koreantech.org-jamstack. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
#삼. Hugo 테마 선택
Hugo는 수많은 테마에 대한 액세스를 제공합니다. 이러한 테마는 프로젝트의 시작점을 제공합니다. 그리고 Hugo로 Jamstack 사이트를 구축하려면 테마가 필요합니다.
#4. Jamstack으로 중소기업 사이트 만들기
튜토리얼에서는 Hugo Hero 테마를 사용하겠습니다. 이 다목적 테마는 전체 너비 섹션 및 Markdown을 통한 포트폴리오 생성과 같은 기능을 제공합니다.
테마를 설치하려면 repo 링크를 복사하고 복제하십시오. 계속하기 전에 루트 디렉토리에 있는지 확인하십시오.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#output Cloning into 'themes/hugo-hero-theme'... remote: Enumerating objects: 1141, done. remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141 Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done. Resolving deltas: 100% (489/489), done.
기본 콘텐츠 복사
사이트에서 기본 콘텐츠를 사용하려면 다음 명령을 실행합니다.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
exampleSite 폴더의 콘텐츠를 사이트의 루트에 복사합니다.
Config.toml 파일 업데이트
다음으로 Config.toml 파일을 편집해야 합니다. 프로젝트 구성 정보를 저장하며 Jamstack 사이트가 작동하려면 올바르게 설정해야 합니다.
지금은 다음 줄을 편집해야 합니다.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
참고: 프로젝트가 진행됨에 따라 Config.toml 파일을 계속 업데이트해야 합니다. 또한 기본 콘텐츠를 사용하면 예제 콘텐츠를 수용하도록 Config.toml이 업데이트됩니다.
Jamstack 사이트 테스트
우리 사이트를 실행하려면, Hugo 명령으로 Hugo 사이트를 다시 생성해야 합니다.
$ hugo
다음으로 서버를 가동합니다. 이렇게 하려면 hugo serve 명령을 실행합니다.
$ hugo serve
#output [email protected]:~/koreantech.org$ hugo server port 1313 already in use, attempting to use an available port Start building sites … hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 | EN -------------------+----- Pages | 35 Paginator pages | 0 Non-page files | 0 Static files | 23 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0 Built in 71 ms Watching for changes in /home/nitt/koreantech.org/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/koreantech.org/config.toml Environment: "development" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at //localhost:42229/ (bind address 127.0.0.1) Press Ctrl+C to stop
참고: 귀하의 사이트는 이제 127.0.0.1에서 호스팅되고 사용 가능합니다. 어떤 이유로 열리지 않으면 옆에 제공된 대체 주소를 열어보십시오. 이 경우 localhost:42973입니다.
테마 기본 콘텐츠 편집
여기에서 기본 콘텐츠를 자유롭게 편집할 수 있습니다. Content 폴더로 이동하면 됩니다. 인덱스 페이지 콘텐츠를 편집해 보겠습니다. 이렇게 하려면 콘텐츠 > 작업 > Index.md로 이동합니다.
편집 후 모습입니다.
블로그 사이트 만들기
블로그만 만들려는 경우 적절한 테마를 선택해야 합니다. 이를 위해 Hyde 테마를 사용합시다.
새 사이트를 설정하는 방법과 유사하게 다음 명령을 실행해야 합니다.
$ hugo new site koreantech.org-jamstack $ cd koreantech.org-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
다음으로 Config.toml 파일을 편집하여 theme = ‘hyde’ 값을 추가합니다.
새 게시물 만들기
Hugo new 명령을 실행하여 새 게시물을 만든 다음 Markdown 파일을 실행해야 합니다.
$ hugo new hellogeekflare.md
#output [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created [email protected]:~/geefklare-jamstack$
게시물 편집
새로 생성된 hellogeefklare.md 게시물을 편집하려면 원하는 텍스트 편집기에서 hellogeekflare.md 파일을 엽니다.
다음 내용을 보여줍니다.
--- title: "Hello koreantech.org" date: 2023-05-04T11:39:10+05:30 draft: true ---
여기에서 Markdown의 모든 콘텐츠를 추가할 수 있습니다.
Markdown에 다음 콘텐츠를 추가해 보겠습니다.
### Hello, World! This is a new post created to show how easy it is to create **Jamstack website**. We’re using Hugo and Netlify to create our *basic Jamstack site*.
위의 콘텐츠를 .md 파일에 넣으면 아래와 같이 표시됩니다(편집기에 따라 Visual Studio Code를 사용함).
그러나 우리가 그것을 제공할 때 그것은 완전히 다르게 보일 것입니다.
참고: 초안 값을 “true”에서 “false”로 변경해야 합니다.
엄청난! 우리는 두 개의 Jamstack 웹 사이트, 하나의 소규모 비즈니스 사이트 및 다른 블로그를 만들었습니다.
사이트를 편집한 후, hugo 명령을 실행하여 파일을 생성할 수 있습니다. 파일을 생성하고 /public 폴더에 넣습니다.
$ hugo
#5. Netlify에 Jamstack 사이트 배포
사이트가 생성되었으면 배포해 보겠습니다. 이를 위해 Netlify를 사용할 것입니다.
Netlify는 귀하와 같은 사용자에게 빠른 사이트를 호스팅할 수 있는 CDN 지원 서비스입니다. Netlify를 Github와 연결하고 프로세스를 자동화할 수 있습니다. 페이월 뒤에 일부 기능이 포함된 무료 서비스입니다.
우리의 임무는 Netlify에 코드를 푸시하고 Netlify가 우리를 위해 모든 것을 처리하도록 하는 것입니다.
Git 리포지토리를 로컬로 설정
이제 Git 저장소를 설정할 차례입니다.
Git 리포지토리를 시작하려면 프로젝트의 루트에서 다음 명령을 실행합니다.
$ git init
다음으로 테마를 하위 모듈로 설정해야 합니다. 이것은 중요한 단계입니다. 기술적으로는 리포지토리 내에 하위 리포지토리를 생성합니다. (기억하세요, Hugo 테마에 git clone을 하셨습니까?). Jamstack 사이트를 더 잘 제어할 수 있습니다.
예를 들어 테마 업데이트를 다운로드할 수 있습니다. Netlify는 테마를 호스팅하기 위해 하위 모듈로 테마가 필요하기 때문에 이를 수행해야 합니다.
따라서 테마를 하위 모듈로 추가하려면 다음 명령을 실행하십시오.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/koreantech.org-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/koreantech.org-jamstack$
GitHub에 리포지토리 생성
로컬 설정이 완료되면 새 GitHub 리포지토리를 생성할 차례입니다.
만든 후에는 원본을 로컬 리포지토리에 추가해야 합니다.
$ git remote add origin https://github.com/logan99/koreantech.org-jamstack-tutorial.git
자, 당겨.
$ git branch -M main $ git pull origin main
새 커밋 만들기
이제 새로운 커밋을 만들 차례입니다. 다음 명령을 실행하여 모든 파일을 기본 분기에 추가하십시오.
$ git add .
이제 commit 명령을 실행하여 변경 사항을 커밋합니다.
$ git commit -m “First commit”
#Output [email protected]:~/koreantech.org-jamstack$ git commit -m "First commit" [main (root-commit) fa69ab2] First commit 21 files changed, 1135 insertions(+) create mode 100644 .gitmodules create mode 100644 .hugo_build.lock create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/hellogeekflare.md create mode 100644 public/404.html create mode 100644 public/apple-touch-icon-144-precomposed.png create mode 100644 public/categories/index.html create mode 100644 public/categories/index.xml create mode 100644 public/css/hyde.css create mode 100644 public/css/poole.css create mode 100644 public/css/print.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/hellogeekflare/index.html create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/index.html create mode 100644 public/tags/index.xml create mode 160000 themes/hyde
마지막으로 변경 사항을 GitHub에 푸시합니다.
$ git push --set-upstream origin main
참고: 작동하려면 GitHub 사용자 이름과 암호를 입력해야 합니다.
#6. Netlify 작업
훌륭합니다. 이제 저장소가 생성되었습니다. 이제 Netlify로 이동합니다. 이미 계정이 있는 경우 로그인하거나 새 계정을 만드십시오.
신규 계정의 경우 마법사가 즉시 실행됩니다. 그렇지 않으면 계정 대시보드로 이동합니다. 대시보드에 도착하면 사이트에서 “새 사이트 추가” 옵션을 클릭합니다.
새 사이트 추가에서 “기존 프로젝트 가져오기”를 선택합니다.
그런 다음 Git 공급자를 선택하라는 메시지가 표시됩니다. GitHub를 사용하므로 선택하겠습니다. Bitbucket, GitLab 및 Azure DevOps를 선택할 수도 있습니다.
그러면 모든 프로젝트가 나열됩니다. 여기에서 이 프로젝트에 대해 생성한 GitHub 리포지토리를 선택합니다. 우리에게는 “koreantech.org-jamstack-tutorial”입니다. 우리가 만든 다른 프로젝트를 업로드하도록 선택할 수도 있습니다.
그런 다음 배포할 분기를 선택하고 기본 빌드 설정을 선택하라는 메시지가 표시됩니다. 지금은 모든 것을 기본값으로 설정할 수 있습니다.
배포하려면 “Depoy Site”를 클릭하십시오.
이제 Netlify가 작업을 수행할 때까지 기다려야 합니다. 배포되면 “귀하의 사이트가 배포되었습니다.”라는 메시지가 표시됩니다.
이제 왼쪽 상단의 사이트를 클릭하십시오.
그러나 사이트가 올바르게 로드되지 않는 것을 알 수 있습니다. 이는 Config.toml 파일의 기본 URL이 올바르게 설정되지 않았기 때문입니다. Netlify가 새 프로젝트 URL을 생성했으므로 Config.toml 파일에 추가해야 합니다.
우리의 경우 사이트는 https://animated-beijinho-2baa8b.netlify.app/입니다.
즉, baseURL을 추가해야 합니다.
이렇게 하려면 로컬 설정으로 이동하여 값을 변경하십시오.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
변경 사항을 푸시하려면 다음 명령을 실행해야 합니다.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify는 똑똑합니다. 새 커밋을 감지하면 자동으로 사이트를 다시 배포합니다.
지금 사이트를 로드하면 완벽하게 로드됩니다.
우! 당신은 해냈습니다. 배울 것이 많다는 것을 압니다. 그러나 몇 번 해 보면 전체 프로세스가 직관적이라는 것을 알게 될 것입니다.
마지막 말
잼스택은 개발자의 새로운 시대를 열었습니다. 성능을 잠금 해제하고 사이트 배포 방식도 개선합니다. 잼스택은 Hugo, Netlify 등 우수한 생태계 구성원들과 함께 성장해 왔습니다. 의심 할 여지없이 여기에서만 성장할 것입니다.
다음으로 프런트엔드 애플리케이션을 Netlify에 배포하는 방법을 확인하세요.