Heroku와 Cloudinary를 사용하여 Strapiv4 무료 이동

※ 헤로쿠에 대한 지식이 다소 있는 상태에서 진행한다.히로쿠에 대해 알고 싶으면 다른 기사를 참조하세요.

Strapi란?

간단히 말해 스트래피는 오픈소스의 키오스크 호스트형 헤드리스 CMOS다.
CMS에서는 드물게 자체 구축 및 호스트 유형입니다.
최근 메인스트림(MainStream) 버전은 v4로, UI와 구축 시스템이 새롭게 바뀌어 사용이 더욱 편리해졌습니다. 제가 소개하고 싶습니다.

기능 & 비용

데이터베이스와 서버를 스스로 준비해야 하지만 기본 기능은 모두 무료다.관계와 이미지 발송도 무료로 계획할 수 있고 사용자의 권한 설정도 상세하게 설정할 수 있다.GraphiQL과도 대응하는(비슷한?[1],Contentful과 마이크로CMS에 없는 기능도 있으니 풍부한 텍스트를 표시해서 돌려주세요.
특히 풍부한 텍스트에 일본어를 자연스럽게 입력할 수 있다.(Contentful의 일본어 입력에 상당한 오류가 있어 사용하기 어렵다)
자신의 호스트이기 때문에 자신의 도메인을 사용할 수 있다는 것도 기쁘다.

무료 이용법

Strapi를 사용하려면 먼저 서버를 시작할 준비를 해야 합니다.선택할 수 있는 방안으로는 AWS EC2, Azure, GAE, Digital Ocean이 있는데 Heroku를 사용하면 완전히 무료로 사용할 수 있다[2].
공식 문서에는 히로쿠문장을 소개하다가 있다.Heroku는 전용 PostgresSQL을 사용할 수 있기 때문에 데이터베이스[2:1]에 신경 쓰지 않아도 되지만 이미지 등 파일만 Heroku의 ephemeral이라는 기능을 통해 일정 시간 예쁘게 지워지기 때문에 이미지는 다른 곳에 저장해야 한다.Cloudinary라는 서비스를 사용하세요.

Cloudinary

Cloudinary는 이미지 전송 서버로 이미지 변환에도 사용할 수 있지만 이번에는 이미지를 저장하기 위해 사용합니다.

비용

한 달에 2만5천 번의 이미지 변환(이번에는 필요 없어, 신경 쓰지 마), 25GB의 저장, 25GB의 통신 주파수는 무료 계획의 범위이다.개인적으로 사용하면 여유가 있을 것 같아요.

계정 생성 및 키 저장

계좌가 없는 사람은 빨리 하세요.
로그인 완료대시보드하고 가면 Cloud Name,API Key,API Secret,my-project가 필요하므로 잘 보관하세요.

※ 2022/1/8시 대시보드 화면

Strapi 프로젝트 만들기

기본적으로 공식 설명와 같다.

전제 조건

히로쿠 계정(자유계획 이상)

Heroku CLI

Node.js

Git

Strapi 프로젝트 만들기

당신이 좋아하는 디렉터리에서 다음과 같은 조작을 실행합니다

npx create-strapi-app@latest my-project --quickstart

--quickstart는 자신이 좋아하는 이름으로 바꿀 수 있다.my-project 옵션을 설정하면 프로젝트가 만들어지면 Starapi의 관리 화면을 즉시 열 수 있습니다.필요 없으면 안 넣어도 돼요.

맞아요. Heroku push.

custom-project-name 디렉토리 만들기
./my-project

git init
git add .
git commit -m "first commit"

제출하고 당신이 좋아하는 방식으로 Heroku에게 미루세요.
아직 Heroku의 앱을 만들지 않았다면
./my-project

heroku login

Heroku 실행 및 로그인
./my-project

heroku create custom-project-name

에서 이름이 custom-project-name인 응용 프로그램을 만듭니다.이것your-heroku-app-name은 반드시 고유의 이름이어야 한다.

Heroku PostgresSQL 활성화

GUI, CUI에서 추가할 수 있습니다.
이번에는 CUI에서 추가된다.
이미 만든 프로그램에 추가하려면
./my-project

heroku git:remote -a your-heroku-app-name

를 선택합니다.
그리고 나서
./my-project

heroku addons:create heroku-postgresql:hobby-dev

, Heroku PostgresSQL이 추가됩니다.

필요한 라이브러리 설치

이번에는 npm를 사용합니다.yarn의 사람을 적당히 바꿔 주세요.
Heroku PostgresSQL을 사용하는 데 필요한 프로그램 라이브러리를 설치합니다.
./my-project

npm install pg pg-connection-string --save

데이터베이스 사용 설정

Heroku의 NODE_ENV를 production로 설정하려면 다음 절차를 따르십시오.(이유 후술)
./my-project

heroku config:set NODE_ENV=production

Heroku가 실행될 때 Heroku PostgresSQL을 사용하도록 설정합니다.my-project 프로젝트에 config/env/production/database.js라는 파일을 만들고 다음과 같은 내용을 기술합니다.복사해서 붙이면 돼요.
./my-project/config/env/production/database.js

const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = ({ env }) => ({
  connection: {
    client: 'postgres',
    connection: {
      host: config.host,
      port: config.port,
      database: config.database,
      user: config.user,
      password: config.password,
      ssl: {
        rejectUnauthorized: false
      },
    },
    debug: false,
  },
});

그런 다음 Heroku PostgresSQL을 읽을 URL을 설정합니다.
SQL의 URL을 Heroku의 환경 변수로 설정하려면 다음 절차를 따르십시오.모두 복사하여 실행하십시오.
./my-project

heroku config:set MY_HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)

config/env/production/server.js라는 파일을 만들고 다음 내용을 기술합니다.이것도 직접 복제할 수 있다.
./my-project/config/env/production/server.js

module.exports = ({ env }) => ({
  url: env('MY_HEROKU_URL'),
});

환경 변수 NODEENV에서 "production"을 설정한 이유
Strapi의 안전성 때문에 공개 링크production 모드를 사용하는 것을 권장합니다.production 모드에서는 Content-Type Builder를 사용하여 새 Content-Type을 만들 수 없습니다.Content-Type은 글이나 사용자와 같은 구조체를 가리키며, 이 구조를 편집하거나 제작하려면 로컬 환경에서 편집하고 다시 설계해야 한다.글을 쓸 때 바로 쓸 수 있기 때문에 글을 쓸 때 설계를 할 필요가 없다.config/env/production 디렉터리에 있는 파일은 NODE_ENV이 production일 때만 실행됩니다.

동작 확인

이상이 완료되면 Heroku에게 한 번 디버깅하고 동작을 확인하세요.
방문https://[your-herokuapp-name].herokuapp.com하면 Strapi와 만날 수 있습니다.

화면 관리 URL은 https://[your-herokuapp-name].herokuapp.com/admin입니다.처음에는 계정의 로그인 화면만 있고 두 번째 이후에는 로그인 화면이 나온다.워드프레스 같아.
로그인하면 아래 그림과 같은 화면이 됩니다.

이번 기사는 스트래피 사용법 해설이 아니기 때문에 자세한 사용법은 해설하지 않는다.UI는 쉽게 알아볼 수 있기 때문에 다른 CMOS를 사용한 사람이라면 바로 사용할 수 있을 것이다.모르면 참조공식 문서.

Cloudinary와 함께 작업

Cloudinary와 협업을 위해 다음과 같은 작업을 수행합니다.

라이브러리 설치

설치@strapi/provider-upload-cloudinary.Strapiv3에 대한 글은 다른 프로그램 라이브러리를 사용했지만 v4에서 @strapi/provider-upload-cloudinary 이 아니면 구축에 실패했습니다.
./my-project

npm install @strapi/provider-upload-cloudinary

환경 변수 세트

가장 먼저 기록된 Cloudinary의 API 키 등을 Heroku의 환경 변수로 설정합니다.CLOUDINARY_NAME에 설치Cloud Name, CLOUDINARY_KEY에 설치API Key, CLOUDINARY_SECRET에 설치API Secret.

Cloudinary 라이브러리 사용

config/env/production/plugins.js, 다음과 같다.
이미지를 업로드하면 자동으로 Cloudinary에 업로드됩니다.
./my-project/config/env/production/plugins.js

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: env("CLOUDINARY_NAME"),
        api_key: env("CLOUDINARY_KEY"),
        api_secret: env("CLOUDINARY_SECRET"),
      },
      actionOptions: {
        upload: {},
        delete: {},
      },
    },
  },
});

config/env/production/middlewares.js, 다음과 같다.
Strapi에 이미지 파일의 축소판을 표시할 수 있습니다.
./my-project/config/middlewares.js

module.exports = [
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
          "media-src": ["'self'", "data:", "blob:", "res.cloudinary.com"],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  "strapi::cors",
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::favicon",
  "strapi::public",
];

참고 자료

동작 확인

이상이 완료되면 Heroku에 디버깅을 진행하여 Strapi의 Media Library에서 Cloudinary로 업로드되었는지 확인하십시오.

Assets 업로드를 클릭하여 악어 이미지를 업로드합니다.

이 GIF처럼 업로드에 조금이라도 시간이 걸렸다면 아마 성공했을 것이다.Cloudinary의 Media Library를 확인해 보겠습니다.

Sample 이미지는 처음부터 샘플 이미지입니다. 신경 쓰지 마십시오.
악어의 이미지가 잘 추가되었습니다!그런데 추가된 건 한 장밖에 없는데 왜 두 장이 있냐.
이는 이미지의 크기가 다르기 때문에 작은 사이즈의 버전과 미리 보기 그림의 사이즈가 있는 이미지도 자동으로 생성됩니다.
그림을 삭제할 때 Strapi에서 Delete만 하면 Cloudinary 옆에 있는 그림도 삭제됩니다.
이상, Heroku와 Cloudinary를 사용하여 Strapi를 무료로 진행할 수 있습니다!

최후

Strapi는 Contentful에 비해 개발자에게 부드러운 느낌을 주는 것을 좋아합니다.
Nuxt3은nuxt/content가 움직이지 않기 때문에 Strapi로 대체하고 싶습니다.괜찮다면 기사를 쓸 생각입니다.
오자나 틀린 곳이 있으면 저에게 알려 주세요.
각주
v4의 경우 2022/1/7에 현재 GraphiQL 플러그인을 설치할 수 없지만 v3는 이미 사용했으니 앞으로 대응할 것입니다.↩︎
Heroku의 PostgresSQL 무료 프로그램으로 최대 1만 줄에 1GB의 용량 제한이 있기 때문에 이보다 더 많은 데이터를 저장하려면 유료 계획이 필요하다.비용 ↩︎ ↩︎