IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

Rails で GCP の Cloud Storage を使ってみる

はじめに

ここでは以下の記事を参考にして RailsGCP の Cloud Storage を使ってみることにする。

 

使ってみる

ざっくりとTODOアプリを作成する。データベースには PostgreSQL を設定する。

 

Active Storage を設定を行う。まずはローカルで Active Storage を使ってみる。

  • bin/rails active_storage:install
  • bin/rails db:migrate

 

ルーティングを設定する。

config/routes.rb

f:id:matt-note:20190401174816p:plain

 

モデルで has_one_attached メソッドを実行する。これで Todo モデルに :picture が追加される。

app/models/todo.rb

f:id:matt-note:20190401174936p:plain

 

Strong Parameters で :picutre を受け取れるように設定する。

app/controllers/todos_controller.rb

f:id:matt-note:20190401175219p:plain

 

ビューでファイルをアップロードできるようにする。file_field メソッドの引数に :picture を指定する。

app/views/todos/_form.html.erb

f:id:matt-note:20190401175337p:plain

 

アップロードした画像を個別ページで閲覧できるようにする。

app/views/todos/show.html.erb

f:id:matt-note:20190401175453p:plain

 

これで画像をアップロードして、アップロードした画像を閲覧することができるようになる。サーバーを起動してアクセスしてみる。

f:id:matt-note:20190401175633p:plain

 

コンソールで確認してみる。ターミナルで rails c を実行する。

f:id:matt-note:20190401183257p:plain

f:id:matt-note:20190401181436p:plain

f:id:matt-note:20190401181445p:plain

 

次に、複数ファイルをアップロードできるようにする。

todoモデルで has_many_attached メソッドを実行する。ここでは複数ファイルを :uploads として扱う。

app/models/todo.rb

f:id:matt-note:20190401180200p:plain

 

:uploads を受け取れるように Strong Parameters を設定する。ここではハッシュを渡して、値に空の配列を設定することにする。

app/controllers/todos_controller.rb

f:id:matt-note:20190403101445p:plain

 

複数ファイルをアップロードできるようにビューを修正する。ここでは multiple: true オプションを設定する必要がある。

app/views/todos/_form.html.erb

f:id:matt-note:20190403101645p:plain

f:id:matt-note:20190403101954p:plain

 

アップロードしたファイルを個別ページで表示できるようにする。ここでは各ファイルへのリンクを出力する。

app/views/todos/show.html.erb

f:id:matt-note:20190403102448p:plain

f:id:matt-note:20190403102642p:plain

-> 画像のアップロードと複数ファイルのアップロードをできるようになった。

 

なお、Cloud Storage を使う前に、エラー回避のために、ここまでの画像は削除しておく。

  • rm -rf ./storage/*

 

GCP の設定をする

GCP の Always Free 枠は以下のようになっている。Storage では 5GB を無料で使うことができる。また、画像へのアクセスは1ヵ月で5000回未満にしておくと良い。

f:id:matt-note:20190403104905p:plain

 

新しいプロジェクトを作成する。

f:id:matt-note:20190403103146p:plain

f:id:matt-note:20190403103156p:plain

 

プロジェクト名を入力して「作成」ボタンをクリックする。

f:id:matt-note:20190403103300p:plain

 

Storage からバケットを作成する。

f:id:matt-note:20190403103533p:plain

f:id:matt-note:20190403103653p:plain

 

バケットの名前を入力する。無料枠でストレージを使う場合は「Regional」を設定して、米国のリージョンを設定する。「作成」ボタンをクリックするとバケットを作成できる。

f:id:matt-note:20190403103903p:plain

f:id:matt-note:20190403110023p:plain

 

これでバケットを作成できたので、認証情報を設定する。

f:id:matt-note:20190403104209p:plain

 

「認証情報を作成」から「サービス アカウント キー」をクリックする。heroku から Cloud Storage を使うといった場合は、こちらを選択する。

f:id:matt-note:20190403104547p:plain

 

アカウント名を入力して、役割は「Project」から「オーナー」を選択する。キーのタイプは JSON を設定して「作成」ボタンをクリックする。これでプライベートキーを作成してダウンロードすることになる。

f:id:matt-note:20190403110553p:plain

 

ダウンロードした json ファイルを Rails アプリに配置する。

config ディレクトリに secrets ディレクトリを作成して、json ファイルを配置する。ファイル名は todo-pic.json に変更しておく。なお、ここではディレクトリ名を secrets と複数形で設定している。(後の設定でディレクトリ名を入力ミスすると面倒になる)

f:id:matt-note:20190403110948p:plain

 

config/secrets ディレクトリは Git で管理しないようにする。 .gitignore ファイルに /config/secrets/* を設定する。

f:id:matt-note:20190403111201p:plain

 

config/storage.yml を設定する。ここでは GCP で設定した project と bucket を入力する。開発環境の認証情報は config/secrets 内の json ファイルを使うことにする。

f:id:matt-note:20190403111433p:plain

 

config/environments/development.rb で Active Storage の設定を :google_dev に設定する。

f:id:matt-note:20190403112654p:plain

 

Gemfile に google-cloud-storage を追加する。

f:id:matt-note:20190403113108p:plain

 

bundle install コマンドを実行して gem をインストールする。

 

サーバーを再起動して、アクセスしてみる。画像をアップロードして画像にアクセスすると、以下のようになる。

f:id:matt-note:20190403113257p:plain

-> Cloud Storage に画像をアップロードしてアクセスできるようになった。

 

heroku を使う

heroku アカウントがない場合は、アカウントを作成する。

heroku CLI をインストールする。

f:id:matt-note:20190403115438p:plain

 

プロダクション環境の設定を行う。

config/environments/production.rb で Active Storage の設定を :google に設定する。

f:id:matt-note:20190403115633p:plain

 

heroku にログインする。ターミナルから以下のコマンドを実行する。

  • heroku login

 

heroku にアプリを作成する。アプリ名は heroku で固有となる名前にする必要がある。

  • heroku create todo-pic-hoge

 

heroku で master.key の設定をする。

  • heroku config:set RAILS_MASTER_KEY="$(< config/master.key)"

 

heroku で認証情報の設定をする。環境変数GOOGLE_APPLICATION_CREDENTIALS は config/storage.yml で参照している。

  • heroku config:set GOOGLE_APPLICATION_CREDENTIALS="$(< config/secrets/todo-pic.json)"

 

これで heroku で環境変数を設定できた。設定した環境変数を確認するときは以下のコマンドを実行する。

  • heroku config

 

heroku にアプリを push する。

リモートリポジトリを確認してみる。

  • git remote -v

f:id:matt-note:20190403123934p:plain

 

リポジトリをコミットして、heroku に push する。

  • git add .
  • git commit -m "init"
  • git push heroku master

 

heroku のデータベースでマイグレーションを実行する。

  • heroku run rails db:migrate

 

https://<your-app-name>.herokuapp.com にアクセスする。

f:id:matt-note:20190403124053p:plain

f:id:matt-note:20190403124218p:plain

-> アプリを Heroku にデプロイして、画像を Cloud Storage で処理できるようになった。