Rails7+Docker+MySQL環境構築で躓いたところ備忘録

docker-compose run web rails new . --force  --database=mysql 

コマンド実行時に以下のエラー発生

 

[12, #<Thread:0x00007fd78b0bfc60 run>, #<NameError: uninitialized constant Gem::Source (defined?(@source) && @source) || Gem::Source::Installed.new

                                          ^^^^^^^^

 

 

調べると特定のbundlerのバージョンで起きているバグのよう

github.com

 

Dockerfileで以下のようにbundlerのバージョンを指定するよう追記して解決。

RUN gem install bundler -v "2.3.10"

 

Mysql2でエラーが出た話

ポートフォリオを作っていた際にMysql2のエラーが。

つい昨日まで使えていたrails sコマンドも使えなくなる現象が起きたため、原因と解決策について記載しておきます。

 

 

 

出たエラーとしては、SNS認証のためのgemをインストールしようとした時にこのエラー。

 

f:id:m_suzu:20190928160637p:plain

 

なぜ今更Mysqlエラー??と思いSNS認証のためのgemを消してbundle installしても同じエラー。

 

エラー文で言われた通りに

gem install mysql2 -v '0.5.2' --source 'https://rubygems.org/'

のコマンドをしてみるも、エラー。

もしやと思いrails sを試みるも下記のエラー。

f:id:m_suzu:20190928161743p:plain

 

色々調べているうちにこの方の記事にたどり着きました。

見ているとエラー文が一緒!

https://qiita.com/park-jh/items/3084092ac4290ded6c5e

 

githubのissuesに解決方法が載っているとのことなので確認

https://github.com/brianmario/mysql2/issues/1005

 

 

そして上記の記事を参考に下記のコマンドを試したところ動くように!

 

 

bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib --with-cppflags=-I/usr/local/opt/openssl/include"

 

(※1回目はなぜかYou are replacing the current local value of build.mysql2, which is currently nilとのエラーが出ましたが、同じコマンドを2回試したところ通りました。

 

 

 

どうやらOS等のバージョンをアップデートした際に起こるエラーのようでした。

macOSを自動アップデートにしていたので、おそらくそれが原因かなーと。

忘れないよう備忘録としてブログに残しておきます。

heroku+rails+mysql+S3のデプロイについて

Awsは手動で設定しデプロイをするが、herokuはよしなにデプロイをしてくれる。

どちらとも投稿機能をつけるときは外部に保存するストレージを用意しないといけない。

herokuのデプロイは基本的には以下の記事の通りなので割愛。

https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39

 

 

Awsのサービスを使うときは要注意。

Rootユーザー(最初にawsを登録した時のユーザー)での作業はあまりしないほうが良い。(権限が一番強力なためアカウントを不正利用されたら、高額な請求が来てしまうこともある。)

RootユーザーのログインはAuthyなどを利用して2段階認証をつけとくといい。と、スクールのカリキュラムに記載あり。

なのでS3を使用するときはrootユーザーとは別に、S3を利用することのみの権限を持ったユーザーアカウントを設定する。

IAMからユーザーを作成(名前はなんでもいいが、作業がわかる名前)し、そしてS3を使用するための設定をする。

 

S3の使用方法としてはIAMユーザーを作成した際に作られるaws_access_key_idaws_secret_access_keyを通じてS3に画像をアップロードする。

万が一これらの認証情報が流出してしまうと、悪意のある第三者に不正利用をされ、AWSから身に覚えのない高額請求が来てしまう可能性があるため、AWSの認証情報を含んだコードをコミットできないように設定をする。

 

ターミナルで

$ cd ~/

$ brew install git-secrets

とし、git-secretsをインストールしたら

$ cd [アプリ名]   

でアプリの中に移動し、

$ git secrets --install

上記で有効化する。そして

$ git secrets --register-aws --global

このコマンドを実行することで、secret_key, access_keyなど、アップロードしたくないAWS関連の秘密情報を一括で設定することができる。

これでユーザーに関する設定は終わり。

 

次にS3の設定へ。

S3を利用してバケットを作成する。

その際の名前とリージョンは自分で設定。オプションはそのまま。

アクセス許可の設定は下の2つのみチェック(ここでちゃんとしとかないと画像投稿できなくてエラーになる)

 

 

次に画像のアップロード先をS3に変更するための設定をする。

gem fog’をインストールする。

image_uploader.rbfogを使用する記載を書く。

次に/config/initializersの下にcarrierwave.rbというファイルを作成。

ここら辺は以下の記事を参考に記載。

 

https://qiita.com/junara/items/1899f23c091bcee3b058#aws

https://qiita.com/_ayk_study/items/f3c84050e94135e84014

 

先ほど取得したaws_access_keyなどは直接carrierwave.rbには書かず、環境変数に入れて設定するため、

heroku config:set AWS_ACCESS_KEY_ID=awsのアクセスキー”

heroku config:set AWS_SECRET_ACCESS_KEY=awsのシークレットアクセスキー”

などのコマンドもしくはherokuのアプリの中のsettingにあるReveal Config Varsから直接打ち込んで設定する。

 

 

詰まったところ。

S3のアクセス許可がデフォルトのままだと画像投稿できなくてエラーになってしまう。

Heroku logsで見ると下記のエラー。何かの権限がないとは出ているが何の権限かよくわからず

 

Excon::Error::Forbidden (Expected(200) <=> Actual(403 Forbidden)

 

アクセスキー等は間違ってなかったので、とりあえずスクールのカリキュラムの通りにアクセス許可を設定するといけた。

 

参考にしたQiitaの記事には書いてなかったため忘れないようメモ。

formでファイルのアップロードをアイコンでできるようにしたい

送信ボタンをアイコンにする記事は多かったけどファイル選択ボタンをアイコンにする方法がなかなか見つけられなかったので自分用メモ。

 

 

フォームはform_forを使用。アイコンはfont awesome使用。記述はhaml

form_forのあとの("")がブランクになっているのはまだモデルを作成してないため。

あとで@変数を入れる。

 

= form_for("") do |f|
 .input-box
  = f.text_field "content",class: "message_content input-box__text"
  = f.label "image", class: "image-label", for: "message_image" do
   =fa_icon "image"
   = f.file_field :upload_file, class: "image-label__input", id: "message_image"
  = f.submit "Send", class: "new-message__submit-btn"
 
 
f.text_fieldはテキストの入力画面のことなので説明は省略
4行目のf.labelから6行目のf.file_fieldまでが1セット。
 
f.labelの最後にdoをつけて、fa_iconとf.file_fieldのインデントを1つ下げることでlabelにネストすることができる。
またlabelに記載されているfor名とfile_fieldのid名を一緒にすることにより、file_fieldのファイルをアップロードする機能をアイコンにつけることができる。
なおファイル選択のボタンを消すために、scssでdisplay: none;とする。
 
 
↓このように、imageのアイコンにファイル選択ボタンの機能をつけることができる。
 

f:id:m_suzu:20190701184035p:plain

絵画のアイコンをクリックするとアップロードするファイルを選択できる。
 
fa_iconのところを画像に変えて、画像クリックでファイルのアップロードができるようにすることもできる。