けけずんセルフハッキング

エンジニアっぽい雰囲気を醸しだしているかのようなブログです!

SPA な Web アプリを継続的デリバリーする環境を作る 〜 序章編

概要

SPA な Web アプリを GitLab で自動テスト、自動デプロイする環境を作っていくよ。 構成的にはざっくりとこんな感じ。

f:id:kkznch:20200222125448p:plain
GitLabCI/CD自動デプロイまでの構成

ちょっと長くなりそうなので4部構成でお届けする。

目的

それっぽいことを書いておく。

  • Laravel でプロジェクトの立ち上げから開発までの流れを学ぶ
  • Vue.js でプロジェクトの立ち上げから開発までの流れを学ぶ
  • AWS で最低限の構成でインフラを構築する方法を学ぶ
  • GitLab CI/CD を使ってバックエンド、フロントエンドの自動デプロイをする方法を学ぶ

使用技術

こんな技術使うよ。

  • Laravel :バックエンド
  • Vue.js :フロントエンド
  • Docker :ローカル開発環境用
  • AWS :デプロイ環境
    • EC2 :バックエンド動作環境( Amazon Linux 2 使う )
      • nginx :Webサーバ
      • php-fpm :APPサーバ( PHP7.3 使う)
    • S3 :フロントエンド動作環境
  • GitLab CI/CD :バージョン管理、CI/CD 実行環境

ハンズオンの前に

GitLab にバックエンドとフロントエンドのリポジトリを作成する。 アクセス設定は Private にすると少し面倒になるので全部 Public にする。 大切な情報をリポジトリに間違って入れたりしないよう気をつけてね。

おわりに

元々は社内の勉強会で使用した内容だったけど、このまま放置するのは勿体ないので公開することにした。 役に立ててね。

「tech美られでぃ #4 Docker どっか〜ん!」でハンズオンの講師をさせてもらった

先日、ITに興味のある女性を対象としたイベントグループ tech美られでぃ が開催するハンズオンイベントで講師をさせてもらった。 イベントページは以下の通り。

tech-chura-lady.connpass.com

参加人数は16人〜18人ぐらいだったかな、結構多かった印象。 参加者の99.9%が女性のため緊張した、いやホントですよホント。

ちなみにイベントの前半は @kaoru6strings さんが講義形式で Docker や Docker Compose についての話をし、後半は自分がハンズオンを担当。 @kaoru6strings さんは CODEBASE というプログラミング教室で講師もしているため、だいぶ質の高い内容を展開していたと思う。 ただ少し難しい話をしていた部分もあって参加者の頭の上にはてなマークが見えたことがしばしばあったがw

ハンズオンで何をやったの?

はいこれ。

github.com

このイベントの一週間くらい前に同じようなクローズドなイベントをしてたので、そのときの内容を元に簡略化した奴。 当日ざっくり書いたんだけど、割となんとかなったし参加者からの評判も良かったので嬉しい。

イベント参加しての感想

参加者全員が話を集中して聞いていたし、ハンズオン中も積極的に質問が飛んできたので活発なイベントだったと思う。

イベント中に個人的に特に良かったと思ったのが、勉強することと同じくらい他者と交流することを大切にしていたこと。 なごみタイムという謎の時間がとられており、運営がランダムで決めたテーマについて参加者同士でグループを組んでお話をするための時間だった。 これにより参加者同士の交流を深めることに加え、参加者と講師との間の壁を取っ払うことができるのだとか。 多分この時間のおかげで質問がしやすい状態になったんろうな。

今後もtech美られでぃ はイベントを開催していくということなので、初心者というか中の人達と全く関わりのない方も遠慮なく遊びにきてくれると良いかも。

自分も可能な限り協力するので、また声かけてくださいね〜。

「黒い画面おきなわ #1 初心者歓迎!」を開催した

先日、沖縄でゆるく勉強をやっていくグループ でじぴよ 初の主催イベント「黒い画面おきなわ #1 初心者歓迎!」を開催した。 概要、目的、登壇内容は下記のリンク先に書いてるので参照よろしく。

dejipiyo.connpass.com

ちなみに当日のTwitterのまとめはコチラ。

togetter.com

元々は身内数名で開催してピザ食べつつお酒飲みながらワイワイ楽しもうぜ、という気持ちで開いたイベント。 ノリで connpass でイベント立ててみたところ、当日に22人の方が参加してくれることになった。

当日はピザのLサイズを三枚注文して菓子類とお酒を少し多めに買いデプロイしたものの、明らかに足りてなさそうな雰囲気だったのでピザを更に二枚追加して注文した。 勉強会で追いピザとか初めてだぞ...。

f:id:kkznch:20200129215834j:plain
黒い画面おきなわ乾杯中

この人数のイベント開催するのが初めてだったので最初は不安だったが、みんな凄く楽しそうだったので本当に良かった。 また開いてほしいという声もあったので、次回も機会を見て開催したい。

f:id:kkznch:20200129222432j:plain
黒い画面おきなわ説明中

一緒に企画運営してくれたnanamicronnとおでんさんにも深く感謝、ありがとう。

/bin/sync でメモリ上のデータをディスクに書き込む

はじめに

よく分からんコマンド調べてみようシリーズ。 経緯はこちら。

kkznch.hatenablog.com

今回は /bin/sync について。

/bin/sync

mac でメモリを解放する際に使ったコマンド...と思っていたがそれは purge の方だった。 こいつは一体なんなんだ。

では man sync したときの DESCRIPTION の内容。

The sync utility can be called to ensure that all disk writes have been completed before the processor is halted in a way not suitably done by shutdown(8). Generally, it is preferable to use shutdown(8) to shut down the system, as they may perform additional actions such as resynchronizing the hardware clock and flushing internal caches before performing a final sync.

shutdown などでシステムを停止する前に、ディスクへの書き込みをする際に使用される、なんとなく分かる。 実行してみようと思ったけどどう確認すればいいんだろうか。

/bin/sync 実行してみる

とりあえず実行する。

$ sync

何も起きない。 何かしら書き込みの処理を走らせて、そのあとに sync の処理を走らせるとよさそう。

/proc/meminfo の Dirty という項目がディスクへの書き込み待ちメモリサイズを表しているらしく、dd で書き込みながら Dirty を見ればいけると思ったが、どうやら mac にはそもそも /proc/meminfo なるファイルは存在しない。 vm_stat というコマンドで同様の内容を見ることができるらしいが、 /proc/meminfo の Dirty に対応する項目がどれか分からなかった。

というわけで今回は諦めて Linux仮想マシン上で sync を試すことに。 sync の動作的には UnixLinux も同じだと思うからいいよね。

まずメモリを監視するコンソールと、ディスクへの書き込みを行うためのコンソールの二つを立ち上げる。 メモリ監視するコンソールでは以下のように watchgrep を組み合わせて Dirty を見続ける。

$ watch grep -e Dirty /proc/meminfo

Dirty:                 0 kB

つづいてディスクへの書き込みを行うコンソールで以下のコマンドを実行する。

$ dd if=/dev/zero of=test bs=1M count=1024

するとメモリサイズが一時的に増加した後、数百 kB に落ち着く。 このときに以下のように sync を実行すると、Dirty のメモリサイズが数 kB まで減少する。

$ sync

dd で書き出した後にメモリに数百 kB ほど残ったデータは果たして何なのかは分からない。 sync を実行してもメモリに数 kB 残ったので、こいつも何なのかは分からない。

そして今回思ったことは、Swap や Cache, Paging などメモリ周りの知識が曖昧だなということ。 もっと勉強してからこのコマンドに臨もう思う...。

参考リンク

qiita.com

archive.linux.or.jp

yomon.hatenablog.com

teratail.com

/bin/expr で式を評価する

はじめに

よく分からんコマンド調べてみようシリーズ。 経緯はこちら。

kkznch.hatenablog.com

今回は /bin/expr について。

/bin/expr

shell script の中で使ったことがある気がする。 しかしどういうときに使ったか記憶は定かではない。

こちら man expr したときの DESCRIPTION の内容。

The expr utility evaluates expression and writes the result on standard output.

式を評価して標準出力に書き出すと。 使ってみないと何なのか分からん。

/bin/expr 実行してみる

それっぽいものを入力してみる。

$ expr 1 + 1
2

なるほど、test コマンドみたいに条件を判定するとかそういう意味の評価と思っていたら、式を評価するってそのまんまの意味らしい。 数字と演算子の間には半角スペースを入れないとエラーになるので注意が必要っぽい。

ちなみにexpr の計算結果を変数に格納したい場合は以下のようにすると良さげ。

$ result=$(expr 1 + 2 + 3)
$ echo ${result}
6

$( ... ) はコマンド置換(Command substitution)といって括弧で括られた中のコマンドを実行してその出力を返すことができ、上記ではこれを利用して計算結果を result という変数に格納している。

/bin/expr の終了ステータスについて

以下の記事で expr の終了ステータスについて面白いことが書いてあった。 暇な人は見てね。

qiita.com

/bin/ln でリンクを作る

はじめに

よく分からんコマンド調べてみようシリーズ。 経緯はこちら。

kkznch.hatenablog.com

今回は /bin/ln について。

/bin/ln

/bn/ln はフォルダやファイルへのリンクを作成する。 リンクにはハードリンクとシンボリックリンクの二種類のリンクがあり、以下のリンク先で分かりやすく解説している。

qiita.com

こちら man ln したときの DESCRIPTION の内容。

The ln utility creates a new directory entry (linked file) which has the same modes as the original file. It is useful for maintaining multiple copies of a file in many places at once without using up storage for the copies''; instead, a linkpoints'' to the original copy. There are two types of links; hard links and symbolic links. How a link ``points'' to a file is one of the differences between a hard and symbolic link

同じ内容のファイルを大量にコピーするとストレージを無駄に食ってしまうので、そういうときはリンクして参照させるほうがよいと。 自分が ln を使うときはストレージの容量うんぬんは気にしたことがなくて、設定ファイルとか複数の場所で共有したいものをリンクさせて使っていた。

ちなみに /bin/ln/bin/link は同じコマンド。

/bin/ln 実行してみる

さっきの記事とほぼ同じことを自分で手を動かしてやってみる。

まずは origin というファイルを作り、i ノード番号を確認する。

$ ls -li
total 4
3149196 -rw-r--r--    1 root     root            21 Jan 15 08:36 origin

i ノード番号は 3149196 らしい。

ハードリンク作る

下記のコマンドでハードリンクを作る。

$ ln origin hard_link

ls で確認する。

$ ls -li
total 8
3149196 -rw-r--r--    2 root     root            21 Jan 15 08:36 hard_link
3149196 -rw-r--r--    2 root     root            21 Jan 15 08:36 origin

おー、i ノード番号が同じになった。

シンボリックリンクを作る

$ ln -s origin sym_link

ls で確認する。

$ ls -li
total 8
3149196 -rwx------    2 root     root            21 Jan 15 08:36 origin
3149197 lrwxrwxrwx    1 root     root             6 Jan 15 08:54 sym_link -> origin

i ノード番号が異なり、リンク先が origin となっているリンクが作成されたのが分かる。

補足として、このとき以下のようにリンクの権限を変更しようとすると、リンク自体ではなくリンク先の権限が変更される。

$ chmod 700 sym_link
$ ls -li
total 8
3149196 -rwx------    2 root     root            21 Jan 15 08:36 origin
3149197 lrwxrwxrwx    1 root     root             6 Jan 15 08:54 sym_link -> origin

リンクの削除について

リンクを削除するときに rm コマンドでやってしまいがち、というか rm 以外で消した記憶ない。 いちおう unlink というコマンドがあるらしいので、リンクを削除する場合は unlink コマンドを使う方がよさそう。

あと昔にリンク元がフォルダかそうでないかでリンクを削除する際にハマった記憶があるけど、何だったか忘れた。 思い出したら書く。

「すらすらと手が動くようになる SQL書き方ドリル」の付録にある SQUAT がエラーで起動しない

概要

初心に返って「すらすらと手が動くようになる SQL書き方ドリル」で SQL の勉強しようと思い付録の SQUAT を起動しようとすると、エラーが出て起動しなかった。

そのときのエラー内容と解決方法を書いておく。

環境

  • macOS Catalina (Version 10.15.2)
  • Javaのバージョンは以下の通り
$ java --version
openjdk 12.0.1 2019-04-16
OpenJDK Runtime Environment (build 12.0.1+12)
OpenJDK 64-Bit Server VM (build 12.0.1+12, mixed mode, sharing)

エラー内容と原因

付録では起動時には予め用意されたスクリプトを実行するだけでよいと書いてあるのだが、スクリプトだと出力が /dev/null に向いており原因が特定できないため、スクリプト中のコマンドをそのまま実行した。 すると以下のエラーが出力される。

$ java -cp data:squat.jar jp.towersquest.squat.Main
(略)
Exception in thread "main" org.seasar.framework.exception.InvocationTargetRuntimeException: [ESSR0043]The target which jp.towersquest.squat.gettext.impl.GettextResourceImpl invoked is illegal, because java.util.MissingResourceException: Can't find bundle for base name jp.towersquest.squat.gettext.gettext, locale en_JP
(略)

言語設定が en_JP となっており、それが見つかっていない模様。 よく考えると自分の PC の言語設定が英語、ロケールが日本になっているので en_JP を探しにいったのかもしれない。

解決方法

というわけで、Java 実行時にオプションとして言語設定のオプションを指定してあげるだけで SQUAT が起動した。 コマンドは以下の通り。

$ java -Duser.language=ja -Duser.country=JP -cp data:squat.jar jp.towersquest.squat.Main

これでうまく動いてくれた、やったぜ。