KeiIchiのブログ

プログラミング学習で、日々学んだことを書いていきます！

レスポンシブデザイン

現在、ポートフォリオのレスポンシブデザインを実装しており、その実装で学んだことをアウトプットしていきたいと思います。

レスポンシブデザインの記事で下記のものを参考にさせていただきました。 Sassで簡単にメディアクエリを使用する方法

$pc: （デバイスの横幅）px;

@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}

という形で、定義しておいて

レスポンシブデザインを適用させたいクラス名{
@include pc {
 　width: ~px;
  };
}

とすることによって、定義したpcの数値よりも値が大きい場合に widthが適用されます。 $pc以外にも、$tbや、$spなど（変数の命名は自由で）を指定していくことで、環境毎でwidthが適用できるようになりました。

今回は以上になります。

本番環境にデータを挿入する方法

現在、作成したポートフォリオの本番環境にデータを流しこむという作業をしているさいに、詰まったので その備忘録として短いですが書いていきます

結論として、データベースをながしこむパスの位置が間違っていた

EC2インスタンスにログインした後
$ cd /var/www/アプリケーション名/current を入力
その後
$ rails db:seed RAILS_ENV=production
ここのRAILS_ENV=productionを忘れないように注意しておく

以上の記述で、本番環境でのデータ挿入が行えました

参考にさせて頂いた記事

Seed.rbを本番環境に保存

今回は以上になります。

本番環境でのgoogle apiが動かなくなった時の対処

現在PFをawsにデプロイした状態で、いざ本番環境の動作確認を行っていくと、google map apiが動作しなくなっていました。 ローカルの開発環境では、動作するのにということで、試行錯誤した結果を書いていきます。

結論から言うと、本番環境での環境変数の設定を行っていなかったためです。

[ec2-user@ipアドレス、アプリケーション名]$ sudo vim /etc/environment

上の記述で、vim編集ページを開きます

GOOGLE_MAP_API_KEY='取得したapi_key'

そして、環境変数を反映させるため、一旦EC2から抜けて、再度入ります。 本番環境で確認すると、google mapが表示されていました。

知識不足な点

  • process.envを用いた記述を行うのはセキュリティの面でよくないらしく、こういった環境変数を環境ごとで管理する際の良い方法はもっとたくさんある。
  • プラグインあたりは、全くわかっていないので、詰まったら適宜調べていきたい。

今回は、以上になります。

htmlでの複数行のコメントアウトをしたい場合には

いつもは、vscodeでcommand / で自動でコメントアウトをしていて、 そのショートカットで複数行がうまくコメントアウトできないときにどうやったらいいのか ほんとたいしたことはないですが、書いていきます

結論

<!-- コメントアウトしたい内容 -->

とっても簡単でした！ 今回は以上になります。

参考サイト

HTMLでコメント、コメントアウトを書くには

bundle installを行った際のエラー解決

本番環境で利用するアプリケーションサーバーにunicornを用いるため、それをgemを用いてインストールする際に起こったエラーとその解決方法を短いですが書いていきます。

gemfileに以下の内容を記述

group :production do
  gem "unicorn"
end
% bundle install
#実行結果
~長文
An error occurred while installing kgio (2.11.3), and Bundler cannot continue.
Make sure that `gem install kgio -v '2.11.3' --source 'https://rubygems.org/'` succeeds before bundling.

とりあえずgem install kgio -v '2.11.3' --source 'https://rubygems.org/を実行してみるが、実行結果に特に変わった内容はなかった。しかしその記述の中に、

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  ~/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/extensions/x86_64-darwin-20/2.6.0/kgio-2.11.3/mkmf.log

と記載されていたので、それを調べるために

% tail -f   ~/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/extensions/x86_64-darwin-20/2.6.0/kgio-2.11.3/mkmf.log
#実行結果
/* begin */
1: #include "ruby.h"
2: 
3: int main(int argc, char **argv)
4: {
5:   return 0;
6: }
/* end */

となり、よくわからなかったので、tail -Fコマンドを用いて実行ログを常に確認できるようにしました。

コンソールタブを別にして開き
% tail -F ~/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/extensions/x86_64-darwin-20/2.6.0/kgio-2.11.3/mkmf.log
#実行結果
ログが出力される状態となる

別のタブにて
% bundle install

すると、tail -F　~/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/extensions/x86_64-darwin-20/2.6.0/kgio-2.11.3/mkmf.logを実行したタブにて

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
checked program was:

エラー文を見つけられました。検索をかけるとxcodeのコマンドラインツールがインストールされていないことにより起きているとわかったので（macのアップデートを以前行っていたことが関係しているかもしれません）

%  xcode-select --install
% bundle install

これでgemのインストールが行えました。 今回は以上になります。

EC2インスタンスに、アプリケーションをクローンするための準備

現在、awsのEC2インスタンスに、アプリケーションのコードをクローンするための準備を行っています。 その作業で行ったことを、短いですが書いていきます。

事前にEC2インスタンスの作成は行っており、そのログインは行える状態であるとします。

EC2インスタンスからGitHubにアクセスするためには、作成したEC2インスタンスssh公開鍵をgithubに登録する必要があります。ssh鍵をgithubに登録することによって、githubはそれを認証に利用し、コードのクローンを許可してくれるようになります。

EC2サーバのssh鍵をのペアを作成し、githubにssh鍵を登録します

[ec2-user@ip-インスタンスID~]$ ssh-keygen -t rsa -b 4096

ssh公開鍵の値を確認し、Githubに登録する

[ec2-user@ip-インスタンスID ~]$ cat ~/.ssh/id_rsa.pub
#実行結果
ssh-rsa〜非常に長い文字の羅列が並べられる~

githubのsettingsから、sshの項目を選択する。画面遷移後に、右上のNew ssh Keyをクリックする 上記のssh-rsaから全ての、文字列をコピーして貼り付ける

上記の設定を行ったら、接続が完了していることを確認する

[ec2-user@ip-インスタンスID ~]$ ssh -T git@github.com
#実行結果
Hi githubのユーザー名! You've successfully authenticated

今回は以上になります。

ssh接続をした際の、ssh_dispatch_run_fatal: ~Broken pipeの対処

現在、私は作成中のPF（ポートフォリオ）を、awsを用いて公開できるように作業しています。 EC2インスタンスを作成し、そのインスタンスにログインする際に、起きたエラーとその解決方法を、短いですが書いていきます。 ターミナルにて、以下を実行

% ssh -i awsで作成した秘密鍵 ec2-user@Elastic IPアドレス
# 実行結果
~
Are you sure you want to continue connecting (yes/no/[fingerprint])?

そこで、参考にしていた記事等の内容やその説明を確認した後に、yesを入力、すると...

~
Are you sure you want to continue connecting (yes/no/[fingerprint])?yes
ssh_dispatch_run_fatal: ~Broken pipe

このエラーは、sshの接続が切れてしまったからです。なぜ切れてしまったのかというと、ssh接続を実行した後に、未入力の時間が一定時間経過してしまったから（yesを入力するまでに未入力の時間があったから）だと考えられます。そこでもう一度、ログインを試みました。

% ssh -i awsで作成した秘密鍵 ec2-user@Elastic IPアドレス
# 実行結果

       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/
[ec2-user@~]$

無事ログインが完了しました。 今回は以上になります。