리믹스 첫 감상

21984 단어 reactnetlifyremixgraphql
주로 표준 웹 API를 사용하는 React 메타프레임워크입니다. 원래는 유료 라이선스가 필요했지만 최근 완전 오픈 소스 프로젝트로 출시되었습니다. 이 예에서는 Netlify 스타터에 graphql-request을 추가합니다.

개요


  • Initialize Starter Project
  • Start Development Server
  • Index Routes
  • Include Water CSS for Styling Presets
  • Loader Functions
  • Deploy to Netlify

    • 스타터 프로젝트 초기화




    npx create-remix@latest ajcwebdev-remix


    Netlify 스타터를 선택하겠습니다.

    💿 Welcome to Remix! Let's get you set up with a new project.

? Where would you like to create your app? ./ajcwebdev-remix
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. Netlify
? TypeScript or JavaScript? JavaScript
? Do you want me to run `npm install`? Yes

💿 That's it! `cd` into "ajcwebdev-remix" and check the README for development and deploy instructions!


    개발 서버 시작


    cd를 프로젝트에 넣고 Netlify CLI를 설치하고 개발 서버를 시작합니다.

    cd ajcwebdev-remix
npm i -g netlify-cli@latest
npm run build
npm run dev




    ◈ Netlify Dev ◈
◈ Ignored general context env var: LC_ALL (defined in process)
◈ No app server detected. Using simple static server
◈ Running static server from "ajcwebdev-remix/public"
◈ Loaded function server (​http://localhost:3000/.netlify/functions/server​).
◈ Functions server is listening on 57433

◈ Static server listening to 3999

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:3000   │
   │                                                 │
   └─────────────────────────────────────────────────┘

Watching Remix app in development mode...
◈ Rewrote URL to /.netlify/functions/server
Request from ::1: GET /.netlify/functions/server


    프로젝트를 보려면 localhost:3000을 여십시오.



    색인 경로



    index routes은 레이아웃의 경로가 정확히 일치할 때 렌더링되는 경로입니다. index.jsx 디렉토리에 routes 파일이 있으면 홈 페이지로 사용됩니다. 상용구 코드를 약간 수정했습니다.

    // app/routes/index.jsx

import { useLoaderData, json } from "remix"

export let loader = () => {
  let data = {
    resources: [
      { name: "A First Look at Remix Blog Post", url: "https://dev.to/ajcwebdev/a-first-look-at-remix-2cp1" },
      { name: "Example Repo", url: "https://github.com/ajcwebdev/ajcwebdev-remix" },
      { name: "Deployed Website", url: "https://ajcwebdev-remix.netlify.app" }
    ]
  }
  return json(data)
}

export let meta = () => {
  return {
    title: "ajcwebdev-remix",
    description: "Welcome to remix!"
  }
}

export default function Index() {
  let data = useLoaderData();

  return (
    <div className="remix__page">
      <main>
        <h1>ajcwebdev-remix</h1>
        <p>Woot!</p>
      </main>

      <section>        
        <h2>Resources</h2>
        <ul>
          {data.resources.map(resource => (
            <li key={resource.url}>
              <a href={resource.url}>{resource.name}</a>
            </li>
          ))}
        </ul>
      </section>
    </div>
  )
}


    json 은 응답을 생성application/json하기 위한 바로 가기를 제공하고 meta HTML 문서에 대한 메타 태그를 설정합니다.



    스타일링 사전 설정에 물 CSS 포함




    // app/root.jsx

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration
} from "remix";

export function meta() {
  return { title: "New Remix App" };
}

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"></link>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        {process.env.NODE_ENV === "development" && <LiveReload />}
      </body>
    </html>
  );
}




    로더 기능



    Loaders은 구성 요소에 데이터를 제공하고 서버에서만 호출됩니다. 데이터베이스에 연결하거나 이를 렌더링하는 구성 요소 옆에 있는 서버 측 코드를 실행할 수 있습니다. graphql.jsx 라는 GraphQL 쿼리에 대한 새 경로를 만듭니다.

    touch app/routes/graphql.jsx
npm i graphql-request graphql


    각 경로는 경로에 데이터를 제공하기 위해 렌더링하기 전에 서버에서 호출되는 "로더"함수를 정의할 수 있습니다. 이 함수는 서버에서만 실행되므로 클라이언트에 노출할 수 없는 API 비밀을 포함하는 요청에 이상적인 후보입니다.

    // app/routes/graphql.jsx

import { useLoaderData, json } from "remix"
import { GraphQLClient, gql } from "graphql-request"

const GET_CHARACTERS = gql`{
  characters {
    results {
      name
      id
    }
  }
}`

export let loader = async () => {
  const client = new GraphQLClient("https://rickandmortyapi.com/graphql")
  const { characters } = await client.request(GET_CHARACTERS)
  const { results } = characters
  return json({ results })
}

export default function Index() {
  let data = useLoaderData()

  return (
    <>
      <ul>
        {data.results.map(({ name, id }) => (
          <li key={id}>
            {name}
          </li>
        ))}
      </ul>
    </>
  )
}




    Netlify에 배포



    스타터에는 빌드 지침이 포함된 파일netlify.toml이 이미 포함되어 있습니다.

    [build]
  command = "remix build"
  functions = "netlify/functions"
  publish = "public"

[dev]
  command = "remix watch"
  port = 3000

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/server"
  status = 200

[[headers]]
  for = "/build/*"
  [headers.values]
    "Cache-Control" = "public, max-age=31536000, s-maxage=31536000"


    GitHub 리포지토리를 만듭니다.

    git init
git add .
git commit -m "re-re-re-re-re-remix"
gh repo create ajcwebdev-remix
git push -u origin main


    Netlify CLI로 Netlify 사이트를 초기화합니다.

    netlify init




    ? What would you like to do? +  Create & configure a new site
? Team: Anthony Campolo's team
? Site name (optional): ajcwebdev-remix

Site Created

Admin URL: https://app.netlify.com/sites/ajcwebdev-remix
URL:       https://ajcwebdev-remix.netlify.app
Site ID:   e80b3ba6-3bc8-4018-8b27-4f1b62599ac9
? Your build command (hugo build/yarn run build/etc): npm run build
? Directory to deploy (blank for current dir): public
? Netlify functions folder: netlify/functions
Adding deploy key to repository...
Deploy key added!

Creating Netlify GitHub Notification Hooks...
Netlify Notification Hooks configured!

Success! Netlify CI/CD Configured!

This site is now configured to automatically deploy from github branches & pull requests

Next steps:

  git push       Push to your git repository to trigger new site builds
  netlify open   Open the Netlify admin URL of your site


    README에는 노드 버전을 v14로 설정하는 명령이 포함되어 있습니다.

    netlify env:set AWS_LAMBDA_JS_RUNTIME nodejs14.x
netlify deploy --prod




    Deploy path:        /Users/ajcwebdev/ajcwebdev-remix/public
Functions path:     /Users/ajcwebdev/ajcwebdev-remix/netlify/functions
Configuration path: /Users/ajcwebdev/ajcwebdev-remix/netlify.toml
Deploying to main site URL...
✔ No cached functions were found
✔ Finished hashing 35 files and 1 functions
✔ CDN requesting 24 files and 1 functions
✔ Finished uploading 25 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/ajcwebdev-remix/deploys/61a9732cec7b1a6162064d06
Unique Deploy URL: https://61a9732cec7b1a6162064d06--ajcwebdev-remix.netlify.app
Website URL:       https://ajcwebdev-remix.netlify.app


    website URL을 열어 배포된 프로젝트를 확인합니다.

    pytohon으로 그림을 Power 자료에 자동으로 붙여넣기 +α
    [Swift] Type Properties

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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