若き(元)SEの悩み

(元)SIerで働く文系SE、今はwebエンジニアをしている人のブログです。

ブログをVue.jsでつくる(全体設計編)

前段

最近業務でVue.jsを触ることが多くなったので、このブログをVue.jsで作ってみようと思った。

仕様(再)検討

これまでのアーキテクチャ構想

  • Firebase + Webpack + Vue,jを予定していた
    • FirebaseにはHostingと .mdファイルのStorageをさせて、Vue.jsからAPI叩いてページを表示させるつもりだった
    • しかしFirebase Storageには、指定のフォルダに存在するファイルの一覧を取得するAPIがないことがわかった
    • (厳密に言うとFirebase Functionで出来なくもないけど、それは正直めんどくさいしできるだけバックエンドでゴニョゴニョしたくない)
    • なの全体のアーキテクチャ見直しをする

改めてアーキテクチャを考える

  • Webpack + Vue.jsは変わらないので、問題はホスティング.mdを持たせるストレージ
    • (まぁもっと全体的なことを言うのであればブログとしての管理画面とか挑戦しても良いんやけど、第1段階としてそこまで手広げたくない)
ホスティング
  • NetlifyかFirebase
  • 現状この2択の違いがよく分からん
  • Netlifyが直接Githubホスティングできるっぽいからこっちのが良さそう
ストレージ
  1. 直接リポジトリに埋め込む→Netlifyでホスティングまで全部できる。ただし直接マークダウンを触ってリポジトリにコミットする必要がある。
  2. ButterCMSみたいなCMSサービス→これならCMS側でコンテンツの管理をしてアプリケーション側はそれを叩きに行くだけでいいのでいちいちgitをわちゃわちゃしなくても良い。あと多分GAとかその辺りのめんどいのを割と簡単にやってくれるっぽい。良さそう。

改めて全体の構成

  • Netlify (デプロイ)
  • Webpack + Vuejs (アプリケーション)
  • ButterCSM (記事の管理)
  • Bulma (CSSフレームワーク。余裕があれば)
  • これでいきたい。この構成はVueの公式ドキュメントに例が載ってたから間違ってはなさそう。
  • 遅くても11月中には完成させたい。

タスクリスト

  • [ ] ButterCMSでサンプル記事を作ってみる(複数)
  • [ ] アプリでButterCSM用のconfigをゴニョゴニョしてAPI叩けるようにする
  • [ ] ルーティング作る( index, post)
  • [ ] ページの中身作る
  • [ ] Netlifyでホスティングするために何するか調べる

JAWS-UG 初心者支部#14「AWS Night school & LT」に行ってきた

f:id:canisterism:20181019230743j:plain

どうもお久しぶりです。先日、AWSのユーザーグループである「JAWS-UG」の初心者支部の勉強会に行ってきたので、メモなどを共有したいと思います。外部の勉強会に出るのは初めてだったのでドキドキしました。

行った動機

簡単に言うとインフラ周りの知識を身に着けたくて、そのきっかけ作りみたいなところでしょうか。Webエンジニアとして働きだしてはや2ヶ月と半分。少しずつ仕事にも慣れてきたのですが、業務においてインフラの領域で圧倒的な経験値不足を感じています。自分のAWSアカウントを作ってインスタンスを立ててみたりはするのですが、なんというかまだイメージが掴めなかったり、実際どういうことに役に立つかあんまり分かってなかったりします。今回はLTも沢山ということだったので、とりあえず行ったらなんか得るものあるやろ!ぐらいのテンションです。

では以下メモです。

19:05-19:35 AWS Night school 第二回:RDSとS3 (計3回連載予定) AWSJ 亀田さん

S3

オンラインのオブジェクトストレージ。

  • デメリット
    • OSからマウントできない×
  • メリット
    • EBSと比べると1/10の費用でデータを保存できる=>補って有り余るメリット。*SLA?
    • データ確保領域の設計が不要
    • めっちゃ安全(eleven nine)
  • その他特徴
    • httpsエンドポイントを提供可能
    • 暗号化をサポート
    • 実は擬似的に階層を持ってるだけでホントは並列に持ってる
    • バージョニング

      • デフォルトではoff
      • ただしファイルを2倍持ってる状態なので課金額は2倍
        • ファイルを削除した時は削除フラグが立っているだけ
    • データの取り出しが低頻度であればより低価格のGlacierも存在する

      • ライフサイクルポリシーを設定すれば、アクセスされた頻度に基づいてS3→S3(低頻度)→Glacierに自動で変更できる

RDS

DBのマネージドサービス。

  • メリット
    • マネージドなのでバックアップとかパッチを当てなくていいので開発だけに集中できるのでハッピー
    • 自動でバックアップを取ってくれる上にある程度のバックアップデータ分は課金されない
    • 手動でスナップショットも取れる。(S3に入れる)
  • デメリット
  • その他特徴

    • VPC内でDBインスタンスを立てる
    • IAMポリシーを使用してRDSリソースへのアクセスを許可する
  • EC2との違い:スケーラビリティ

    • EC2はELBの下にインスタンスがぶら下がって負荷が増えるとスケールアウト(インスタンスが増える)する
    • 一方でRDSはリードレプリカを増やす
  • Aurora
    • めっちゃはえ
      • キャッシュとログをプロセスから分離している
      • クローンってなんだ…

19:40-19:45 LT1:AlexaスキルでDynamoDBを使った minamo173さん

AlexaスキルとDynamoDB

  • 会話後にデータを保存/参照する

なぜDynamoDB?

  • lambdaと相性が良い

    • 通常のRDSであればコネクション数が増えすぎて死ぬ
    • Dynamoは勝手にスケールアウトしてくれるのでハッピー
  • データが簡単

    • 設定できるキーが多くない

19:45-19:50 LT2:IAM PolicyやRoleあたりの使い方の話 woshidanさん

IAMロールの使用とそれに必要なポリシー

  • ルートアカウント

    • なんでもできちゃう
    • IAMユーザーを作って権限(IAMポリシー)をアタッチすればいろいろとできる
    • 一時的にな権限の負荷にはIAM Roleを引き受ける(コレ自体もIAMポリシーをアタッチする)
  • 権限の付与とは具体的には

    • STSにリクエストを送ってトークンをもらっている感じ。
    • その中にも3種類ぐらい権限ポリシーがあるよっていう話。

19:50-19:55 LT3:サーバなしで立てるウェブサイト (S3+CloudFront) Nebutanさん

aws 静的ウェブサイト ホスティングでググれ

キーワードとなるAWSサービス

  • EC2
  • CloudFront
  • certificate manager
  • route53

  • 組み合わせで色々できるよ!

19:55-20:00 LT4:IDaaSを用いた複数AWSアカウントへのログインで良かったこと困ったこと 14kwさん

IAMめんどい → one loginでかいけつ

  • 以前は踏み台アカウントでログインしてそこからロールをスイッチしてた
    • 問い合わせが多発
      • スイッチロール忘れたりする

良かった点

  • ユーザー数無制限のFreeプランがあった

困った点

  • APIが足りない
  • バグ踏んだ

20:15-20:20 LT5:怖くないクラウドインフラストラクチャサービス kitakatayamaさん

目的

  • AWSがこわい人がこわくなくする

紹介するサービス

  • コンピューティング

    • EC2/EBS
      • EBSは内部ストレージ。
  • ストレージ

    • EFS
      • 超でかいNAS
      • TCPポートを開ける設定をする必要がある
  • ネットワーク

  • データベース

    • RDS
  • AWS Directory Service

20:20-20:25 LT6:MFA、失くした ts03511さん

*MFAとは 他段階認証

  • Google Authenticatorを入れたスマホを初期化してrootに入れなくなった

  • 別の認証で無事ログインできる。

20:25-20:30 LT7:Go言語と事例で学ぶAWS Lambda yukpizさん

lamdbaとは

  • サーバーレス
  • 単体の関数をクラウド上で実行できる
  • AWSサービスのイベントで発火できる

  • gopherがかわいい

20:30-20:35 LT8:Lightsail 触ってみよう nagashi_ma_wさん

Light Sailとは

  • VPS
    • つまり?
    • さっくりサーバーを立てることができる *ssm?
    • キーペアが最初から存在する
    • AMIはEC2のが多いので使いやすい
    • LTでデモはすごい。わかりやすいなー。

20:35-20:40 LT9:初心者だからこそ使いたいBeanstalkで本番環境 bellks51さん

Elastic Beanstalkとは

  • autoscalingとかヘルスチェックを自動でやってくれるプラットフォームサービス。
    • ELBとかEC2とかの設定を自分でしなくても良い。

20:40-20:45 LT10:TerraformではじめるInfrastructure as Code yusuke_yasuoさん

  • IaaS:コードによるインフラ管理

  • ドキュメント/仕様書がないと、どうやって構築したか分からんくなる→復元できなくてヤバイ

  • コード化しておけば、インフラがブラックボックス化しない

    • インフラエンジニアがいなくても大丈夫!→属人化を防ぐ
    • コマンド一発で環境構築できるので安心
  • IAMユーザーを作ってバイナリをインストールしてパスをインストールするだけ。簡単。

    • 自動作成されたオブジェクトを手動でいじるとエラーになるので注意しましょう。

感想

事前に「初心者にあまり優しくない」みたいな声を聞いていたのでビビっていたのですが、割とそんなこともなく、そうなのか〜〜なるほど〜〜〜って感じで聞けました。まだEC2とS3とRDSとVPCぐらいしか触ったことがなかったので、そんな便利なものが!と驚いていました。CloudFrontとかLightSailとかでお手軽ホスティングはブログぐらいだったら全然運用に耐えそうなので移行する時は考えても良いかもなー。そんな感じです。楽しかったです。

【mysql】mysqlを使用したrailsアプリケーションでモデルが接続しているDBを確認する方法

環境

バージョンは以下の通り。

$ mysql --version
mysql  Ver 14.14 Distrib 5.7.23
e-gifts-mgmt $ bundle list
  * rails (5.0.1)

手順

Userモデルが見てるDBを確認したいとして、

User.connection.current_database
#=> hoge_production(DB名)

これでok。なおmysqlだけっぽい?

【git】git初心者がプロジェクトでissueを割り当てられてから正しくmergeされるまでの流れ

この記事について

こんにちは。きゃにすたーです。web系のいわゆるベンチャー企業に就職してから早1ヶ月、 今やgit&Githubは無くてはならない存在になりました。 この記事は僕のようなgit初心者がチーム開発でだいたい初めにやりそうなことの流れをまとめて書いたメモです。

大まかな流れ

  • イシューが割り当てられる

  • 自分で直す

  • コミットしてプッシュする

  • マージされて終わり。

こんな感じです。なお、作業対象のリポジトリは事前にローカルにcloneしているものとします。

実際のコマンドを含めた流れ

  • issueを確認する
    hogeブランチのバグを直す、というissueが割り当てられています。

  • 作業対象のhogeブランチにgit checkout hogeしてからgit pull origin hogeでローカルリポジトリをリモートリポジトリの最新のhogeブランチと同期する

  • hogeブランチからgit checkout -b hoge_fix_bugでブランチを切る

    • 必ず作業対象のブランチ(ここでいうhoge)からブランチを切ってからコーディングを始めること
  • コーディングする。楽しい。

  • 変更し終わったらgit add -Aでステージング(この時点ではまだローカルリポジトリも変更されていない)

  • git commit -m "メッセージ"でコミットする

  • git push origin hoge_fix_bugでコードを直した自分のブランチをプッシュする

    • これでリモートリポジトリにhoge_fix_bugブランチが作成される
    • originはリモートリポジトリのサーバー名。
    • 間違ってもmasterpushしないこと。最悪の場合インターネット集団自決に発展します。

ここから下はGithubの作業。

  • Githubに自分がpushしたブランチが表示されているので、「Compare & Pull Request」を押す。

    • タイトルの変更とかレビュアーの設定とかラベリングとかなんやかんやできるのでなんやかんやする。
    • また、マージ先のブランチはcheckout元のブランチに設定するのが良いでしょう。(ここでいうhoge)
  • 以降はレビュアーにレビューしてもらって何回か直せばめでたくあなたのタスクは終わりです。お疲れ様でした。

まとめ

gitは神。

今の会社でgitを使うまでは「なーーーーーにがgitじゃファイル名管理でもイケるやろ」と思っていたのですが、使ってみるとほんとーに便利です。 今後もちょくちょくgitに限らずちょこちょこ更新したいと思います。ではまた。

「Pythonでwebサービスを作る」学習メモ2巻②

こんにちは。きゃにすたーです。

この記事は「Pythonwebサービスを作る」の2巻の学習メモその②です。

前回の記事はこちら。

canisterism.hatenablog.com

ソースはこちらに。

github.com

続きを読む

「Pythonでwebサービスを作る」学習メモ2巻①

こんにちは。きゃにすたーです。

この記事は「Pythonwebサービスを作る」の2巻の学習メモその①です。

前回の記事はこちら。

canisterism.hatenablog.com

ソースはこちらに。

github.com

  • Bootstrapを扱う
    • ヘッダの作成
    • コンテナ
    • ジャンボトロン
    • ナビゲーションバー
    • ボタンの見た目を整える
  • グリッドレイアウト
    • Font Awesome
    • 半分ぐらいまで行った時の見た目
続きを読む

「Pythonでwebサービスを作る」学習メモ 1巻②

どうもこんにちは。きゃにすたーです。 前回に引き続いて「Pythonwebサービスを作る」の1巻学習メモです。

前回の記事はこちら。 canisterism.hatenablog.com

ソースはこちらに。

github.com

  • GETのURLパラメーターを受け取る
  • POSTで送られてきたリクエストボディの中身を受け取る
  • バイナリデータの取得
    • 誤植?
  • htmlにコードを埋め込む
    • 条件分岐
    • リストの展開
    • 辞書型にアクセス
  • テンプレートの継承
  • まとめ
続きを読む