마이크로CMS와 Deno(Aleph.js)로 조금 더 미래의 WEB 사이트 개발
하지만 어느 정도 형식적이기 때문에 그리 멀지 않은 미래일 수도 있다.
Aleph.js와 마이크로CMOS로 간단한 WEB 사이트를 만들어 봤다.
개발한 사이트는 다음과 같은 간단한 사이트다.
이 글에서 소개한 Aleph.js는 현재 2021/7/3, v0입니다.3.0-alpha.33 및 알파 버전🙏
Deno 프레임 Aleph.js
이번에는 Deno제 SSG 프레임워크 Aleph입니다.js로 웹 페이지를 만들었습니다.Aleph.와 js는 Next입니다.이것은 js에서 지도를 받은 프레임워크로 문서의 구성도 매우 비슷하다(또는Next.js의 문서를 인용하여 만든 것이다).
microCMS
HeadlessCMS는 국산 CMS의 마이크로CMOS를 활용했다.최근 자바스크립트SDK를 개발해 개발이 용이해졌다.
Deno(Aleph.js)의 개발이 뭐가 그렇게 기뻐요?
Next.js풍 프레임
작성자는 평소 React(Next.js)를 사용합니다.Aleph.js는 Next입니다.js Instar이기 때문에 API 및 라우팅 방법도 Next입니다.js와 거의 똑같이 쓸 수 있습니다.물론 JSX로 개발할 수 있고, 평소 리액트를 사용하는 사람은 위화감 없이 개발할 수 있다.
Type Script 지원
Deno는 기본적으로 Type Script를 지원하므로 ts.config 등의 설정이 필요하지 않습니다.
node_modules 및 package제이슨 필요 없어요.
Deno가 npm을 사용하지 않았기 때문에 거대한 nodeDeno에는 module이 필요하지 않습니다.이것은 번역과 구축의 시간 단축에 큰 효과가 있다.
특히 SSG 프레임워크+HeadlessCMS 구성(이른바 Jamstack의 카테고리)은 구축 시간 문제를 일으키기 쉽다는 점이 큰 장점이다.
디노는 CDN을 이용해 Third Party Modules의 패키지를 보낸다.
이외에도 ESM 등 CDN에 해당하는 npm pakage(기타는 skyppack 등)를 사용할 수 있다.
이렇게 Aleph.지금α버전이지만 지금까지의 리소스를 활용하면서 잼택의 문제점을 해결하는 방법 중 하나가 될 수도 있다.
설정
그럼, 사실 Aleph.js와 마이크로CMOS를 사용하여 개발하는 방법을 소개합니다.
이번 디자인은 Vercel을 활용합니다.
brew 등을 사용하여 환경에 Deno를 설치하십시오.
이번에 사용한 판본은 다음과 같다.
$ aleph --version
aleph.js 0.3.0-alpha.33
deno 1.11.2
v8 9.1.269.35
typescript 4.3.2
aleph.js 설치
deno install --unstable -A -f -n aleph https://deno.land/x/[email protected]/cli.ts
aleph init project
cd project
aleph dev
Aleph.js의 개발 방법
디렉토리 구조
아래와 같이 src Dir로 설정할 수도 있습니다.
기본적으로 Next입니다.js와 같기 때문에 사용 경험이 있는 사람은 어색하지 않습니다.
project
- .vscode(vscodeの設定ファイル)
- dist(build時に作成されるファイル.Vercelではこのファイルを実行する)
- components(コンポーネントのファイル)
- lib(関数とか)
- pages(Next.jsのFile Systemと同じくこのファイルがルーティングになる)
- public(画像などの静的ファイル)
- style(グローバルスタイルとか、pagesのスタイルとか)
- types(typescriptの型定義ファイル)
- .env(環境変数)
- .gitignore
- aleph.config.js(alephのビルド設定など。今回は使用しないがSSR,SSGの設定などはこのファイルで行う)
- app.tsx(レイアウトファイル。Next.jsのapp.tsxと同じ)
- import_map.json(importのURLを指定できる)
이는 이번 기사에서 별다른 설정은 없지만, 페이지당 SSR과 SSG, 넥스트를 설정한다.js가 말한
getStaticPath 의 매개 변수 설정은 이 파일로 진행됩니다.https://alephjs.org/docs/basic-features/ssr-and-ssg
앞서 말했듯이 Deno에서는 패키지를 가져올 때 CDN을 사용합니다.
구체적으로 다음과 같이 포장 내용을 확인해야 한다.
import React from "https://esm.sh/[email protected]"
{
"imports": {
"~/": "./",
"aleph/": "https://deno.land/x/[email protected]/",
"aleph/types": "https://deno.land/x/[email protected]/types.ts",
"framework": "https://deno.land/x/[email protected]/framework/core/mod.ts",
"framework/react": "https://deno.land/x/[email protected]/framework/react/mod.ts",
"react": "https://esm.sh/[email protected]",
"react-dom": "https://esm.sh/[email protected]",
"microcms": "https://esm.sh/microcms-js-sdk"
},
"scopes": {}
}
import 문에서 VScode 오류가 발생하면 명령을 입력해 보십시오
deno info [パッケージのURL]https://deno.land/manual/tools/dependency_inspector Microsoft와 협력
다음은 창고의 개요를 소개한다.
Next.js의 개발과 매우 비슷하기 때문에 아래의 마이크로CMS와 넥스트.js의 강좌를 이해할 수 있었으면 좋겠어요.
마이크로CMS Center 준비
마이크로CMOS로 콘텐츠 API를 적절히 제작합니다.
그나저나 이번에는
article API에서 다음과 같은 모드를 제작했다.{
"id": "zenn6",
"title": "nuxt.jsでChartグラフを作るチュートリアル",
"url": "https://zenn.dev/ryusou/articles/nuxt-chartjs",
"publish_article": "2021-04-05T15:00:00.000Z",
}
코드는 다음과 같습니다.
lib/microcmsClient.ts
import { createClient } from "microcms";
export const microcmsClient = createClient({
serviceDomain: "ryusou-portfolio",
apiKey: `${Deno.env.get("X_API_KEY")}`,
});
xxxxx.microcms.io의 독립된 도메인 이름xxxx을 입력한 부분입니다.앱키는 지아이허브 등에 공개
.env할 수 없기 때문에 파일 등에 저장된다..env
X_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxx
process.env를 대체하여 값을 참조합니다.이렇게 하면 마이크로CMS에서 만든 API를 호출할 수 있다.SDK 덕분에 코드가 상당히 간소화되었습니다!
호출 데이터
Deno.env 다음과 같은 방식으로 데이터를 호출한다.pages/index.tsx
import { useDeno } from "framework/react";
import React from "react";
import "../style/home.css";
import { microcmsClient } from "../lib/microcmsClient.ts";
export type Post = {
contents: [{
id: string;
url: string;
title: string;
publish_article: string;
}];
};
export default function Home() {
const articles = useDeno(async () => {
return await microcmsClient.get<Post>({
endpoint: "articles",
queries: { limit: 99 },
});
});
return (
<div className="page">
<head>
<title>Ryusou Profile</title>
</head>
<section>
{articles.contents.map((content) => {
return (
<React.Fragment key={content.id}>
<a href={content.url} alt={content.title}>
<p>{content.title}</p>
<p>{content.publish_article}</p>
</a>
</React.Fragment>
);
})}
</section>
</div>
);
}
pages/index.tsx를 사용하여 Data fetch를 진행합니다.Next입니다.js의 useDeno와 getStaticProps에 해당하는 기능.React처럼 처리를 함수로 써서 직관적이고 좋은 인상을 줄 수 있다.이번에 사용한 것은
getServerSideProps이기 때문에 필요 없지만 microcms-js-sdk처럼 간단하게 반응할 수 있습니다.스타일
문헌에 따르면 CSS를 쓰면 해시가 가능하다고 한다.js 형식으로 컴파일되었다고 쓰여 있지만 컨트롤러를 보니
useDeno<Type>(() => ....) 형식으로 표시되어 있었다.정말 module가 녹았나요, 잘 모르겠어요...알면 추기하다.
프로그램 설계
프로그램은 Vercel을 사용합니다.기본적으로 문서에 따라 설계할 수 있다.
Build 명령의 aleph입니다.js 버전 조정
<style text/css data-module-id="style/index.css"/>을 잊지 마십시오.총결산
Deno의 SSG 프레임워크 Aleph입니다.js는 Next입니다.js처럼 처리할 수 있고 디노의 장점을 누릴 수 있어 향후 성능에 대한 기대가 높기 때문이다.
앞으로 Deno의 발전을 기대합니다!!
마이크로CMS
X_API_KEY의 개발에 따라 코드를 더욱 간결하게 쓸 수 있습니다!또한 서비스 자체의 기능도 점점 충실해져 앞으로 더욱 기대됩니다!보태다
개발 중인 설문 조사의 DenoTips
formatter
역시 갖고 싶구나.Deno
microcms-js-sdk에서 format 가능합니다.매우 빠르다.VS코드의 확장이 있다면 나는 매우 기쁠 것이다.
추기: 설정하면 사용할 수 있다고 합니다.
numb_86 메모 감사합니다.
linter
나는 사용하지 않았지만, 내 라인이 있다고 한다.
Reference
이 문제에 관하여(마이크로CMS와 Deno(Aleph.js)로 조금 더 미래의 WEB 사이트 개발), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ryusou/articles/alephjs-microcms텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
