Denox React의 Aleph.js 터치해보기 & Vercel 디자인해보기

6369 단어 ReactDenoVercelAleph.jstech

개시하다


제목에서 보듯이 이것은 제가 해 본 관련 보도입니다. 우선 간단하게 활용한 기술 소개입니다!

  • Aleph.js ... Deno의 React 프레임워크
  • Nextjs에 강한 계발(정식 문서에서도 Next.js에 대한 링크)
    • 알파 버전,deno와aleph.js버전의 조합에 따라 초기에 생성된 프로그램도 시작할 수 없음
  • .dev에도 다른 사용자 소개가 있어요.
  • 디노 프런트엔드 개발의 동향 [2021년 봄]
  • 2021년은 풀스테이크 넥스트다.js 원년이라서 희망이 있어요.모든 js계 프레임워크를 시도해 봤습니다.
  • Deno 프레임 Aleph.js로 해보세요.
    • https://alephjs.org/

  • Vercel ... 정적 웹 사이트/서비스 플랫폼
  • 아시다시피Nextjs를 개발/지원하는 회사에서 제공
  • 따라서 넥스트js와 친화성이 높고 Aleph.Js에서도 Vercel을 디버깅할 수 있음
    • https://vercel.com/

    Aleph.만지다


    설정


    Deno, Aleph에 가입하기만 하면 됩니다.js를 이동할 수 있습니다.
    하지만 알파 버전이라 버전 설정에 따라 제대로 동작하지 못할 때도 있고...
    (이번에는 내가 프로그램을 만들 수 있는 버전을 쓸 거야->프로그램 디자인 버전까지)
    aleph.js 0.3.0-alpha.22
deno 1.8.2

    설치 명령


    Deno 원하는 방식으로 다운로드하고 다음을 수행합니다.
    deno upgrade --version
deno install --unstable -A -f -n aleph https://deno.land/x/[email protected]/cli.ts
    ref: Get Started - Aleph.js

    샘플 생성 응용 프로그램


    # cd /path/to/<your_project>
aleph init .
aleph dev
    바로 아래의 카운터 앱을 제작할 수 있습니다.
    이 Push를 Giithub 창고에 넣으세요.

    현재 WindowsOSaleph dev를 시작할 수 없습니다.
    ref: https://github.com/alephjs/aleph.js/issues/201
    ※ SSG도 가능
    aleph build
# npm exec serve -s ./dist

    Vercel 설계 시도


    제작된 카운터 응용 프로그램을 Vercel에 적용해 보십시오.
    ref: Deployment - Aleph.js
    사전 준비로 Vercel에 로그인하여 Giithub과 사전 연합합니다.
    ref: Vercel로 이동합니다.js가 사용하는 전단 응용 프로그램을 설계해 보았는데 너무 가볍다.
  • Dashboard에서 "New Project"-> "Import Giit Repository"에서 샘플을 눌러 적용하는 창고
    • 선택
    ※ "Import Project"의 디렉토리 설정은 기본적으로 "Continue"(창고의 루트)
  • Import Project를 통해 설정
    • "Build and Output Settings"를 열고 아래와 같이 입력합니다.
  • BUILD COMMAND
  • curl -fsSL https://deno.land/x/install/install.sh | sh -s v1.8.2 && /vercel/.deno/bin/deno run -A https://deno.land/x/[email protected]/cli.ts build
  • OUTPUT DIRECTORY
  • dist
    • 기타 기본값은 문제 없음
    ("PROJECT NAME"은 임의의 것이고, "FRAMEWORK PRESET"는Other일 수 있음)
    (Default)
    After change

  • Deploy
    • 를 클릭합니다.
    구축/디버깅 과정을 표시하고 완성 후 장치 완성 화면을 표시합니다.
    00:36:44.733  	Cloning github.com/linnefromice/... (Branch: main, Commit: 617c5b8)
00:36:45.282  	Cloning completed: 548.237ms
00:36:45.304  	Analyzing source code...
00:36:46.981  	Installing build runtime...
...
00:37:03.461  	Deno was installed successfully to /vercel/.deno/bin/deno
00:37:03.462  	Manually add the directory to your $HOME/.bash_profile (or similar)
00:37:03.462  	  export DENO_INSTALL="/vercel/.deno"
00:37:03.462  	  export PATH="$DENO_INSTALL/bin:$PATH"
00:37:03.462  	Run '/vercel/.deno/bin/deno --help' to get started
00:37:03.479  	Download https://deno.land/x/[email protected]/cli.ts
...
00:37:30.759  	INFO - bundle
00:37:32.492  	INFO   {} polyfill.js (ES2015) • 9KB
00:37:34.569  	INFO   {} deps.js • 152KB
00:37:34.581  	INFO   {} shared.js • 431B
00:37:34.645  	INFO   {} /pages/index.js • 5KB
00:37:34.645  	INFO   {} main.js • 385B
00:37:34.647  	INFO - Pages (SSG)
00:37:34.670  	INFO   ○ / • 5KB
00:37:34.679  	INFO - Public Assets
00:37:34.679  	INFO   ∆ /logo.svg • 874B
00:37:34.679  	INFO Done in 14065ms
00:37:35.809  	Uploading build outputs...
00:37:45.628  	Build completed. Populating build cache...
...
    현재(2021/4/3)는 Aleph입니다.Js에서 지원하는 Vercel과 FlekAPIRoute이 지원 대상에 없기 때문에 구축할 때 로그에서 오류를 출력하지만 프로그램 자체가 실행됩니다
  • 디자인이 완성된 화면의 "Visit"를 클릭
  • Deploy의 카운터 애플리케이션에 액세스할 수 있습니다!

    • 이 글에서 디자인된 응용 프로그램은 이곳에서 접근할 수 있습니다.
    https://alephjs-counter-app.vercel.app/

    끝말


    Aleph.js 자체Currently in alpha, not ready for production. 때문에 정식 공연 이용이 어렵지만, 버셀을 이용한 deproy로 깔끔하게 할 수 있기 때문에 블로그/초상화 조합 등 개인 제작(약간 노는 기분)으로 사용해 보는 것이 좋을 것 같습니다.
    모두들 이 보도에 대해 약간의 흥미를 가지기를 바란다.
    ※ 샘플은 다른 종류도 있습니다(md 파일을 사용한 etc)
    aleph.js/examples at master · alephjs/aleph.js
    파이썬 세계지도 - 22 (국가 위치 검색)
    Giit 시작

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage