Capr1の日々

とあるゲーム好きの情報系大学生の日々を淡々と綴っていくぞい

はてなサマーインターン2020 に参加して

クーラーが苦手です

 

どうもCapr1です． 

はてなサマーインターン2020に参加してきました．

hatenacorp.jp

 

やったこと

応募

大学院修士一年生なので、今年の夏こそはちゃんとインターン参加するぞという感じでインターンを探していたら、Twitterでたまたまはてなのインターンの情報が流れてきて、「はてなブログのはてなか〜」と思いつつインターンの内容を見てみたらマイクロサービスとか自分の興味のある内容だったので応募してみました．

応募課題みたいなのがあって、確か用意されたDockerコンテナを実行してトークンを取得してくるというやつでした．

ここら辺は普段からDockerを使ってるので一瞬でできました．

 

5日間まとめ

初日はWebAPIやDocker , k8sやマイクロサービスの講義がありました．

普段Dockerを使っていてもわからないところの説明があったり、そもそもあまり触ったことのないk8sやgRPCについての説明をしてくれたので、講義だけでも知見が深まりました．

講義が終わった後は用意されたブログに課題として出された機能を追加していきました．

自分はMarkdownの導入や、リンク記法でタイトルを省略した時に自動でタイトルを取得してくるマイクロサービスを実装しました．

他の人は独自で考えた記法やk8sの構成の拡張など、凄そう(?)なことをやっていました．

自分はあまりそういうことはやっていなかったのですが、マイクロサービスを開発する上でマイクロサービスにおける責務、役割や設計をしっかり考えた、ちゃんとテスト駆動開発に習って開発していった、設計の都合上あえて参考実装を使わずに一から実装を考えた、というような設計・開発のプロセスをアピールしたら、結構受けが良かったので嬉しかったです．

 

 

最後に

わからないところがあったり、困ったことがあっても、メンターさんが丁寧に教えてくださったり、自分が出したPRを毎回丁寧にレビューしてくださったりと本当にメンターさんにはお世話になりました．

課題を通してマイクロサービスやk8s、gRPCについて詳しくなれただけでも嬉しいのにメンターさんや社員さんの優しさ、丁寧さもあって本当に充実した5日間でした．

改めて、５日間本当にありがとうございました！

React：npm start実行時に「However, a different version of webpack-dev-server was detected higher up in the tree:」が発生した時の対処法

Reactのチュートリアルを始めて、ローカルで環境を整えようとした段階で早速エラーで詰まったので、解決法をここに書いておきます

 

ja.reactjs.org

 

環境

  • Mac OS Mojave version 10.14.6
  • node v12.18.2
  • npm 6.14.5
  • React 16.13.1

 

エラー全文

npm start時に以下のエラーが発生

 

> my-app@0.1.0 start /Users/xxxxxxxxxxxx/react-tutorial/my-app
> react-scripts start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"webpack": "4.42.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

/Users/xxxxxxxxxxxx/node_modules/webpack (version: 4.44.1)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if /Users/xxxxxxxxxxxx/node_modules/webpack is outside your project directory.
For example, you might have accidentally installed something in your home folder.

7. Try running npm ls webpack in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xxxxxxxxxxxx/.npm/_logs/2020-08-04T06_49_24_909Z-debug.log

 

原因 

プロジェクトフォルダ内とは別のところ(今回はホームディレクトリ)にnode_modulesがあって、そっちを参照(?)していたのが原因

 

解決策

画像のディレクトリ構成通りに.envファイルを作成

f:id:caprinet:20200804155838p:plain

 

.envファイルにSKIP_PREFLIGHT_CHECK=tureと記述し、再度実行することで起動可能

 SKIP_PREFLIGHT_CHECK=ture

 

参考文献

mebee.info

この記事ではホームディレクトリのnode_modulesを消してたけど、俺にそこまでの勇気はなかった

 

 

Raspberry pi 4で録画サーバを構築しました

卒論から解法されて最近心が自由です．

 

どうもCapr1です．

今回は前回↓の続きで、Raspberry pi 4で録画サーバを構築しました．

caprinet.hatenablog.com

 

使用した機材

使用ソフト

  • Mirakurun(TVチューナーサーバソフト)
  • Chinanchu(録画サーバソフト)

github.com

github.com

 

画面

f:id:caprinet:20200131004519p:plain

こんな感じに録画ルールを作成して好きな番組を録画できる

p.s

nasサーバが壊れました

 

 

Raspberry pi 4でNASサーバ + 動画音楽再生サーバを構築した

最近寒いっすね．

どうもCapr1です．この記事はk3アドベントカレンダーのExtra記事となっております．(真のアドベントカレンダーはこれからだ)

 

最近購入したRaspberry pi 4 × 2台でNASサーバ + 動画音楽再生サーバを構築しました．

 

使用した機材

NASサーバ
動画音楽再生サーバ
  • Raspberry pi 4 (4GB)
  • ラズパイのケース
  • OS(LibreELEC)

 

やり方は調べてれば出でくると思うのでここでは割愛で．

以下に参考になった記事を載せておきます．

 

qiita.com

raspida.com

 

構築した後

f:id:caprinet:20191231030709p:plain

NASにある曲を動画音楽再生サーバで聞いて遊んでみたり．

 

今後やること

録画サーバの構築

Docker入門

Capr1です．

以前Dockerを独学で勉強していたのですが最近使ってなかったので、ここでまとめてみました．

Dockerとは？

「Docker」とはDocker社「旧dotCloud」が開発するオープンソースのコンテナー管理ソフトウェアの一つで、コンテナーとはWebサーバなどのアプリケーション実行環境を抽象化する技術であり、VMWareやLinux KVMなどの「ハイパーバイザー型の仮想化」に対して、「コンテナー型の仮想化」と呼ばれることもあります．

「ハイパーバイザー型の仮想化」では、ホストマシン上でハイパーバイザーを利用しゲストOSを動かし、その上でミドルウェアなどを動かします．それに対し、コンテナーはホストマシンのカーネルを利用し、プロセスやユーザなどを隔離することであたかも別のマシンが動いているように動かすことができます．これにより軽量で高速に移動、停止などが可能です．

f:id:caprinet:20191003224748j:plain

f:id:caprinet:20191003224802j:plain

Dockerの主な機能と特徴

コンテナーでアプリケーションを実行するために以下の機能を持ちます．

  • コンピューターリソースの隔離および制限
  • 他のホスト、他のコンテナーとのネットワークの構成
  • ファイル/ディレクトリの世代と差分の管理

Dockerが使用している技術

DockerはGo言語で開発されています．またLinuxカーネルの機能やLinux向けファイルシステムに依存するため、Linuxでのみ動作します．

  • Linux Namespaces：コンピューターリソースの隔離
  • Linux cgroups：コンピューターリソースの制限
  • AUFS/Device Mappern Thin Provisioning：ファイル/ディレクトリの差分管理

  • Linux iptables：他のホスト、他のコンテナーとのネットワークの構成 

アプリケーション開発におけるDocker利用のメリット

通常のアプリケーション開発は以下のような流れで進みます．そのため、開発環境やテスト環境で正しく動作していても、ステージング環境やプロダクション環境にデプロイすると正常に動作しないことがあります．

f:id:caprinet:20191003234131p:plain

 

Dockerでは、これらのインフラ環境をコンテナとして管理します．アプリケーションの実行に必要な全てのファイル/ディレクトリ群をコンテナとしてまとめて、このコンテナの元となるDockerイメージをレポジトリで共有します．

Dockerを使うと以下のような流れで開発ができます．

f:id:caprinet:20191004001634p:plain

開発者はDockerを使って、開発したアプリケーションの実行に必要な全てが含まれるDcokerイメージを作成します．このイメージはコンテナのひな形になり、このイメージを元にして、コンテナを稼働させます．このイメージは、Dockerをインストールしている環境であれば基本的にどこでも動作するので、「開発/テスト環境では動くけど、プロダクション環境では動かない」リスクを減らすことができます．

 

Dockerコマンド

docker run
  • OSを起動したりできる
  • bashをつけることで、bash起動

docker run -it ubuntu:14.04 bash 

  • イメージを指定して起動

docker run -it capr1/testimage:1.0 

  • コンテナを生成/実行

docker container run [環境設定オプション] イメージ名 [:タグ名] [引数]

docker commit
  • 現在までのDockerコンテナの変更内容を新たなイメージとして保存

docker commit コンテナID イメージ名

Dockerfile
  • FROM：ベースイメージを指定
  • RUN：実行するためのスクリプト
  • CMD：dcoker runをした際にそのコマンドを実行可能
  • ENTRYPOINT：あらかじめ指定したコマンドを引数を指定のみで実行可能
  • EXPOSE：ポート番号を指定

イメージをビルド

docker build -t [生成するイメージ名]:[タグ名] [Dockerfileの場所]
ex) docker build -t sample:1.0 /home/docker/sample

削除コマンド
  • イメージの削除

docker rmi imageID

  • コンテナの削除

docker rm containerID

 

参考文献

dev.classmethod.jp

www.atmarkit.co.jp

www.atmarkit.co.jp

knowledge.sakura.ad.jp

akiranet.hatenablog.jp

 

プログラマのためのDocker教科書 第2版 インフラの基礎知識&コードによる環境構築の自動化

プログラマのためのDocker教科書 第2版 インフラの基礎知識&コードによる環境構築の自動化

 

 

セキュリティキャンプ2019全国大会に参加してきた、というお話

Capr1です．

セキュリティキャンプ2019全国大会に参加してきました！

すごく貴重で、かつ濃密であっという間な五日間でした．

ただの参加記みたいなもですが、読んでくださると嬉しいです．

受講した講義

受講した講義は以下の通りです．

B1~3:クラウド時代における大規模分散Webシステムの信頼性制御

B4:認証の課題とID連携の実装

B5:体系的に学ぶモダンWebセキュリティ

B6:つくって学ぶ、インターネットのアーキテクチャと運用

E7:実践トラフィック解析

(本当はE4:クラウド・ホスティングサービスのセキュリティと運用技術の研究も聞きたかった...今は講義資料をコツコツと読み進めています)

 

キャンプ期間中

Day 0

友達とスマブラしてました、うんち！w

Day 1

クロスウェーブ府中に着弾しました！

 

着いた後はホテルの中で昼食を食べました．そこで色んな人に話しかけられ名刺をたくさん交換しました．中にはtwitterでフォローさせていただいている人もいたのでSNSってすごいなーって思いました．

その後は講義がありました．

一つ目の講義はセキュリティ基礎といって、現代のサイバーセキュリティ分野の未解決の問題を掲示していき、それについて議論していくといったものでした．自分はセキュリティに対する意識は周りと比べて高いと思っていたのですが、その講義を聞いていくうちに周りの受講生のセキュリティへの意識の高さや、自分のセキュリティに対する意識の低さを感じました．

二つ目の講義はセキュリティに関する法律と倫理の講義でした．一見正しいようにみえるハッキング行為でも、別の観点からするとNGな部分があったりなど、色んな物事の見方といったものが学べてとても為になりました．

三つ目の講義はITのコミュニティに関する講義でした．コミュニティ活動に参加することで色んな知見が得られたり、あわよくば転職とかで有利に働いたりとコミュニティ活動には色々なメリットがあることが学べました．自分もこれからはコミュニティ活動に積極的に参加していきたいと考えています．

夕食を食べた後はチューターさん達によるLT大会がありました．そこでは僕が所属している研究室の後輩がゲームのセキュリティについて話していたり、研究室の先輩がGoでDockerを用いたルーティングシュミレーションツールを開発した話をしていたり、さらにBトラックのチューターをやられていたAzara(@a_zara_n)さんがSecHack365で開発しているものについての話を聞いて、自分も来年SecHack365に参加してゴリゴリ開発してやろうと思いました．

LT大会の後はグループワークを行いました．グループワークのテーマは「セキュリティキャンプが終わった後の活動」というもので、セキュリティキャンプは参加することが目的ではなく、あくまできっかけにすぎず参加した後が大事であると．

そこで今回のグループワークではキャンプの後にやりたいことが同じもの同士でグループを作り、そこで具体的にキャンプ 修了後に何をしていくのかについてスタッフや講師の方のお話を聞きつつ話し合いました．

 

Day 2

B1~3:クラウド時代における大規模分散Webシステムの信頼性制御 

この講義はクラウド全振りなWebシステムをいかに高信頼に設計・開発・運用していくかについての講義で、前半は座学で、Webシステムのアーキテクチャやスケーリング、SREの基礎についての学びました．後半ではハッカソン形式で、講師の方が事前に用意してくださったサンプルWebアプリケーションをチームでより高信頼なものに作り変えていくといったものでした ．が、僕の技術力不足のせいで実装までにはいたらず設計だけで終わってしまい、しかもその設計も詳細を突き詰める部分が甘く、NoSQLやクエリへの理解もできていなかった為に、あまりいいものではなかったので、非常に悔しかったです．

技術力、もといコーディング力が欲しい．

  

Day 3

B4:認証の課題とID連携の実装 

前半はそもそもIDや認証とは?といった概念的な話が中心で、後半は認証技術であるFIDOやOpenIDについてのフローの説明や、それらの実装、および脆弱性についての理解を実際にサンプルを使い手を動かしながら学びました．応募課題でOpenIDについての課題があり、それを解いていた時にわからなかった事がここではっきり理解できたので非常によかったです．

B5:体系的に学ぶモダンWebセキュリティ

前半ではWebの境界性の必要性、ブラウザについてのセキュリティを体系的に学び、 後半ではCSSinjectionのデモを行い、それをテーマにしたCTFを行いました．結局僕は最後の答えまでたどり着くことはできませんでしたが、このスクリプトを埋め込んだら具体的にどういう動きをするのかについて学べたので非常に楽しかったです．また講師の方から「単純なスクリプトを書く際にPythonとかでワンライナーを書くとかして自動化や効率化をすると幸せになれる」とのコメントをいただき、単純な作業とかはどんどん自動化してもっと効率的に作業をしていくことの重要性を学びました．

下記が公開されている講義資料です．

speakerdeck.com

 

Day 4

B6:つくって学ぶ、インターネットのアーキテクチャと運用

この講義ではインターネットの仕組みとその考え方について実際に手を動かしながら学びました．具体的には講義内容としては、世界中のネットワークが具体的にどのようにして繋がっているのか、DNSの仕組みや名前解決がどのように行われるのか、BGPについての講義内容の後に、PC上で仮想ネットワークを構築し、BGPの設定を行って、小規模なインターネットを構築し、実際にBGPの通信の挙動を確認するという事をしました．BGPの概念だけ理解していた自分にとっては手を動かして体系的に学べたという事で、BGPについての理解度が深まりました．

E7:実践トラフィック解析

前半ではパケット解析の基礎を学び、後半は実際にキャンプ会場内のトラフィックとダークネットのトラフィックをキャプチャし、それらを解析してわかったことを発表していきました．ダークネットのトラフィックを解析したことのない自分にとって、普通のトラフィックとは違うものであふれていたダークネットのトラフィックはとても新鮮で解析していて楽しかったです．

 

また講義が終わり夕食を食べた後はラストナイトイベントがあり、そこで会員企業様や講師の方々から提供して頂いたグッズや本の配布会が行われました．例年は若い順みたいですが、今年はグループワークのグループ名のハッシュ値順でした笑．僕たちのグループは頭から5番目とかなり早い順番でしたが、皆中々どの本をもらうか迷ってしまい、スタッフの方から早く決めて〜と注意を受けてしまいました...w

 

↓ 貰った本

 

その後は会員企業様のお仕事紹介の後、グループワークがありました．そこでも１日目と同じようにキャンプ修了後に何をしていくのかについてスタッフや講師の方のお話を聞きつつ話し合いました．

 

Day 5

最終日です．本当にあっという間でした．起きてからグループワークをした後、写真撮影をした後、講義の成果報告を行いました．集中コースの成果報告が凄かったです．リバエンゼミやべえ．

特にジュニア開発ゼミの成果報告では、中学生とは思えないほどのアウトプットをしていてヤベェ...と思いました．俺中学生の頃ずっとスマブラしてたよ... 

 

キャンプを通じて感じたこと 

まずは、自分をセキュリティキャンプに参加させてくれた運営側に感謝．そしてセキュリティキャンプを知るきっかけを作ってくれた同じ研究室の先輩に感謝しています．

まず感じたことは自分自身の力不足です．自分はまだ井の中の蛙だったんだなぁと痛感させられました．非常に悔しかったです．ただ今回のキャンプは、自分にとってきっかけづくりでもあるのかなと今では思います．レベルを実感し、どこに、どう進んでいけばいいかなどを考えるきっかけに、そして改めて自分自身を見つめ直すきっかけになりました．すごく勉強になりました．講義中はわからないことだらけで、今もう一度講義資料を見て１人で説明できるかは正直微妙です．ですが、諦めずにできるところまではやってみようと思います．このキャンプを糧にこれから精進していきたいです．

 

キャンプを終えた後

キャンプを終えた後は自身の技術力を上げるべく必死に手を動かしています．具体的にはBトラックのチューターをやられていたAzara(@a_zara_n)さんからオススメされた資料を読みながらGoによるWebアプリの実装について実際にコードを書いて勉強しています．

またそれ以外にもノベルティでさくらのVPSのクーポンを貰ったので、ログ分析をやる為にハニーポットの構築も行っていこうと考えています．

 

まとめ

やっぱりあっという間な五日間でしたね．他にも受けたい講義があったり、まだ関われてない人もいたりと思い残すこともちょっとはあります．それでも自分自身の実力不足を実感させてくれたセキュリティキャンプに参加して良かったと思っています．また何らかの形でセキュリティキャンプに関わりたいと考えています．

セキュリティキャンプに興味がある方、そしてまだ今の自分に自信がない方も来年応募してみてください！

 

おまけ

(講義とは関係ない余談)

二日目の講義が終わった後の夜、やわらかくまさん(@yawarakakuma3)と待ち合わせをし、マジカルミライ2019という初音ミクのライブのチケットを譲っていただきました．(やわらかくまさんありがとうございます)

いやー、セキュキャンに参加するとこんないいこともあるんだなぁ〜笑

magicalmirai.com