最終課題1週目 デプロイとマークアップから学んだこと
みほうです。
前記事で話したように私はデプロイと新規登録・ログイン画面を担当しました。
この記事では新しく学んだことを書いていきます。
デプロイから学んだこと
デプロイについては基本的にはカリキュラム通りに行いました。
順序としては
1. AWSにおいてEC2インスタンス作成、本番環境へのログイン
2. Linux環境構築
3. MySQLの設定と起動
4. アプリケーションサーバー「Unicorn」のインストール、Railsの起動
5. Webサーバー「Nginx」のインストール、起動
6. Capistranoを用いた自動デプロイ
8. Basic認証導入
になります。カリキュラムと比較してBasic認証導入が追加されています。
Basic認証とは知っている人しかアプリケーションを見れないようにするための機能です。言い換えればチームに関わっていない人に勝手にアプリケーションを弄られるのを防ぐための機能です。
初めてのログイン時、アラートが出てユーザー名とパスワードが要求され、入力するとページ移動ができます。
Chat-Spaceで試してみました。動画を載せます。
動画でわかりますが、URLのところに通常と違い鍵マークが出ています。
https://i.gyazo.com/beee0ea981eb69cf1de36028d8400f48.mp4
Active storageの設定について
さて今回、AWS S3にファイルをアップロードするためにActive Storageと呼ばれるRailsの機能を用いることにしました。
こちらの記事が参考になります。*1
Carrierwaveとの違いは、Carrierwaveが1画面につき1枚しか保存できないのに対し、Active Storageは1画面に複数枚保存できると聞いています。
まだ実際に複数枚保存できることは確認していませんが、開発を進めていく中で確かめようと考えています。
ただこの記事の通りに下のコマンドを打ち、vimファイルを編集してしまうとconfig/credential.yml.encが編集されるという問題が発生します。
$ EDITOR=vim rails credentials:edit
credential.yml.encについてはRails5.2.0以降からsecrets.ymlの代わりに導入された秘匿情報が入るファイルです。secrets.ymlと違い、内容が暗号化されています。
このファイルに入った情報をconfig/master.keyで読み取ります。
master.keyは最初から.gitignoreに入っており、本番環境ではmaster.keyの指定漏れを避けるためconfig/environments/production.rbでconfig.require_master_key=trueのコメントアウトを外すことが推奨されています。19行目で確認しました。*2
編集後のcredential.yml.encを含んだコミットをGitHubにプッシュすると他の人に見えてしまいセキュリティ上問題があるため、環境変数を利用することにしました。
環境変数を利用することで編集されるのを回避することができます。
下のコマンドをローカル環境と本番環境で打って編集し
$ vim ~/.bash_profile
下のコマンドでその内容を読み込ませました。
$ source ~/.bash_profile
さらにstorage.ymlのaccess_key_idとsecret_access_keyを環境変数に変更します。
このように変更することで編集した環境変数を利用することができるようになりました。
basic認証のユーザー名・パスワードもセキュリティのため環境変数で管理しています。
苦労したこと
苦労したことは
本番環境で「git pull origin master」のコマンドを打ったところ
error: Your local changes to the following files would be overwritten by merge:Gemfile.lock
Please commit your changes or stash them before you merge.
とエラーが出たところですね。
それについては下のコマンドで変更を退避させた後
$ git stash save
git pull origin masterのコマンドを打って本番環境にプルし、下のコマンドで変更を復元して解決しました。
$ git stash pop
チームで問題を解決して改めて意見を出しあうと解決が進むことがわかりました。
学んだこと：
セキュリティ面を考えないとサイトが攻撃され悪用される温床となるため、秘匿情報をGithubに上げないように設定することが大切。個人アプリをデプロイするときも気をつける。
新規登録・ログイン画面から学んだこと
最終課題においてメルカリが持つ機能を実装するにはサイトの見た目を作る必要があります。自分は新規登録・ログイン画面のマークアップを行いました。
新規登録画面では5画面実装します。ウィザード形式と呼ばれるステップごとに登録フォームを作る方法があるそうです。*3
擬似要素について
5/31までSNS認証がLGTMとなるまでの仮のRailsアプリケーションで新規登録・ログイン画面のマークアップを行なっていました。
その中でヘッダーにあるグレーの線を引くのにHTMLの擬似要素を使いました。*4
要素は<タグ名> 文字 </タグ名>のようなタグとタグで囲われた1つの固まりです。
擬似要素を使うと要素内の特定の文字や行に対してHTMLに書かずにCSSでスタイルを指定できます。
例えばヘッダーの線ではこのように設定しています。
なおHTMLについては記述を短縮できるhaml記法で書き、CSSについてはネストが便利なSass記法で書いています。Sassについては全体を写すとすごく縦長になるためactiveクラスとthroughクラスに絞って説明します。
Sass(左はlistタブの設定、右はprogress-statusクラスの設定)
画像
activeクラスについては文字も丸も赤色になります。throughクラスについては文字はグレーのままで丸だけ赤になります。擬似要素で背景(background)の色指定を入れることで線の色を赤にしています。
progress-statusクラスに線と丸の設定があります。listタブの最初と最後の要素についてはそれぞれfirst-child、last-childと指定してcontent:noneとすることで設定を消しています。ちなみにlistタブの共通設定が外にあるため、このコードをコピペしても画像のような表示になりません。
本番のアプリケーションには実装していませんが、今後個人アプリ製作をする上でHTMLを使わずにスタイルを設定できるので便利だと思いました。
あと新規登録画面5ページ作ったおかげでログイン画面のマークアップが1時間くらいででき、マイページの本人確認ページの作成もSassの記述を変更するくらいで2時間くらいでできました。
マークアップについてははじめにdivタグで囲むとページ表示が崩れにくいです。
班の方針でそうしています。
ちなみにhaml記法ではdivタグは省略して書くことができます。
自分は仮のアプリケーションでlistタブでの共通の設定をdivタグの外で設定していたため、それが他のページで影響してしまいました。そのため昨日はSassファイルの記述の修正に2時間かけていました。
これからは最初にdivタグで大枠を作るようにマークアップしていきます。
終わりに
マークアップも昨日、本人確認ページがLGTMになり、6/2時点で残すはログアウト画面、商品関連の3画面となり、全ページ完了に近づいてきました。
個人アプリについては作る題材については決めていませんがJavaScript、挑戦するならばAPIを利用した掲示板アプリを作ろうと考えています。
活動記録をまたブログにまとめようと考えています。
長くなりましたが今回は以上です。ありがとうございました。
