본고에서, 당신은 어떻게 연락처 사이트와 연락처를 구축하는지 알게 될 것입니다...

프런트엔드: nuxtjs

백엔드: faunaDB

배포: firebase

First, we'll build a simple page and in it how to contact us like , , Github...

Nuxtjs 회사

Nuxt는 Vue 위에 구축된 소스 웹 응용 프로그램 프레임워크입니다.js, SSR 기능으로 유명하지만 정적일 수도 있습니다.
우리는 노드 서버가 모든 클라이언트의 요청을 처리하고 최종적으로 API나 데이터베이스에서 데이터를 얻는 것이 아니라 정적 사이트 생성기로 Nuxt를 사용할 것이다.

FaunaDB 회사

Fauna는 전 세계에 분포된 저지연 데이터베이스로 본 기기의 GraphQL 지원을 가지고 일관성과 안전성을 약속합니다.

As a serverless database, FaunaDB allows applications to access data through a secure API, in contrast to more "traditional" relational databases that require you to open a connection. In that sense, FaunaDB is “connectionless” and rather behaves like an API, which fits perfectly in a Jamstack architecture. There is also no need to host and manage our own database. It requires zero server configuration and supports seamless scalability out-of-the-box.

프레젠테이션

you can try the project (demo)

예비 지식

계속하기 전에 다음이 필요합니다.

에는 Npm, 노드 및 Npx가 설치되어 있습니다.

AFaunaDB Account.

가자

우선 설치가 필요합니다create-nuxt-app

$ npm i -g create-nuxt-app

설치 후 웹 사이트를 만듭니다

$ create-nuxt-app PROJ_NAME && cd PROJ_NAME

now we need three packages :

faunadb: FaunaDB의 JavaScript 드라이버

slugify: 이 패키지를 사용하여con이름

으로slug를 생성합니다

dotenv

$ npm i faunadb slugify dotenv

이제 graphql 모드를 만듭니다.

$ mkdir graphql && cd graphql && touch schema.gql

데이터 수정 (graphql 모드)

구조:

설명: 연락처 설명

repoUrl: 연락처 url

브랜드 | 실심: fontawesome 아이콘이 fab인지 fas인지 확인

fai: 터치포인트fontawesome 아이콘

태그: 연락처에 태그가 있는 경우

hashtag_name:hashtag name

내부 schema.gql

type Repo {
  desc: String! @unique
  repoUrl: String! @unique

  # if font-awesome icon is brand or solid
  brand: Boolean
  solid: Boolean
  faI: String

  # this only for twitter & dev contacts
  hashtag: Boolean
  hashtag_name: String
}

type Query {
  allRepos: [Repo!]!
}

faunaDB dashboard &createnew database로 이동합니다.

graphql 부분으로 이동하여 모드 가져오기
now you should have collections

키 포인트 만들기

생성Admin key & Server key ADMIN
누르기SAVE프로젝트에서 파일 만들기 .env
대신🔑️ 너의 열쇠로
SERVER
동시에 누르기SAVEin.env
대신🗝️ 너의 두 번째 열쇠로ok we finish all this graphql 폴더로 돌아가서 만들기db-connection.js

$ touch db-connection.js

안에 이 코드를 붙여넣다

require("dotenv").config();
const faunadb = require("faunadb");
const query = faunadb.query;

function createClient() {
  if (!process.env.FAUNA_ADMIN_KEY) {
    throw new Error("FAUNA_ADMIN_KEY not found");
  }

  const client = new faunadb.Client({
    secret: process.env.FAUNA_ADMIN_KEY
  });

  return client;
}

exports.client = createClient();
exports.query = query;

아주 중요한 걸음이에요.
in nuxt.config.jsin 이상

require("dotenv").config();

게다가 generate 아이템

generate: {
    async routes() {
      const faunadb = require("faunadb");
      const query = faunadb.query;
      const slugify = require("slugify");
      const q = query;

      if (!process.env.FAUNA_SERVER_KEY) {
        throw new Error("FAUNA_SERVER_KEY not found.");
      }

      const client = new faunadb.Client({
        secret: process.env.FAUNA_SERVER_KEY
      });

      const result = await client.query(
        q.Map(
          q.Paginate(q.Match(q.Index("allRepos"))),
          q.Lambda("X", q.Get(q.Var("X")))
        )
      );

      const repos = result.data.map(repo => repo.data);
      const routes = repos.map(repo => {
        const repoUrlParts = repo.repoUrl.split("/");
        const repoOwner = repoUrlParts[repoUrlParts.length - 2];
        const repoName = repoUrlParts[repoUrlParts.length - 1];

        const slug = slugify(repoName, {
          remove: /[*+~.()'"!:@]/g
        });

        repo.slug = slug;
        repo.owner = repoOwner;
        repo.name = repoName;

        return {
          payload: repo
        };
      });

      routes.push({
        route: "/",
        payload: repos
      });
      return routes;
    }
  }

컬렉션 가져오기

faunaDB 대시보드의 모음 섹션으로 돌아가 새 모음을 만듭니다.
누르기new document예제 데이터

{
  "desc": "you can make a github issue",
  "repoUrl": "https://github.com/YOUR_REPO/issues",
  "brand": true,
  "solid": false,
  "faI": "github",
  "hashtag": false
}

dev-x 트위터, GitHub 질문, dev-org


지금 이동 pages시작하기 전에 소프트웨어 패키지가 필요합니다.

글씨체 좋다

sass와sass 적재기

$ npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons sass sass-loader

현재 섹션 nuxt.config.js 으로 이동 css저희가 글씨체가 좋은 스타일을 가져올 거예요.
이것을 입력하십시오.

css: [
  "@fortawesome/fontawesome-svg-core/styles.css",
  ...
],

이동 pages 및 생성 index.scsspages 에는 두 개의 파일이 있어야 합니다.

├── index.vue
└── index.scss

inindex.vuetemplate

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">contact.dev-x</h1>

      <div>
        <div class="card">
          <h3>Contacts &rarr;</h3>

          <ul v-for="repo in repos" :key="repo.desc">
            <li>
              {{ repo.desc }}

              <strong v-if="repo.hashtag">{{ repo.hashtag_name }}</strong>

              <a :href="repo.repoUrl">
                <a class="btn">
                  <fai v-if="repo.brand" :icon="['fab', `${repo.faI}`]" />
                  <fai v-if="repo.solid" :icon="repo.faI" />
                </a>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

script

<script>
import Vue from "vue";

import { library, config } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";

// This is important, we are going to let Nuxt.js worry about the CSS
config.autoAddCss = false;

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fab);
library.add(fas);

// Register the component globally
Vue.component("fai", FontAwesomeIcon);

Vue.config.productionTip = false;

export default {
  asyncData({ payload }) {
    return { repos: payload };
  }
};
</script>

style

<style lang="scss">
@import "index.scss";
</style>

index.scss

$color: #121312;

.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #31465e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}

.card {
  cursor: pointer;
  margin: 1rem;
  flex-basis: 45%;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 2px solid#000000;
  border-radius: 2.5px;
  flex-direction: column;
  box-shadow: 5px 6px 0px black;
}

.card h3 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.card li {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  list-style: none;
  font-family: DF;
}

a {
  color: rgb(0, 119, 255);
}

strong {
  color: dodgerblue;
}

.btn {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid $color;
  color: $color;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.btn:hover {
  color: #fff;
  background-color: $color;
}

모든 것이 다 좋다

종료 전 단계
터미널 유형에서...

$ npm run generate

하면, 만약, 만약...

걱정하지 마라, 이것은 부드러운 잘못이다
생성 후
우리는 serve를 사용하여 출력 구축에 서비스를 제공할 것이다

$ npx serve dist

# or

$ sudo npm i -g serve
$ serve dist

이동 localhost:5000 결과 보기

Firebase에 배포(옵션)

전역 설치 Firebase
하면, 만약, 만약...

npm i -g firebase firebase-tools

mac 또는 linux

$ sudo npm i -g firebase firebase-tools

지금 이동 firebase console
웹 응용 프로그램을 만듭시다
and create a new project hosting final touches
복제"site" 아이템
항목으로 이동하여 입력

$ firebase login

브라우저에서 로그인합니다.initializing

$ firebase init

이동 firebase.json

{
  "hosting": {
    "site": "contactus-x",
    "public": "dist",
    ...
  }
}

마지막 단계

$ firebase deploy --only hosting:contactus-x

그렇습니다.

$ echo happy coding ⌨️