Tag: "ブログ開発日記"

2020-04-20 22:02

画像アップロードできるようにした

ブログ開発日記

Photo by Glenn Carstens-Peters on Unsplash


重い腰を上げて画像をアップロードできるようにした。
S3やCloud Storageも考えたけど、Herokuのadd-onがあって手軽そうだったのでCloudinaryにした。
Herokuのコンソールでadd-onをインストールして、ドキュメントのとおりActiveStorageの設定を有効にしたらあっさりアップロードできた。
やってみれば簡単だった。

2020-04-12 22:03

ログインエラーが出ていたのを直した

ブログ開発日記

Ruby 2.7.1にアップデートしたのでブログに書いておこうと思ってログインしたらエラーになった。
Herokuアプリのログを確認してみたところ:

2020-04-12T12:04:23.599633+00:00 app[web.1]: I, [2020-04-12T21:04:23.599545 #3]  INFO -- : [14cc8621-cf83-41f0-bc6f-a6ce692ec238] Started POST "/auth/github?origin=https://oknm.jp/auth" for 175.131.16.228 at 2020-04-12 21:04:23 +0900
2020-04-12T12:04:23.600394+00:00 app[web.1]: I, [2020-04-12T21:04:23.600343 #3]  INFO -- : [14cc8621-cf83-41f0-bc6f-a6ce692ec238] (github) Request phase initiated.
2020-04-12T12:04:23.604646+00:00 heroku[router]: at=info method=POST path="/auth/github?origin=https://oknm.jp/auth" host=oknm.jp request_id=14cc8621-cf83-41f0-bc6f-a6ce692ec238 fwd="175.131.16.228" dyno=web.1 connect=1ms service=8ms status=302 bytes=1307 protocol=http
2020-04-12T12:04:24.167130+00:00 heroku[router]: at=info method=GET path="/auth/github/callback?error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application.&error_uri=https%3A%2F%2Fdeveloper.github.com%2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting-authorization-request-errors%2F%23redirect-uri-mismatch&state=adaf9f33d654c539841482c559e8b4b77c46a2f239aa5efa" host=oknm.jp request_id=58139b4d-7aa9-41b7-9037-6436dc4f6c24 fwd="175.131.16.228" dyno=web.1 connect=1ms service=8ms status=302 bytes=816 protocol=https
2020-04-12T12:04:24.162186+00:00 app[web.1]: I, [2020-04-12T21:04:24.162082 #3]  INFO -- : [58139b4d-7aa9-41b7-9037-6436dc4f6c24] Started GET "/auth/github/callback?error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application.&error_uri=https%3A%2F%2Fdeveloper.github.com%2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting-authorization-request-errors%2F%23redirect-uri-mismatch&state=adaf9f33d654c539841482c559e8b4b77c46a2f239aa5efa" for 175.131.16.228 at 2020-04-12 21:04:24 +0900
2020-04-12T12:04:24.163086+00:00 app[web.1]: I, [2020-04-12T21:04:24.163019 #3]  INFO -- : [58139b4d-7aa9-41b7-9037-6436dc4f6c24] (github) Callback phase initiated.
2020-04-12T12:04:24.163635+00:00 app[web.1]: E, [2020-04-12T21:04:24.163560 #3] ERROR -- : [58139b4d-7aa9-41b7-9037-6436dc4f6c24] (github) Authentication failure! redirect_uri_mismatch: OmniAuth::Strategies::OAuth2::CallbackError, redirect_uri_mismatch | The redirect_uri MUST match the registered callback URL for this application. | https://developer.github.com/apps/managing-oauth-apps/troubleshooting-authorization-request-errors/#redirect-uri-mismatch
2020-04-12T12:04:24.364745+00:00 app[web.1]: I, [2020-04-12T21:04:24.364644 #3]  INFO -- : [54454333-96e9-4f35-9fd3-606895a438f2] Started GET "/auth/failure?message=redirect_uri_mismatch&origin=https%3A%2F%2Foknm.jp%2Fauth&strategy=github" for 175.131.16.228 at 2020-04-12 21:04:24 +0900
redirect_uri_mismatchとのこと。前まで動いてたのになぜ…。

いろいろ調べたところOmniAuth.config.full_hostを設定すればいいらしい？

参考: OmniAuth: ロードバランサ配下での redirect_uri_mismatch 問題 - tkrdの日記

とりあえず固定値で設定したところログインできるようになった。

https://github.com/okonomi/blg/commit/2b23ee190f8ff7c2be02654f8a390ad11b8a8ca2

なにかのgemのアップデートが影響してるのかな…

2019-12-30 23:11

onkcopをejectした

ブログ開発日記


onkcopが更新されなくなって久しく、rubocopのアップデートに追従していない状態なので、onkcopを外してrubocopとプラグインを入れ直した。

コードスタイルにあまり思想はないので、既存コードに大きく手を入れなくていい範囲で.rubocop.ymlを書いておいた。

onkcopの設定内容は今でも有用なので、どうするか迷ったときは参考にしたい。

2019-06-15 20:34

シンタックスハイライトをつけた

ブログ開発日記

コードを書いたときにシンタックスハイライトが効くようにしてみた。

enable syntax highlighting using highlight.js · okonomi/blg@e5835bc

highlight.jsを使った。
TrixエディタのUIだとHTMLの直接編集ができないので<code class="ruby">みたいに言語を指定したりできないけど、highlight.jsは勝手に言語を判別してなんとなくいい感じに色付けしてくれるので楽。

Ruby:
class User < ApplicationRecord
  before_create :set_remember_token

  private

    def set_remember_token
      self.remember_token = generate_remember_token
    end

    def generate_remember_token
      SecureRandom.hex(20)
    end
end
HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>Sample</title>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>
まあ無いよりはマシかな…？

2019-06-14 22:47

Docker Composeで開発環境を構築した

ブログ開発日記

Railsサーバとwebpack-dev-serverを別コンテナで起動して、WEBPACKER_DEV_SERVER_HOSTでRailsにwebpack-dev-serverの居場所を教えてあげる形にした。

version: "3.7"

services:
  web: &app_base
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - bundle:/app/.bundle
      - node_modules:/app/node_modules
      - home:/root
    environment:
      BUNDLE_PATH: /app/.bundle
      BUNDLE_JOBS: 4
      WEBPACKER_DEV_SERVER_HOST: webpacker
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bin/rails s -p 3000 -b '0.0.0.0'"
    depends_on:
      - db
  webpacker:
    <<: *app_base
    ports:
      - "3035:3035"
    command: bin/webpack-dev-server
  db:
    image: postgres:11.2
    ports:
      - "5432:5432"
    volumes:
      - pg_data:/data
    environment:
      PGDATA: /data

volumes:
  bundle:
  node_modules:
  pg_data:
  home:

2019-06-07 18:38

OGP対応した

ブログ開発日記

meta-tagsを使ってOGP対応した。

https://github.com/kpumuk/meta-tags

Chrome拡張とFacebookやTwitterの開発ツールで動作確認した。
descriptionはとりあえずサイト名を設定してるので、きちんと本文のはじめの方だけ切り出して設定するとかを後でやる。

2019-06-06 21:12

HerokuのデプロイをDocker化した

ブログ開発日記

Dockerの勉強がてら、HerokuのデプロイをDocker化（という言葉であってるのか？）した。

まずstackをcontainerに変更する。
herokuコマンドで切り替え:

heroku stack:set container -a oknmjp
Review Appはapp.jsonの指定を変更:

{
   "stack": "container"
}
次に、アプリの定義ファイルheroku.ymlを作る:

build:
  docker:
    web: Dockerfile.production
  config:
    GITHUB_OAUTH_CLIENT_KEY: xxx
    GITHUB_OAUTH_CLIENT_SECRET: xxx
    SECRET_KEY_BASE: xxx
release:
  image: web
  command:
    - bin/rails db:prepare
run:
  web: bin/rails server -p $PORT
あとはDockerfile.productionをいい感じに用意する。

ハマったこと:
  • イメージビルド時にbin/rails assets:precompileを実行しているが、SECRET_KEY_BASEを設定する必要があった
  • Railsサーバの起動ポートは$PORTで指定しないといけない
解決してないこと:
  • ビルド時にSECRET_KEY_BASEとかの漏洩しちゃいけない値はどうDockerに渡せばいいのか
    • アプリのConfig Varsはビルド時には参照できない
    • いまはとりあえずダミー値を渡してるけどあんまり良くない気がする
まだDocker化した恩恵は感じてないけど…

2019-06-02 17:05

ブログ開発日記

投稿ページの<title>タグに個別のタイトルを表示するようにした。

2019-05-18 22:51

ActionTextのフォームをE2Eテストした

ブログ開発日記

ActionTextのリッチテキストエディタは単純な<textarea>ではなく、JSでテキスト入力をトラップして処理してる（らしい）ので、capybaraでフォームの入力をしようとしても普通のやり方だとうまくいかなかった。

どうしたらいいのかなと思ってたけど、ちょうどいいPRが出ていた。
page.execute_scriptでJSを実行して文字列をリッチテキストエディタに入力させるらしい。なるほど。
同じようにやったらテストが上手く動くようになった。

2019-05-12 22:22

onkcopを導入した

ブログ開発日記

コードが汚くなってきたのでrubocopを導入したくて、調整するのが面倒なのでonkcopを入れてみた。よく調整されてるし、.rubocop.ymlに設定理由がコメントされてて勉強になる。

そのままの設定だとbin/以下のファイルで引っかかるけど自分で作ったファイルじゃないので除外設定した。
普通に設定するとonkcopで指定されてる除外設定を上書きしてしまうので、追加されるようにinherit_modeを指定する。

inherit_mode:
  merge:
    - Exclude

AllCops:
  Exclude:
    - "bin/*"
参考:

2019-05-12 19:03

記事編集画面に<code>タグを挿入するボタンを付けた

ブログ開発日記

ActionTextが内部で使ってるTrixは自動的にツールバーを出してくれるけど、<code>タグの機能がなかったので付けた。
Trix.config.textAttributesに要素を追加するのと、Trix.config.toolbar.getDefaultHTMLを置き換えたらできた。
ツールバーにボタンを追加するのは現状デフォルトのHTMLを全部置き換えるしかなくて、単純にボタンを追加するというAPIがない。
Issueでリクエストが出ていたので+1しておいた。そのうち対応されたらいいなと思う。

2019-05-11 23:18

ブログ開発日記

長文を書くときに一旦保存したいなと思ったので、下書き機能をつけた。

2019-05-11 19:27

ブログ開発日記

同じ日に複数投稿したら時系列がよくわからなくなるので投稿時間も表示するようにした。
<input>にtype="datetime-local"があるの知らなかった。
あとタイムゾーンの設定でちょっとハマってしまった。
config.time_zoneを設定しておけばよさそうと理解した。
念の為TZ環境変数も設定しておいた。

2019-05-11 15:00

タグ機能を実装した

ブログ開発日記

投稿にタグを付けられるようにした。タグの選択はオシャレなUIにしたかったけど手間がかかりそうだったのでとりあえず<select multiple>にした。

2019-05-10 00:00

ブログタイトルを設定できるようにした

ブログ開発日記

BLOG_TITLE環境変数で設定できるようにした。

設定ファイルとかDBで設定するのはなんか手間のわりにメリットが少ないかなあと思って環境変数にしたけど、viewファイルで環境変数を直接参照しててなんかかっこ悪い気がするけどどうなんだろう。他のプロジェクトはどうやってるんだろうか。

2019-05-09 00:00

Dependabotの設定ファイルを作った

ブログ開発日記

id:sue445さんの記事を参考にDependabotの設定ファイルを置いてみた。
こんな内容にした:

# c.f. https://dependabot.com/docs/config-file/
version: 1

update_configs:
  - package_manager: "ruby:bundler"
    directory: "/"
    update_schedule: "daily"
    allowed_updates:
      - match:
          update_type: "all"
    automerged_updates:
      - match:
          dependency_type: "development"
          update_type: "all"
      - match:
          dependency_type: "production"
          update_type: "semver:patch"
    version_requirement_updates: "off"
  - package_manager: "javascript"
    directory: "/"
    update_schedule: "daily"
    allowed_updates:
      - match:
          update_type: "all"
    automerged_updates:
      - match:
          dependency_type: "development"
          update_type: "all"
      - match:
          dependency_type: "production"
          update_type: "semver:patch"
    version_requirement_updates: "off"

2019-05-06 00:00

"Deploy to Heroku"ボタンを付けた

ブログ開発日記

READMEに"Deploy to Heroku"ボタンを付けてみた。簡単にデプロイできるようになって便利。

2019-05-03 00:00

ブログ開発日記

投稿のURLにIDが見えてるとちょっとかっこ悪いというか、ソートがID順ではないのにID順なのを期待してしまいそうでややこしいのでランダム値にした。

DBマイグレーションでカラム追加したときに既存レコードにデータをどう設定するかという問題でちょっと悩んだが、面倒になってデプロイ後にrails consoleで対応した。
migration 時にデータを操作するのは悪手か? - Qiita

2019-05-02 00:00

ブログ開発日記

このサイトをGatsby on NetlifyからRails on Herokuに移行した。

Gatsbyで手っ取り早く作ったけど、Gatsbyに慣れてないせいでかゆいところに手が届かなかった。
じゃあもう自分で作ったほうが手っ取り早いなと思ってRailsで作り直した。

Rails 6.0.0.rc1で作ってる。いまのところ特に不具合に遭遇せず普通に開発できてる。

あとAtomフィードをつけた。AtomFeedHelperで簡単にできた。
https://api.rubyonrails.org/classes/ActionView/Helpers/AtomFeedHelper.html

2019-05-01 00:00

bulmaで見た目を整えた

ブログ開発日記

前から使ってみたかったbulmaを使ってみた。
https://bulma.io/

bulmaはクラス名が叙述的になっていてわかりやすい。ちょっとRSpecに近い書き味。

あとは投稿日をつけたり、ActionTextを導入したり。

ActionTextを入れたあとsystem specが一部失敗するようになってしまった。ちょっと調べたけどわからなかったので、のちほど調査することにしていまは無視することにした。