Kntmrkm.new

WEB技術のメモ

x-editable rails carrierwave ajax remote更新

特異なケースで、別プロジェクトで再度困らないようにメモ。

  • rails5
  • x-editable
  • carrierwave

現象

railsで画像のアップロードをajaxで行う際に、画像なしの場合は更新後のjsが動作するが、画像ありの場合にjs.erbが実行されない。 render時にeditableのselectがあるケースで発生。

= editable stock, :grade_id, type: 'select', showbuttons: true,
      emptytext: 'grade', source: @grades_editable_source

@grades_editable_source[]の場合には動く。また、binding.pryで見てみると@grades_editable_sourceの中身は正しく存在する。

その他要因

以下を利用しているので、以下のケースだけかもしれない。

  • cloudinary
  • carrierwave-data-uri

rails5 アップグレード

Rails4.2からのアップグレードメモ。

重要

autoloadがproductionでのみ読み込まれない

一番困るタイプ。productionのみで発生する。

config.paths.add 'lib', eager_load: trueで対応する。

qiita.com

Gemfile

bundle updateで依存関係を確認して適宜修正

TurbolinksはjQueryを使う場合はgem 'turbolinks', '< 5.0'とする。

LoadError: cannot load such file -- rack/showexceptions

Gemfileにsinatraがある場合に発生。

rails app:update

rails app:updateで設定ファイルを更新すると上書き確認が沢山出て来る。routes.rbなどをYとすると初期化されるので、 nを選択していき、binフォルダのみを上書きする。

手作業で設定ファイルの差分を変更

上書きされたら困るものはrails5を新規アプリケーションで作成して差分を更新していく

config/development.rb

-  config.action_controller.perform_caching = false
+  # Enable/disable caching. By default caching is disabled.
+  if Rails.root.join('tmp/caching-dev.txt').exist?
+    config.action_controller.perform_caching = true
+
+    config.cache_store = :memory_store
+    config.public_file_server.headers = {
+      'Cache-Control' => 'public, max-age=172800'
+    }
+  else
+    config.action_controller.perform_caching = false
+
+    config.cache_store = :null_store
+  end
+  config.action_mailer.perform_caching = false

config/production.rb

-  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
+  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
-  config.assets.digest = true
+  #config.assets.digest = true # no need rails5
-  #config.log_tags = [ :subdomain, :uuid ]
+ config.log_tags = [ :request_id ]
+  # Use a real queuing backend for Active Job (and separate queues per environment)
+  # config.active_job.queue_adapter     = :resque
+  # config.active_job.queue_name_prefix = "rails5_#{Rails.env}"
+  config.action_mailer.perform_caching = false
+  # Use a different logger for distributed setups.
+  # require 'syslog/logger'
+  # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')

+  if ENV["RAILS_LOG_TO_STDOUT"].present?
+    logger           = ActiveSupport::Logger.new(STDOUT)
+    logger.formatter = config.log_formatter
+    config.logger = ActiveSupport::TaggedLogging.new(logger)
+  end

config/test.rb

-  # Configure static file server for tests with Cache-Control for performance.
-  config.serve_static_files   = true
-  config.static_cache_control = 'public, max-age=3600'
+  # Configure public file server for tests with Cache-Control for performance.
+  config.public_file_server.enabled = true
+  config.public_file_server.headers = {
+    'Cache-Control' => 'public, max-age=3600'
+  }
+  config.action_mailer.perform_caching = false
- # Randomize the order test cases are executed.
-  config.active_support.test_order = :random

app/models/application_record.rbに書き換え

ActiveRecord::BaseApplicationRecordに書き換える。

class ApplicationRecord < ActiveRecord::Base
  self.abstract_class = true
end

Herokuで`ridgepole`を実行する

database.yml

production: <<: *default host: <%= ENV['DB_HOST'] %> pool: <%= ENV['DB_POOL'] %> port: 5432 database: <%= ENV['DB_NAME'] %> username: <%= ENV['DB_USER'] %> password: <%= ENV['DB_PASS'] %>

コマンド

heroku run bundle exec ridgepole -c config/database.yml --apply --file=db/schemefile.rb -E production

macOS PostgreSQLのアップグレード(brew)

通常なら、以下の記事のようにbrew upgrade後に移行してからbrew cleanupするのだけど、移行前にcleanupしてしまった場合。

kntmrkm.hatenablog.jp

バックアップを取る

/usr/local/varにあるpostgresフォルダをバックアップしておく(9.6への移行ならpostgres96など)。

Postgres初期化

  • initdb /usr/local/var/postgres -E utf8

移行前のバージョンのPostgreSQLを入れる

pg_upgradeをしてみる

前後が曖昧なので、このタイミングでアップグレードしてみる。

pg_upgrade -b /usr/local/Cellar/postgresql95/9.5.5/bin -B /usr/local/Cellar/postgresql/9.6.1/bin -d /usr/local/var/postgres95 -D /usr/local/var/postgres

恐らく、以下のエラー

LOG:  invalid value for parameter "log_timezone": "Japan"
LOG:  could not open directory "/usr/local/share/postgresql95/timezone": No such file or directory
LOG:  invalid value for parameter "TimeZone": "Japan"
FATAL:  configuration file "/usr/local/var/postgres95/postgresql.conf" contains errors
 stopped waiting

これは、/usr/local/share/postgresql95のフォルダがないから?なので、/usr/local/share/postgresqlをコピーする。

パーミッションエラー

DETAIL:  Permissions should be u=rwx (0700).
 stopped waiting

バックアップ時にmkdirしたりすると権限変わっているはずなので、chmod 700 /usr/local/var/postgres95する。

どっかのタイミングでdocker環境にしたほうが楽なのかな。

Herokuで無料のSSL設定とLet'sEncrypt

ドメインの準備

example.comなどのルートドメインでherokuのアプリにアクセスするために、 S3にリダイレクトするためのバケットを作り、Route53のAレコードの設定でTargetをS3バケットとする。

example.comにアクセスするとwww.example.comにリダイレクトされる。

Macでの準備

collectiveidea.com

brew install certbot

ローカルでマニュアル設定する場合は以下のように開始する。

sudo certbot certonly --manual

sudo certbot certonly --manual -d www.example.com(登録するサーバのFQDN)

Make sure your web server displays the following content at
http://www.example.com/.well-known/acme-challenge/xxxxxxxxxxxxxxxxx before continuing:

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

If you don't have HTTP server configured, you can run the following
command on the target server (as root):

mkdir -p /tmp/certbot/public_html/.well-known/acme-challenge
cd /tmp/certbot/public_html
printf "%s" yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy > .well-known/acme-challenge/xxxxxxxxxxxxxxxxx

# run only once per server:
$(command -v python2 || command -v python2.7 || command -v python2.6) -c \
"import BaseHTTPServer, SimpleHTTPServer; \
s = BaseHTTPServer.HTTPServer(('', 80), SimpleHTTPServer.SimpleHTTPRequestHandler); \
s.serve_forever()"
Press ENTER to continue

xxxxxxxxxxxxxxxxxLETSENCRYPT_REQUESTとして、 yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyLETSENCRYPT_RESPONSEとして登録する。

Railsで応答する場合の設定

ルーティング

get '/.well-known/acme-challenge/:id' => 'pages#letsencrypt'

コントローラ

force_sslを行わないようにする。 ApplicationControllerでは、force_sslを実行して、pagesでは実行しない。

force_ssl if: :use_ssl?

private

    def use_ssl?
      Rails.env.production?
    end

# PagesController
private

    def use_ssl?
      false
    end
  def letsencrypt
    if params[:id] == ENV["LETSENCRYPT_REQUEST"]
      render text: ENV["LETSENCRYPT_RESPONSE"]
    end
  end

証明書作成後

Press ENTER to continue

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at
   /etc/letsencrypt/live/example.com/fullchain.pem. Your cert will
   expire on 2016-12-11. To obtain a new or tweaked version of this
   certificate in the future, simply run certbot again. To
   non-interactively renew *all* of your certificates, run "certbot
   renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

上記のような出力が出たら成功となる。

HerokuのFree SSL Beta

blog.heroku.com

  • heroku labs:enable http-sni --app <app name> => もういらない
  • heroku plugins:install heroku-certs -> もういらない

heroku certs:add /etc/letsencrypt/live/example.com/fullchain.pem /etc/letsencrypt/live/example.com/privkey.pem --app <app name>

MacでWordPressテーマ編集・OpenShiftで公開

OpenShiftの無料コンテナでWordPressを運用し、独自テーマを開発する際のメモ。

PHP

brewでインストールしたphpを使う

  • brew install php56

Apache

  • atom /etc/apache2/httpd.conf
  • DocumentRoot, Directoryを変更
  • LoadModule php5_module /usr/local/Cellar/php56/5.6.24/libexec/apache2/libphp5.so
  • sudo apachectl restart

MySQL

OpenShift

  • WordPressコンテナのアプリを作成
  • git clone ssh://***@***.rhcloud.com/~/git/***.git/

.openshift/config以下の編集

  • .htaccess : Header set Access-Control-Allow-Origin "http://***"
  • wp-config.php
define('AWS_ACCESS_KEY_ID', 'XXX');
define('AWS_SECRET_ACCESS_KEY', 'XXX');

WordPress(ローカル)

テーマ編集用のWordPressをローカルにインストール

テーマの作成

  • underscoresをsass形式でダウンロード

underscores.me

テーマ編集手順

  • ローカルのWordPressで編集テーマを開発
  • GulpタスクでOpenShiftのディレクトリのthemeへコピー
  • Openshiftディレクトリでgitからpush(Openshift上で適用される)

CloudflareでHerokuを独自ドメイン・SSL化

Herokuで独自ドメインSSL

HerokuのSSL独自ドメインで利用する場合は、月額$20かかります。 Cloudflareというサービスを使えば不要です。

apserver.hatenablog.com

本当にできてしまいました。簡単なサービス公開はこれで十分な気がする。

おおまかな流れ

DNSの設定例

f:id:kntmrkm:20160605223744p:plain

SSLの設定

しばらくリダイレクトやら、セキュアなページではない表示が出ていたが、SSLの設定を変更すると意図した通りに接続された。 画像中のActive Certificateという表示が最初はなかった気がするが・・・

f:id:kntmrkm:20160605223935p:plain

使用される証明書

f:id:kntmrkm:20160605224246p:plain