이 보도는 Nuxt다.이것은 js에서 Netlify로 가져올 때의 비망록입니다.
Nuxt.js 제품 개발을 사용하지 않았습니다.

컨텐트

프레임별 Nuxt.js 가져오기

서비스 Netlify에 대한 GiitHub 연합을 이용한 구축 서비스

컨디션

macOS Mojave 10.14.3

Node.js 12.12.0

npm 6.1.3(Nuxt.js 설치 시 npx 명령 실행에 필요함)

Nuxt.js

버전 2.11.0

create-nuxt-app를 사용합니다.js 설치

공식 문서
https://ja.nuxtjs.org/guide/installation/

# 任意のディレクトリで以下のコマンドを実行
$ npx create-nuxt-app tutorial-nuxt-netlify

프로젝트 이름tutorial-nuxt-netlify의 부분을 적절하게 수정하십시오.
상호작용 설치를 시작하다.

create-nuxt-app v2.12.0
✨  Generating Nuxt.js project in tutorial-nuxt-netlify

Project name

? Project name (tutorial-nuxt-netlify)

프로젝트 이름입니다.
기본적으로 명령을 실행할 때 지정됩니다.특별한 이유만 없다면 나는 이렇게 하면 된다고 생각한다.

Project description

? Project description (My awe-inspiring Nuxt.js project)

프로젝트 설명입니다.

Author name

? Author name (naente_dev)

프로젝트 작성자 이름입니다.

Choose the package manager

? Choose the package manager (Use arrow keys)
❯ Yarn
  Npm

매크로 패키지 관리자를 선택합니다.
사용Yarn이냐Npm냐, 이번에는 Npm를 선택했다.

Choose UI framework

? Choose UI framework (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

UI 프레임을 선택합니다.
며칠 전에 참가한 학습회에서 추천한 것을 선택했다Ant Design Vue.

Choose custom server framework

? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

서버 측면 프레임 선택
발견되지 않아 추천None을 선택했습니다.

Choose Nuxt.js modules

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

Nuxt.js 모듈 (확장) 을 선택하십시오.
공식 문서
https://ja.nuxtjs.org/guide/modules
모듈은 Nuxt입니다.js 핵심 기능을 확장하고 무한 포인트 Nuxt를 증가합니다.js의 확장 기능입니다.
이번에 다 검사했어.

Choose linting tools

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint

사용할 lint (소스 코드 정적 분석 도구) 를 선택하십시오.
공식 문서에서 추천ESLint과Prettier를 동시에 사용하기 때문에 두 가지를 선택했다.
https://ja.nuxtjs.org/guide/development-tools#eslint-%E3%81%A8-prettier

Choose test framework

? Choose test framework (Use arrow keys)
❯ None
  Jest
  AVA

테스트 프레임워크를 선택합니다.
이번에 선택했다None.

Choose rendering mode

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
  Single Page App

렌더링 모드를 선택합니다.

범용(SSR)

단일 페이지(SPA)

이번에 선택했다Single Page App.
참고 자료
https://qiita.com/nishinoshake/items/f42e2f03663b00b5886d

Choose development tools

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)

개발 도구의 선택.
이번엔 검사 안 했는데 Visual Studio Code 쓰면 검사를 추천합니다.

🎉  Successfully created project tutorial-nuxt-netlify

  To get started:

    cd tutorial-nuxt-netlify
    npm run dev

  To build & start for production:

    cd tutorial-nuxt-netlify
    npm run build
    npm run start

설치 완료.
명령을 실행하는 디렉터리에 항목 이름의 디렉터리를 만들어야 합니다.

프로젝트 시작 확인

# プロジェクトディレクトリへ移動
$ cd tutorial-nuxt-netlify/
# プロジェクトを開発モードで起動
$ npm run dev

> [email protected] dev /*****/*****/*****/tutorial-nuxt-netlify
> nuxt


   ╭──────────────────────────────────────────╮
   │                                          │
   │   Nuxt.js v2.11.0                        │
   │   Running in development mode (spa)      │
   │                                          │
   │   Listening on: http://localhost:3000/   │
   │                                          │
   ╰──────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                               10:28:35
ℹ Initial build may take a while                                                                                                                                                                  10:28:35
✔ Builder initialized                                                                                                                                                                             10:28:35
✔ Nuxt files generated                                                                                                                                                                            10:28:35

✔ Client
  Compiled successfully in 9.10s

ℹ Waiting for file changes                                                                                                                                                                        10:28:46
ℹ Memory usage: 423 MB (RSS: 534 MB)

http://localhost:3000/에 액세스하면 다음 화면이 표시됩니다.

로컬 웨어하우스 만들기

# プロジェクトディレクトリ内（本例では tutorial-nuxt-netlify 内）で初期化
$ git init
Reinitialized existing Git repository in /*****/*****/*****/tutorial-nuxt-netlify/.git/

프로젝트 제작 때 미리 준비한 것 같은데 신중을 기하기 위해 초기화했습니다.

GitHub

계정을 만들지 않습니다.

원격 웨어하우스 만들기

창고를 성공적으로 만든 경우
릴리즈 원격 URLhttps://github.com/******/tutorial-nuxt-netlify.git.****** 섹션은 GiitHub의 사용자 이름)

원격 창고로 밀어넣기

# プロジェクトディレクトリ内（本例では tutorial-nuxt-netlify 内）にて
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/******/tutorial-nuxt-netlify.git
$ git push -u origin master

GiitHub 페이지에 반영되면 성공합니다.

Netlify

계정을 만들지 않습니다.
기본 인증을 사용할 수 없는 무료 Starter 프로그램
이번 목적은'일단 써보자'니까 신경 안 써.

GiitHub과의 협력, 디자인

New site from Giit 클릭

GiitHub 선택

GiitHub에 인증 승인을 요청하는 첫 번째 화면이 나타나면 Authorize Netlify by Netlify 를 클릭하십시오.

Netlify에서 액세스할 수 있는 저장소 설정
Only select repositories를 확인하고 만든 저장소를 선택하고 Install을 클릭합니다.

추가 저장소 선택

이번에는 Nuxt.js 렌더링 모드에서 Single Page Apps 선택
Build command에서 npm run build, Publish directory에서 dist를 입력하고 Deploysite를 클릭합니다.
참고 자료
https://ja.nuxtjs.org/faq/netlify-deployment/

디버깅이 완료되면 URL이 왼쪽 위 모서리에 표시되어 디버깅된 웹 컨텐트를 확인할 수 있습니다.
나중에 사용자 지정 도메인(독립 실행형) 및 HTTPS를 설정할 수도 있습니다.
이번 할애는