[Rails] Rails를 통해 비디오(Active Storage) 업로드

지금은 프로그래밍스쿨을 다니며 포트폴리오 제작 단계로 옮겨가고 있다.
인스타그램 이야기처럼 짧게 투고할 수 있는 애니메이션을 만들고 싶었는데 생각보다 애니메이션을 올리는 기사가 적어 고민이 많았으니 이번엔 잊지 않고 쓰도록 하자.

사이트 축소판 그림

  • [Rails5.2] Active Storage 활용 방법
  • Active Storage를 사용한 동영상 기고 웹 사이트 제작

  • https://stackoverflow.com/questions/50993367/active-storage-displaying-video-in-video-tag
     
  • Active Storage 사용


    당초 Carrier wave 등을 이용해 실현할 계획이었으나, 조사를 하면 Rails의 표준 기능이 파일을 업로드할 수 있기 때문에 이쪽에서 실시했다.
    오늘 액티브 스토어 정도를 아는 초보자이기 때문에 자세한 내용은 다른 사람의 기사를 조사해 주세요.
    애니메이션 투고까지의 절차를 남기다.
    참고 사이트에서 인용하다.
    Rails5.2에 추가된 파일 업로드 기능.이것을 사용하면 표를 이용해 이미지를 간단하게 제작할 수 있는 투고 기능 등이 있다.또한 Amazon S3는 Google Cloud Storage, Microsoft Azure Storage 등 클라우드 스토리지 서비스와 같은 파일을 간단하게 업로드할 수 있습니다.클라우드 저장소를 제외하고는 파일을 로컬 디스크에 저장할 수 있습니다.

    Active Storage 설치

    $ rails active_storage:install
    $ rails db:migrate
    
    active_storage_blobsactive_storage_attachments 두 표를 만듭니다.
    이 두 사람은 이렇게 계속 전진한다.

    모델 생성하기


    이번에는 Video의 모형을 간단하게 만들었다.
    열에 titleintroduction가 생성되었습니다.
    여기에는 동영상 자체를 만드는 열이 없다.
    $ rails g resource video title:string introduction:text
    $ rails db:migrate
    
    이번에는'기고한 영상은 한 번에 한 번'을 전제로 한다.Video 모델에 기술has_one_attached.
    /app/models/video.rb
    class Video < ApplicationRecord
      has_one_attached :video
    end
    
    :video는 파일의 이름으로 용도에 따라 마음에 드는 이름을 지을 수 있다.(이미지 업로드:image 등)

    컨트롤러 생성


    비디오 컨트롤러에 기술합니다.
    /app/controllers/videos_controller.rb
    class VideosController < ApplicationController
    
      def new
        @video = Video.new
      end
    
      def create
        @video = Video.new(video_params)
        @video.create
        redirect_to @video
      end
    
      def show
        @video = Video.find(params[:id])
      end
    
      private
    
      def video_params
        params.require(:video).permit(:title, :introduction, :video)
      end
    end
    
    Video모델에는 :video열이 없지만 여기에는 대응has_one_attaches :video열이 있다.
    이번에는 애니메이션 투고 테스트이기 때문에 new create show만 썼습니다.

    뷰 생성하기


    new에 발언 형식을 기술하다.
    /app/views/videos/new.html.erb
    <%= form_with model: @video, local: true do |form| %>
      <p>title</p><%= form.text_field :title %> <br>
      <p>introduction</p><%= form.text_area :introduction %> <br>
      <p>video</p><%= form.file_field :video %> <br>
      <%= form.submit %>
    <% end %>
    

    이런 느낌으로 투고 형식이 형성된 것 아닌가 싶습니다.
    쇼페이지도 만들고.
    /app/views/videos/show.html.erb
    <% if @video.video.attached? %>
      <p><%= @video.title %></p> <br>
      <p><%= @video.introduction %></p>
      <%= video_tag rails_blob_path(@video.video) %>
    <% end %>
    
    .attached?에서는 @video 영상이 있는지 확인할 수 있다.
    간단하게 <%= video_tag @video.video %>라고 쓰면 데이터/app/assets/를 찾으러 가면 자산 라인의 오류가 발생할 것 같다.rails_blob_path.

    이렇게 떴어요.다만 지금 이러면 애니메이션을 재생할 수 없다.<%= video_tag %>에 기술<video>.
    /app/views/videos/show.html.erb
    <% if @video.video.attached? %>
      <p><%= @video.title %></p> <br>
      <p><%= @video.introduction %></p>
      <video src="<%= rails_blob_path(@video.video) %>" type="video/mp4" controls></video>
    <% end %>
    
    controls 비디오를 사용하기 쉬운 인터페이스를 자동으로 만듭니다.
    이렇게 되면 동영상을 올리고 표시하며 재생까지 할 수 있다.

    실제 제작된 열이 아니기 때문에 지금부터라고 일람해 봤는데 정말 잘 진행될 수 있을까요
    또 무슨 일이 있으면 투고하고 싶습니다.

    주의점


    이번에는 제작진이기 때문에 제작 과정을 고려하면 애니메이션은 무료 소재이고 몇 초 정도 짧은 것을 이용하는 전제 조건이다.
    영상이 긴 것은 사이즈가 커서 현지에서는 잠시 말하지 않고 인터넷에서 하면 매우 불편하다.
    (학교의 사람들에게 최소한의 주의를 받아야 한다.)
    사용료가 필요하지만 AWS S3를 사용하는 방법 같은 게 있는 것 같아요(이 근처는 아직 잘 모르겠어요)
    자신처럼 첫 번째 학자라고 생각할 수 있는 방법이 있었으면 좋겠어요.

    좋은 웹페이지 즐겨찾기