개시하다

프로그래밍 경력 2개월의 문외한이 쓰고 있다.(오류가 있으면 표시)
Strapi로 React-Static의 블로그 데이터를 만들어 업데이트하기 위한 학습 노트다.

Stripi 설치

Stripi의 디자인

* 디버그된 Stripi와 React-Static 연결
상술한 세 가지를 총결하다.
👇React-Static 공식👇
https://github.com/react-static/react-static

이번 목적

정적 웹 사이트 생성기React-Static을 처음 사용합니다.

Netlify가 디자인한 React-Static의 블로그를 업데이트하기 위해 Strapi로 콘텐츠를 제작하고 React-static의 블로그로 읽는다.

👆성과물

React-Static 블로그 제작 및 Netlify 설계

이전 글 참조
'정적 웹 사이트 생성기 React-Static 사용 시도'
https://qiita.com/shin-ph/items/a6b03412b0822d8be24b

이른바 Strapi

👇공식 문서(영어)
https://strapi.io/documentation/3.0.0-beta.x/getting-started/quick-start.html#_1-install-strapi-globally
원래 Strapi는'HeadlessCMS'로 불리는 서비스 중 하나였다.
CMS는 컨텐츠 관리 시스템의 약칭입니다.
WordPress도 CMS입니다.
HeadlessCMS는 머리, 즉 앞부분이 없고 관리 내용만 제공하는 뒤쪽 CMS다.
무대 위에서는 스스로 준비해야 한다.(이번에는 React-Static이 생성한 정적 사이트)

Strapi 설치

cmdline

npm install strapi@beta -g

전 세계에 strapi를 설치합니다.

프로젝트 작성

cmdline

strapi new my-project --quickstart

현재 Directory에서 이름이 my-project인 디렉토리에 항목을 생성합니다.

strapi의 관리자 화면에 로그인

프로젝트를 만들면 서버가 자동으로 로컬 호스트에서 시작하고 브라우저에 로그인 화면을 표시합니다.
표시되지 않는 경우 http://localhost:1337/admin일 수 있습니다.

컨텐트 유형 만들기

로그인이 완료되면 관리 화면이 표시됩니다.
우선 콘텐츠 유형을 만든다.

이번에는 블로그 기사를 쓰려고 합니다.

『title(string)』

『content(text)』

『image(media)』

필드의 세 가지 컨텐트 유형을 작성하고 저장합니다.

권한 설정

외부에서 데이터를 읽을 수 있도록 역할과 권한을 설정합니다.
Public을 클릭합니다.

이번에는 읽기만 하기 때문에 Find와 FindAll에서 선택하여 저장합니다.

투고 테스트 및 JSON 확인

컨텐트를 만드는 태그에 엔트리를 추가합니다.

루트 아래를 /コンテンツ名로 설정하고 URL을 입력하면 방금 추가된 항목이 JSON인지 확인할 수 있습니다.
http://localhost:1337/posts

그러나 이렇게 되면 로컬 호스트이기 때문에 정식 환경에서는 움직이지 않는다.
여기서부터 히로쿠를 향해 디자인이 진행됩니다.

Heroku에게 프러포즈

👇공식.
https://strapi.io/documentation/3.0.0-alpha.x/guides/deployment.html#heroku

Heroku CLI 설치

cmdline

brew tap heroku/brew && brew install heroku

Heroku에 로그인

cmdline

heroku login

.gitignore package-lock。제이슨

./my-project/.gitignore 파일에 package-lock.json를 추가합니다..gitignore 파일의 마지막 행으로 복사)
파일 이름의 시작 부분.（ドット）이 있으면 파일이 숨겨집니다.
보통 안 보여요.
숨겨진 파일의 표시에 관해서 나는 아래의 문장이 비교적 이해하기 쉽다고 생각한다.
[Mac] 숨겨진 파일을 표시하고 폴더를 숨기는 방법
https://qiita.com/TsukasaHasegawa/items/fa8e783a556dc1a08f51

git 창고 초기화 및 제출

cmdline

cd my-project
git init
git add .
git commit -am "Initial Commit"

Heroku 프로젝트 제작

cmdline

heroku create

Heroku 데이터베이스 설정

https://jp.heroku.com/postgres
Heroku의 PostgreSQL을 사용하여 첨부합니다.여기서는 Hobby Dev 프로그램을 사용합니다.

덧붙이다

cmdline

eroku addons:create heroku-postgresql:hobby-dev

데이터베이스 정보 취득(자격 정보)

cmdline

heroku config

명령을 실행하면 다음 문자열이 출력됩니다.DATABASE_URL: postgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b내용은 다음과 같다.postgres:// USERNAME : PASSWORD @ HOST : PORT : DATABASE_NAME

Heroku Config 구성

cmdline

heroku config:set DATABASE_USERNAME=ebitxebvixeeqd
heroku config:set DATABASE_PASSWORD=dc59b16dedb3a1eef84d4999a0be041bd419c474cd4a0973efc7c9339afb4baf
heroku config:set DATABASE_HOST=ec2-50-37-231-192.compute-2.amazonaws.com
heroku config:set DATABASE_PORT=5432
heroku config:set DATABASE_NAME=d516fp1u21ph7b

"= (같음)"아래의 내용을 방금 얻은 데이터베이스 정보로 바꾸어 실행합니다.

데이터베이스 프로필 다시 쓰기

./config/environments/production/database.json의 내용을 다음과 같이 개작한다.
database.json

{
  "defaultConnection": "default",
  "connections": {
    "default": {
      "connector": "strapi-hook-bookshelf",
      "settings": {
        "client": "postgres",
        "host": "${process.env.DATABASE_HOST}",
        "port": "${process.env.DATABASE_PORT}",
        "database": "${process.env.DATABASE_NAME}",
        "username": "${process.env.DATABASE_USERNAME}",
        "password": "${process.env.DATABASE_PASSWORD}",
        "ssl": true
      },
      "options": {}
    }
  }
}

pg node module 설치

cmdline

npm install pg --save

여기까지의 변경 내용 제출

cmdline

git commit -am "Update database config"

설계를 진행하다

cmdline

git push heroku master

하면, 만약, 만약...
cmdline

heroku open

그리고 이번에는 로그인 서버에서 로그인 화면으로 넘어갑니다.
로컬 로그인과 마찬가지로 name과password로 로그인합니다.

axios.get () 의 가져오기 원본을 Heroku로 설정합니다

React-Static 프로젝트 내static-config.js에서 블로그 내용을 얻는다.axios.get()의 매개 변수는 https://yourreponame.herokuapp.com/コンテンツ名로 방금 디자인한 Stripi에서 JSON을 얻을 수 있습니다.
static-config.js

import path from 'path'
import axios from 'axios'

export default {
  getRoutes: async () => {
    const { data: posts } = await axios.get(
      'https://damp-thicket-88898.herokuapp.com/posts'
    )

    return [...

React-Static 프로젝트 Push

'정적 웹 사이트 생성기 React-Static 사용 시도'
https://qiita.com/shin-ph/items/a6b03412b0822d8be24b
Netlify 설계
React-Static 프로젝트를 누르면 공식 환경이 자동으로 Netlify에 구축되어 설계됩니다.
수정react:static-config.js을 제출하고github 창고로 밀어넣습니다.

공식 사이트 확인

블로그의 내용을 잘 업데이트하면 성공할 것이다.

총결산

Stripi 설치

Stripi의 디자인

디버그된 Stripi 및 React-Static 연결

총괄해 보았다.