Rails 7에서 Dev.to(무료)와 같은 OG 링크 미리보기를 생성하는 방법

헤이 헤이 헤이 헤이 헤이
Dev.to와 마찬가지로 뷰티 링크 미리보기를 갖는 방법에 대한 빠른 기사

다음과 같은 결과를 얻게 됩니다.



예, "dev.to와 같은"😛로 말 그대로였습니다.
새 프로젝트workby.io와 비슷한 것을 빌드했습니다. 빌드 방법은 다음과 같습니다.

내가 찾은 거의 모든 가이드는 htmlcsstoimage.com을 사용하고 있었고 실제로 dev.to는 그것을 사용합니다. 꽤 유명하고 효율적이지만 1k 이미지당 $14 달러를 지불하고 싶지는 않습니다 😂🐁

그래서 저는 Grover을 사용할 것입니다. Google Puppeteer 및 Chromium을 사용하여 HTML을 PDF, PNG 또는 JPEG로 변환하는 Ruby gem입니다.

예를 들어 Node.js로 빌드하고 싶다면 저를 팔로우할 수도 있습니다. Puppeteer는 대중적이고 사용하기 쉽습니다.

간단히 말해 HTML 보기를 만들고 스크린샷을 찍을 것입니다.

빈 Rails 프로젝트를 만들거나 현재 앱에 추가 기능을 추가할 수 있습니다.

설정

다음을 사용하여 Grover gem 설치bundle add grover
그리고 Puppeteer인 Grover의 종속성은 다음과 같습니다.yarn add puppeteer
그런 다음 다른 링크 미리 보기 템플릿으로 응답할 수 있는 빈 컨트롤러를 만듭니다.rails g controller og-imager dev_todev_to 작업에서 Grover를 호출하여 마법을 수행하도록 합시다.app/controllers/og_imager_controller.rb

class OgImagerController < ApplicationController
  # GET /og_imager/dev_to
  # @param {string} title
  # @param {string} avatar
  # @param {string} username
  # @param {string} timestamp
  # @param {array} logos
  # @returns image/png
  def dev_to
    # Get params and set to variable
    # TODO: Retrieve your object instead :p
    @title = params[:title]
    @avatar = params[:avatar]
    @username = params[:username]
    @timestamp = params[:timestamp]
    @logos = params[:logos]

    # Grover.new accepts a URL or inline HTML and optional parameters for Puppeteer
    grover = Grover.new(
      render_to_string
    )

    # Get a screenshot
    png = grover.to_png

    # Render image
    send_data(png, type: 'image/png', disposition: 'inline')
  end
end

다음은 간단한 HTML/CSS 보기입니다.app/views/og_imager/dev_to.html.erb

<div class="container">
  <div class="card">
    <h1 class="title">
      <%= @title %>
    </h1>
    <div class="details">
      <div class="user">
        <img src="<%= @avatar %>" class="avatar">
        <p class="username">
          <%= @username %> - <%= @timestamp %>
        </p>
      </div>
      <div class="logos">
        <% @logos.each do |logo| %>
          <img src="<%= logo %>" class="logo">
        <% end %>
      </div>
    </div>
  </div>
</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

  *{
    font-family: 'Roboto', sans-serif;
    color: #cd685f;
  }

  .container{
    width: 1128px;
    height: 600px;
    display: flex;
  }

  .card{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 2.8rem 4rem 4rem 2.8rem;
    border: 3px solid #c56b61;
    border-radius: 25px 25px 0px 0px;
    box-shadow: 7px 10px 0px 1px #c56b61;
    padding: 3.8rem 1.8rem 1.8rem 1.8rem;
  }

  .title{
    margin: 0px;
    font-weight: 500;
    font-size: 5rem;
    line-height: 80px;
  }

  .details{
    display: flex;
    justify-content: space-between;
  }

  .user{
    display: flex;
    align-items: center;
  }

  .avatar{
    border: 3px solid #c56b61;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .username{
    margin: 0;
    font-size: 2.5rem;
  }

  .logos{
    display: flex;
    justify-content: space-between;
  }

  .logo{
    width: 60px;
    height: 60px;
    margin-left: 20px;
    transform: rotate(5deg);
  }
</style>

마지막으로 브라우저 뷰포트(최종 이미지 크기)를 설정하는 초기화 프로그램을 만듭니다.
initializers/grover.rb

Grover.configure do |config|
  config.options = {
    viewport: {
      width: 1128,
      height: 600
    },
  }
end

빈 프로젝트를 생성했고 이를 마이크로 서비스로 사용하려는 경우 이 프로젝트를 Heroku에 배포하는 방법에 대한 가이드가 있습니다.

Heroku 계정에서 앱을 생성합니다(cli가 이미 설치되어 있다고 가정합니다): heroku create your_app_name

JS 라이브러리(Puppeteer)의 Heroku에게 경고: heroku buildpacks:add heroku/nodejs --index=1

또한 그가 Puppeteer 의존성을 설정하도록 도와주세요 😛: heroku buildpacks:add jontewks/puppeteer --index=2

Grover에게 "no-sandbox"에서 Puppeteer를 실행하도록 지시: heroku config:set GROVER_NO_SANDBOX=true

링크 미리보기에서 이 이미지를 사용하려면 The Open Graph protocol 이 필요합니다. 브라우저가 찾는 단순한 메타 태그입니다.

메타 태그는 항상 켜져 있으므로app/views/layouts/application.html.erb

<%= yield(:head) %>

그런 다음 ERB에 이전 블록을 다음으로 채우도록 요청합니다.

<%= content_for :head do %>
  <meta property="og:title" content="<%= @article.title %>">
  <meta property="og:image" content="<%= article_link_preview(@article) %>">
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1128">
  <meta property="og:image:height" content="600">
  <meta name="twitter:card" content="summary_large_image" />
<% end %>

세부정보 보기에서 좋아요: /articles/:idtwitter:card 링크 미리보기에서 더 화려하기 때문에 더 자세한 내용을 읽을 수 있습니다.

이전article_link_preview 메서드는 찾고 있는 URL을 생성하는 간단한 도우미입니다.
app/helpers/articles_helper.rb

def article_link_preview article
  uri = URI.parse('https://your_app_name.herokuapp.com/ogimage')
  uri.query = URI.encode_www_form(
    title: article.title,
    'images[]': article.tags.collect(&:image),
    timestamp: article.created_at.to_formatted_s(:short),
    ...
  )
  uri.to_s
end

당신은 다음과 같은 것을 얻을 것입니다 :https://your_app_name.herokuapp.com/og_imager/dev_to?title=Real%20Time%20Notification%20System%20with%20Hotwire,%20in%20Rails%207&avatar=https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/369241/a0111bcb-a046-4398-98cd-f4cf0e2f8d0d.png&username=Matias%20Carpintini&timestamp=13%20April&logos[]=https://img.icons8.com/office/80/000000/ruby-gemstone.png&logos[]=https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png
여기 전체의 repo이 있습니다.